@plitzi/sdk-server 0.32.14 → 0.32.16

package/dist/modules/mcp/catalogs/cssCatalog/layout.js

@@ -0,0 +1,98 @@
+import { FLEX_DIRECTIONS, FLEX_WRAPS, LENGTH_RE, NUMBER_RE, QUOTE_RE, splitOn, splitPair, splitTokens } from "./helpers.js";
+//#region src/modules/mcp/catalogs/cssCatalog/layout.ts
+var expandOverflow = (value, out) => {
+	const [x, y = x] = splitTokens(value);
+	out["overflow-x"] = x;
+	out["overflow-y"] = y;
+};
+var FLEX_KEYWORDS = /* @__PURE__ */ new Map([
+	["none", [
+		"0",
+		"0",
+		"auto"
+	]],
+	["auto", [
+		"1",
+		"1",
+		"auto"
+	]],
+	["initial", [
+		"0",
+		"1",
+		"auto"
+	]]
+]);
+var writeFlex = (out, grow, shrink, basis) => {
+	out["flex-grow"] = grow;
+	out["flex-shrink"] = shrink;
+	out["flex-basis"] = basis;
+};
+var expandFlex = (value, out) => {
+	const tokens = splitTokens(value);
+	if (tokens.length === 1) {
+		const [only] = tokens;
+		const keyword = FLEX_KEYWORDS.get(only);
+		if (keyword) writeFlex(out, ...keyword);
+		else if (NUMBER_RE.test(only)) writeFlex(out, only, "1", "0%");
+		else writeFlex(out, "1", "1", only);
+		return;
+	}
+	const [grow, second, third] = tokens;
+	if (!NUMBER_RE.test(grow)) return;
+	if (tokens.length === 2) if (NUMBER_RE.test(second)) writeFlex(out, grow, second, "0%");
+	else writeFlex(out, grow, "1", second);
+	else writeFlex(out, grow, second, third);
+};
+var expandFlexFlow = (value, out) => {
+	for (const token of splitTokens(value)) if (FLEX_DIRECTIONS.has(token)) out["flex-direction"] = token;
+	else if (FLEX_WRAPS.has(token)) out["flex-wrap"] = token;
+};
+var expandPlacePair = (prefix, value, out) => {
+	const [align, justify = align] = splitTokens(value);
+	const prop = prefix.slice(6);
+	out[`align-${prop}`] = align;
+	out[`justify-${prop}`] = justify;
+};
+var expandGridLine = (key, value, out) => {
+	const axis = key.slice(5);
+	const [start, end = "auto"] = splitOn(value, "/");
+	out[`grid-${axis}-start`] = start;
+	out[`grid-${axis}-end`] = end;
+};
+var expandGridArea = (value, out) => {
+	const [rowStart, colStart = rowStart, rowEnd = colStart, colEnd = rowEnd] = splitOn(value, "/");
+	out["grid-row-start"] = rowStart;
+	out["grid-column-start"] = colStart;
+	out["grid-row-end"] = rowEnd;
+	out["grid-column-end"] = colEnd;
+};
+var expandColumns = (value, out) => {
+	const tokens = splitTokens(value);
+	if (tokens.length === 1) {
+		const [only] = tokens;
+		if (NUMBER_RE.test(only)) out["column-count"] = only;
+		else out["column-width"] = only;
+	} else if (tokens.length >= 2) {
+		const [first, second] = tokens;
+		const [width, count] = NUMBER_RE.test(first) ? [second, first] : [first, second];
+		out["column-width"] = width;
+		out["column-count"] = count;
+	}
+};
+var isTrackList = (tokens) => tokens.some((token) => token === "none" || token === "auto" || token === "min-content" || token === "max-content" || token.startsWith("[") || token.startsWith("minmax(") || token.startsWith("repeat(") || token.startsWith("fit-content(") || LENGTH_RE.test(token) || /^-?[\d.]+fr$/.test(token));
+var expandGridTemplate = (value, out) => {
+	const [first, second] = splitPair(value, "/");
+	const rowTokens = splitTokens(first);
+	const areas = rowTokens.filter((token) => QUOTE_RE.test(token));
+	const sizes = rowTokens.filter((token) => !QUOTE_RE.test(token));
+	if (second !== void 0) {
+		if (second !== "") out["grid-template-columns"] = second;
+	} else if (areas.length === 0) {
+		if (isTrackList(rowTokens)) out["grid-template-columns"] = first;
+		return;
+	}
+	if (areas.length > 0) out["grid-template-areas"] = areas.join(" ");
+	if (sizes.length > 0) out["grid-template-rows"] = sizes.join(" ");
+};
+//#endregion
+export { expandColumns, expandFlex, expandFlexFlow, expandGridArea, expandGridLine, expandGridTemplate, expandOverflow, expandPlacePair };

package/dist/modules/mcp/catalogs/cssCatalog/visual.js

@@ -0,0 +1,144 @@
+import { ANIMATION_DIRECTIONS, ANIMATION_FILL_MODES, ANIMATION_PLAY_STATES, FONT_STYLE_KEYWORDS, FONT_VARIANT_KEYWORDS, FONT_WEIGHT_KEYWORDS, LENGTH_RE, LIST_STYLE_POSITIONS, LIST_STYLE_TYPES, NUMBER_RE, TEXT_DECORATION_LINES, TEXT_DECORATION_STYLES, TIME_RE, isTimingFunction, splitOn, splitPair, splitTokens } from "./helpers.js";
+import { classifyBorderTokens } from "./border.js";
+//#region src/modules/mcp/catalogs/cssCatalog/visual.ts
+var expandLayers = (value, out, expandLayer) => {
+	const layers = splitOn(value, ",");
+	if (layers.length === 1) {
+		expandLayer(layers[0], out);
+		return;
+	}
+	const perLayer = layers.map((layer) => {
+		const layerOut = {};
+		expandLayer(layer, layerOut);
+		return layerOut;
+	});
+	const keys = new Set(perLayer.flatMap((layer) => Object.keys(layer)));
+	for (const key of keys) out[key] = perLayer.map((layer) => String(layer[key] ?? "initial")).join(", ");
+};
+var expandOutline = (value, out) => {
+	for (const [kind, token] of Object.entries(classifyBorderTokens(value))) out[`outline-${kind}`] = token;
+};
+var expandListStyle = (value, out) => {
+	for (const token of splitTokens(value)) if (token.startsWith("url(")) out["list-style-image"] = token;
+	else if (LIST_STYLE_POSITIONS.has(token)) out["list-style-position"] = token;
+	else if (LIST_STYLE_TYPES.has(token)) out["list-style-type"] = token;
+};
+var expandTextDecoration = (value, out) => {
+	for (const token of splitTokens(value)) if (TEXT_DECORATION_LINES.has(token)) out["text-decoration-line"] = token;
+	else if (TEXT_DECORATION_STYLES.has(token)) out["text-decoration-style"] = token;
+	else out["text-decoration-color"] = token;
+};
+var expandTransitionLayer = (layer, out) => {
+	let foundDuration = false;
+	for (const token of splitTokens(layer)) if (isTimingFunction(token)) out["transition-timing-function"] = token;
+	else if (TIME_RE.test(token) || NUMBER_RE.test(token)) if (foundDuration) out["transition-delay"] = token;
+	else {
+		out["transition-duration"] = token;
+		foundDuration = true;
+	}
+	else if (!out["transition-property"]) out["transition-property"] = token;
+};
+var expandTransition = (value, out) => expandLayers(value, out, expandTransitionLayer);
+var expandAnimationLayer = (layer, out) => {
+	let foundDuration = false;
+	for (const token of splitTokens(layer)) if (isTimingFunction(token)) out["animation-timing-function"] = token;
+	else if (TIME_RE.test(token)) if (foundDuration) out["animation-delay"] = token;
+	else {
+		out["animation-duration"] = token;
+		foundDuration = true;
+	}
+	else if (token === "infinite" || NUMBER_RE.test(token)) out["animation-iteration-count"] = token;
+	else if (ANIMATION_DIRECTIONS.has(token) && !out["animation-direction"]) out["animation-direction"] = token;
+	else if (ANIMATION_FILL_MODES.has(token) && !out["animation-fill-mode"]) out["animation-fill-mode"] = token;
+	else if (ANIMATION_PLAY_STATES.has(token) && !out["animation-play-state"]) out["animation-play-state"] = token;
+	else if (!out["animation-name"]) out["animation-name"] = token;
+};
+var expandAnimation = (value, out) => expandLayers(value, out, expandAnimationLayer);
+var BACKGROUND_REPEATS = /* @__PURE__ */ new Set([
+	"repeat",
+	"no-repeat",
+	"repeat-x",
+	"repeat-y",
+	"space",
+	"round"
+]);
+var BACKGROUND_ATTACHMENTS = /* @__PURE__ */ new Set([
+	"scroll",
+	"fixed",
+	"local"
+]);
+var BACKGROUND_BOXES = /* @__PURE__ */ new Set([
+	"border-box",
+	"padding-box",
+	"content-box"
+]);
+var BACKGROUND_POSITIONS = /* @__PURE__ */ new Set([
+	"center",
+	"top",
+	"bottom",
+	"left",
+	"right"
+]);
+var isImage = (token) => token.startsWith("url(") || token.includes("-gradient(");
+var isPosition = (token) => BACKGROUND_POSITIONS.has(token) || LENGTH_RE.test(token);
+var isSize = (token) => token === "cover" || token === "contain" || token === "auto" || LENGTH_RE.test(token);
+var expandBackgroundLayer = (layer, out) => {
+	const [beforeSlash, afterSlash] = splitPair(layer, "/");
+	const tokens = splitTokens(beforeSlash);
+	if (afterSlash !== void 0) {
+		let positionStart = tokens.length;
+		while (positionStart > 0 && isPosition(tokens[positionStart - 1])) positionStart -= 1;
+		const position = tokens.splice(positionStart, tokens.length - positionStart);
+		if (position.length > 0) out["background-position"] = position.join(" ");
+		const afterTokens = splitTokens(afterSlash);
+		let sizeEnd = 0;
+		while (sizeEnd < afterTokens.length && isSize(afterTokens[sizeEnd])) sizeEnd += 1;
+		if (sizeEnd > 0) out["background-size"] = afterTokens.slice(0, sizeEnd).join(" ");
+		tokens.push(...afterTokens.slice(sizeEnd));
+	}
+	const positions = [];
+	for (const token of tokens) if (isImage(token)) out["background-image"] = token;
+	else if (BACKGROUND_REPEATS.has(token)) out["background-repeat"] = token;
+	else if (token === "cover" || token === "contain") out["background-size"] = token;
+	else if (BACKGROUND_ATTACHMENTS.has(token)) out["background-attachment"] = token;
+	else if (BACKGROUND_BOXES.has(token)) if (out["background-origin"]) out["background-clip"] = token;
+	else out["background-origin"] = token;
+	else if (isPosition(token)) positions.push(token);
+	else if (!out["background-color"]) out["background-color"] = token;
+	if (positions.length > 0) out["background-position"] = positions.join(" ");
+};
+var expandBackground = (value, out) => expandLayers(value, out, expandBackgroundLayer);
+var expandFont = (value, out) => {
+	const [beforeSlash, afterSlash] = splitPair(value, "/");
+	const tokens = splitTokens(beforeSlash);
+	if (afterSlash !== void 0) {
+		const [lineHeight, ...family] = splitTokens(afterSlash);
+		out["line-height"] = lineHeight;
+		if (family.length > 0) out["font-family"] = family.join(" ");
+	}
+	const family = [];
+	let foundSize = false;
+	for (const token of tokens) {
+		if (foundSize) {
+			family.push(token);
+			continue;
+		}
+		if (token === "normal") {
+			const slot = [
+				"font-style",
+				"font-variant",
+				"font-weight"
+			].find((prop) => !out[prop]);
+			if (slot) out[slot] = token;
+		} else if (FONT_STYLE_KEYWORDS.has(token) && !out["font-style"]) out["font-style"] = token;
+		else if (FONT_VARIANT_KEYWORDS.has(token) && !out["font-variant"]) out["font-variant"] = token;
+		else if (FONT_WEIGHT_KEYWORDS.has(token) && !out["font-weight"]) out["font-weight"] = token;
+		else if (LENGTH_RE.test(token)) {
+			out["font-size"] = token;
+			foundSize = true;
+		}
+	}
+	if (family.length > 0) out["font-family"] = family.join(" ");
+};
+//#endregion
+export { expandAnimation, expandBackground, expandFont, expandListStyle, expandOutline, expandTextDecoration, expandTransition };

package/dist/modules/mcp/catalogs/registry.js

@@ -1,5 +1,5 @@
 import { BUILTIN_COMPONENTS } from "./builtinComponents.js";
-import { cssProperties } from "./cssCatalog.js";
+import { cssProperties } from "./cssCatalog/index.js";
 //#region src/modules/mcp/catalogs/registry.ts
 var enrichType = (typeName, info, catalog) => {
 	const entry = catalog?.[typeName];

package/dist/modules/mcp/helpers/guide.js

@@ -1,5 +1,5 @@
 //#region src/modules/mcp/helpers/guide.ts
-var serverInstructions = "Plitzi AI server: read-then-write editing of a Plitzi space. Reads follow a filesystem model — list cheap, read one item in detail on demand; never fetch a whole tree you do not need. Workflow: (1) read plitzi://primer/{env} once — it bundles the guide, types, css-properties and page/definition/variable summaries in a single call; (2) plitzi_search with include:\"detail\" to jump to elements — each hit then carries its uri, stateVersion AND full style/resolvedStyle, so an edit needs no per-element read; open a page skeleton or element only when you need its tree/detail (the skeleton already lists the style classes of each node, and plitzi_read fetches many uris at once); (3) plitzi_apply with dryRun to preview a batch; (4) plitzi_apply to persist, passing expectedResourceVersions to guard against concurrent edits — apply and search both hand back the versions you need for the next edit. Use patchElement / patchDefinition to change only some props / CSS (the upsert variants replace them all). An element read (and search include:\"detail\") inlines the CSS of the definitions it attaches under resolvedStyle, so you rarely need a separate definition read. Refs accept a semantic idRef ([A-Za-z0-9_-] starting with a letter, unique, chosen by you) or the raw id — the idRef is ALSO the runtime wiring key, so a provider source is `<type>_<idRef>.<field>`, visible to the provider’s DESCENDANTS only (bind inside its subtree). CSS is kebab-case and ATOMIC (shorthands like border/padding expanded; compound ones like flex/background/font rejected — use longhands); style vars are var(--name), schema vars are {{name}}. READERS — do not confuse them: MCP *resources* are the browsable catalog (list them, or open one by URI); plitzi_search FINDS refs by label/type/attribute; plitzi_read BATCH-fetches URIs you already hold. Reach for search/read to work; browse resources to discover. Elements also carry applied style variants + visibility (initialState), data bindings and interaction flows: edit them with patchElement (initialState), upsertBinding/patchBinding/deleteBinding, and upsertInteractionFlow/patchInteractionNode/deleteInteraction. An element read shows all three plus availableVariants (which variant each of its classes offers). Separately, to SHOW the user a small self-contained widget (offline, no space or backend) instead of editing the space — a card, hero, pricing table, a visual answer — use plitzi_render; read plitzi://render/guide for it.";
+var serverInstructions = "Plitzi AI server: read-then-write editing of a Plitzi space. Reads follow a filesystem model — list cheap, read one item in detail on demand; never fetch a whole tree you do not need. Workflow: (1) read plitzi://primer/{env} once — it bundles the guide, types, css-properties and page/definition/variable summaries in a single call; (2) plitzi_search with include:\"detail\" to jump to elements — each hit then carries its uri, stateVersion AND full style/resolvedStyle, so an edit needs no per-element read; open a page skeleton or element only when you need its tree/detail (the skeleton already lists the style classes of each node, and plitzi_read fetches many uris at once); (3) plitzi_apply with dryRun to preview a batch; (4) plitzi_apply to persist, passing expectedResourceVersions to guard against concurrent edits — apply and search both hand back the versions you need for the next edit. Use patchElement / patchDefinition to change only some props / CSS (the upsert variants replace them all). An element read (and search include:\"detail\") inlines the CSS of the definitions it attaches under resolvedStyle, so you rarely need a separate definition read. Refs accept a semantic idRef ([A-Za-z0-9_-] starting with a letter, unique, chosen by you) or the raw id — the idRef is ALSO the runtime wiring key, so a provider source is `<type>_<idRef>.<field>`, visible to the provider’s DESCENDANTS only (bind inside its subtree). CSS is plain kebab-case — write shorthands freely (`border: 1px solid red`, `padding: 8px 16px`, `font: bold 16px/1.5 Arial`), they are expanded to longhands for you and STORED that way, so read-back shows the longhands; style vars are var(--name), schema vars are {{name}}. READERS — do not confuse them: MCP *resources* are the browsable catalog (list them, or open one by URI); plitzi_search FINDS refs by label/type/attribute; plitzi_read BATCH-fetches URIs you already hold. Reach for search/read to work; browse resources to discover. Elements also carry applied style variants + visibility (initialState), data bindings and interaction flows: edit them with patchElement (initialState), upsertBinding/patchBinding/deleteBinding, and upsertInteractionFlow/patchInteractionNode/deleteInteraction. An element read shows all three plus availableVariants (which variant each of its classes offers). Separately, to SHOW the user a small self-contained widget (offline, no space or backend) instead of editing the space — a card, hero, pricing table, a visual answer — use plitzi_render; read plitzi://render/guide for it.";
 var guideQuickstart = `# Plitzi AI MCP — quickstart
 This is the condensed guide; read \`plitzi://guide\` for the full reference (every resource, op and example).
 
@@ -19,10 +19,12 @@ interactions target by it. A dot would split that path; an **underscore is fine*
 from the idRef (element types have none), so \`list_food_item\` reads unambiguously as type \`list\`, idRef \`food_item\`.
 
 **Styling:** CSS keys are **kebab-case** (\`background-color\`); \`var(--token)\` for style vars, \`{{name}}\` for schema
-vars. Shorthands \`border\`/\`padding\`/\`margin\`/\`gap\` are expanded for you. Write **atomically — no compound
-shorthands** (\`flex\`, \`background\`, \`font\`, \`transition\`, \`grid\` are rejected/warned): use their longhands, and
-express flex layout as \`display: flex\` + \`flex-direction\`/\`align-items\`/… Mind a type's \`defaultStyle\` (\`text\`
-is \`display: inline\`). Global styles (\`button {…}\`) and id styles (\`#id\`) have their own ops.
+vars. **Write plain CSS** — shorthands (\`border\`, \`padding\`, \`margin\`, \`gap\`, \`overflow\`, \`flex\`, \`background\`,
+\`font\`, \`transition\`, \`animation\`, \`grid\`, \`grid-row\`/\`grid-column\`, \`place-*\`, \`outline\`, \`columns\`,
+\`list-style\`, \`text-decoration\`) are expanded to their longhands for you, so \`border: 1px solid red\` is stored as
+\`border-top-color\`/\`border-top-width\`/\`border-top-style\`/… That is also how you read them back. Flex layout is
+still \`display: flex\` + \`flex-direction\`/\`align-items\`/…, not a \`flex\` value. Mind a type's \`defaultStyle\`
+(\`text\` is \`display: inline\`). Global styles (\`button {…}\`) and id styles (\`#id\`) have their own ops.
 
 **Data bindings** (\`upsertBinding\`, category attributes|style|initialState): connect a \`source\` to a \`to\` field.
 A source \`<type>_<idRef>\` is scoped to the provider's **DESCENDANTS only** — bind inside the provider's subtree
@@ -202,14 +204,22 @@ pointed at the old name is repointed with it, so the element stays wired. You do
 - A definition lives in the **style schema**; an element's \`style.base\` (element schema) is the link that applies
   it. Styling an element = upsertDefinition + upsertElement with that ref in \`style.base\`, in one batch.
 - CSS keys are **kebab-case** (\`background-color\`). camelCase is rejected — read \`plitzi://css-properties\`.
-- Common **shorthands are accepted** and expanded for you: \`border\`, \`border-{side}\`, \`border-radius\`,
-  \`padding\`, \`margin\`, \`inset\`, \`gap\` (they persist as their longhand keys).
-- **Write CSS atomically — no multi-value compound shorthands.** Plitzi stores each property on its own so a
-  breakpoint/state/variant can override just that one, so \`flex\`, \`background\`, \`font\`, \`transition\`,
-  \`animation\`, \`grid\`, \`place-*\`, \`outline\`, \`columns\` are **rejected** (or warned) — use their longhands
-  instead: \`background\` → \`background-color\`/\`background-image\`/…, \`font\` → \`font-size\`/\`font-weight\`/
-  \`line-height\`, \`flex: 1\` → \`flex-grow\`/\`flex-shrink\`/\`flex-basis\`. **Flex layout is not a \`flex\` value**: set
-  \`display: flex\` **plus** \`flex-direction\`, \`align-items\`, \`justify-content\` as separate properties.
+- **Write normal CSS — shorthands are accepted and expanded for you.** \`border\`, \`border-{side}\`,
+  \`border-width\`/\`-color\`/\`-style\`, \`border-radius\`, \`padding\`, \`margin\`, \`inset\`, \`gap\`, \`overflow\`,
+  \`flex\`, \`flex-flow\`, \`background\`, \`font\`, \`transition\`, \`animation\`, \`grid\`, \`grid-template\`,
+  \`grid-area\`, \`grid-row\`, \`grid-column\`, \`place-content\`, \`place-items\`, \`place-self\`, \`outline\`,
+  \`columns\`, \`list-style\`, \`text-decoration\` — the full list is in \`plitzi://css-properties\` under
+  \`shorthands\`. They **persist as longhand keys** (that is what a read gives back), so a breakpoint/state/variant
+  can still override one property at a time.
+  - \`border: 1px solid red\` → \`border-top-width: 1px\`, \`border-top-style: solid\`, \`border-top-color: red\`, …
+    for all four sides. A shorthand also RESETS what it omits, so \`border: none\` clears a width a previous
+    definition set.
+  - Comma-separated layers are kept per longhand: \`transition: opacity 200ms, transform 300ms\` →
+    \`transition-property: opacity, transform\` + \`transition-duration: 200ms, 300ms\`.
+  - In a **patch**, a shorthand replaces the longhands it controls (\`padding: 8px\` overwrites a previous
+    \`padding-left\`), and \`"border": null\` removes all twelve border longhands.
+- **Flex layout is not a \`flex\` value**: set \`display: flex\` **plus** \`flex-direction\`, \`align-items\`,
+  \`justify-content\` as separate properties.
 - CSS is grouped by breakpoint: \`desktop\`, \`tablet\`, \`mobile\`.
 - Reference a style variable in CSS as \`var(--name)\`; a schema variable in a prop as \`{{name}}\`.
 - \`element.style.base\` is a **list** of definition refs; other slots go under \`element.style.slots\`.

package/dist/modules/mcp/resources/core.js

@@ -1,4 +1,4 @@
-import { cssProperties } from "../catalogs/cssCatalog.js";
+import { cssProperties, cssShorthands } from "../catalogs/cssCatalog/index.js";
 import { buildTypeRegistry } from "../catalogs/registry.js";
 import "../helpers/uris.js";
 import { guideText } from "../helpers/guide.js";
@@ -9,7 +9,10 @@ import { envelope } from "./envelope.js";
 var readCoreResource = (space, uri) => {
 	if (uri === "plitzi://guide") return envelope(guideText);
 	if (uri === "plitzi://types") return envelope(buildTypeRegistry(space.schema, space.catalog));
-	if (uri === "plitzi://css-properties") return envelope(cssProperties);
+	if (uri === "plitzi://css-properties") return envelope({
+		properties: cssProperties,
+		shorthands: cssShorthands
+	});
 };
 //#endregion
 export { readCoreResource };

package/dist/modules/mcp/resources/primer.js

@@ -1,4 +1,4 @@
-import { cssProperties } from "../catalogs/cssCatalog.js";
+import { cssProperties, cssShorthands } from "../catalogs/cssCatalog/index.js";
 import { buildDataSourceCatalog, buildInteractionCatalog } from "../catalogs/observed.js";
 import { buildTypeRegistry } from "../catalogs/registry.js";
 import { guideQuickstart } from "../helpers/guide.js";
@@ -16,6 +16,7 @@ var readPrimerResource = (space, env, uri) => {
 		guide: guideQuickstart,
 		types: buildTypeRegistry(space.schema, space.catalog),
 		cssProperties,
+		cssShorthands,
 		pages: pageSummariesToAI(space.schema),
 		folders: foldersToAI(space.schema),
 		definitions: definitionRefs(space.style),

package/dist/modules/mcp/resources/register.js

@@ -1,4 +1,4 @@
-import { cssProperties } from "../catalogs/cssCatalog.js";
+import { cssProperties, cssShorthands } from "../catalogs/cssCatalog/index.js";
 import { guideText } from "../helpers/guide.js";
 import { resourceErrorMessage } from "./canonical.js";
 import { envelope, jsonContents } from "./envelope.js";
@@ -36,9 +36,12 @@ var registerResources = (server, getSpace, env, log) => {
 		text: guideText
 	}] })));
 	server.registerResource("CSS properties", "plitzi://css-properties", {
-		description: "Valid kebab-case CSS property keys",
+		description: "Valid kebab-case CSS property keys, plus the shorthands that are accepted and auto-expanded",
 		mimeType: "application/json"
-	}, () => emitStatic("plitzi://css-properties", () => jsonContents("plitzi://css-properties", envelope(cssProperties))));
+	}, () => emitStatic("plitzi://css-properties", () => jsonContents("plitzi://css-properties", envelope({
+		properties: cssProperties,
+		shorthands: cssShorthands
+	}))));
 	registerRenderResources(server, log);
 	const fixed = [
 		[

package/dist/modules/mcp/server.js

@@ -43,7 +43,7 @@ var createMcpServer = ({ adapters, getSpaceId, preview, screenshot, logger }) =>
 	const getSpace = () => spacePromise ??= loadSpace();
 	const server = new McpServer({
 		name: "plitzi-mcp",
-		version: "0.32.14"
+		version: "0.32.16"
 	}, { instructions: serverInstructions });
 	registerResources(server, getSpace, MCP_ENV, log);
 	registerApps(server);

package/dist/modules/mcp/tools/operations/schema/interactions/upsertInteractionFlow.js

@@ -16,13 +16,14 @@ var upsertInteractionFlow = (space, env, op) => {
 	const found = resolveElement(space, env, op.pageRef, op.ref);
 	if ("error" in found) return found.error;
 	const ownerRef = ensureIdRef(space, found.el);
-	const { flowId, record } = materializeFlow((op.flowId && !op.nodes[0].id ? [{
+	const nodes = (op.flowId && !op.nodes[0].id ? [{
 		...op.nodes[0],
 		id: op.flowId
 	}, ...op.nodes.slice(1)] : op.nodes).map((node) => node.elementId === void 0 || node.nodeType === "utility" ? node : {
 		...node,
 		elementId: resolveTargetRef(space, node.elementId)
-	}), ownerRef);
+	});
+	const { flowId, record } = materializeFlow(nodes, ownerRef);
 	const interactions = found.el.definition.interactions ?? {};
 	const targetFlow = op.flowId ?? flowId;
 	let replaced = false;

package/dist/modules/mcp/tools/operations/style/shared.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
 //#region src/modules/mcp/tools/operations/style/shared.ts
-var cssMap = z.record(z.string(), z.union([z.string(), z.number()])).describe("kebab-case CSS props; use var(--name) for tokens and {{name}} for schema vars");
+var cssMap = z.record(z.string(), z.union([z.string(), z.number()])).describe("Plain kebab-case CSS. Shorthands are welcome — `border: 1px solid red`, `padding: 8px 16px`, `font: bold 16px/1.5 Arial`, `transition: opacity 200ms ease` — and are stored as their longhands so a breakpoint/state/variant can override each property on its own. Use var(--name) for style tokens and {{name}} for schema vars.");
 var displayModeCss = z.object({
 	desktop: cssMap.optional(),
 	tablet: cssMap.optional(),
@@ -14,7 +14,7 @@ var cssPatchMap = z.record(z.string(), z.union([
 	z.string(),
 	z.number(),
 	z.null()
-])).describe("kebab-case CSS props; a value of null removes the property, others are merged onto the existing CSS");
+])).describe("Plain kebab-case CSS merged onto the existing declarations; shorthands are accepted and expanded, so `padding: 8px` replaces all four sides. A value of null removes the property — null on a shorthand (`border: null`) removes every longhand it controls.");
 var displayModeCssPatch = z.object({
 	desktop: cssPatchMap.optional(),
 	tablet: cssPatchMap.optional(),

package/dist/modules/mcp/tools/operations/style/write.js

@@ -1,4 +1,4 @@
-import { expandShorthand } from "../../../catalogs/cssCatalog.js";
+import { expandShorthand, expandShorthandPatch } from "../../../catalogs/cssCatalog/index.js";
 import { defUri, defsUri, globalUri, globalsUri, idUri, idsUri, styleVarUri, styleVarsUri } from "../../../helpers/uris.js";
 import { fail } from "../../../helpers/opResult.js";
 import processSelector from "@plitzi/sdk-style/helpers/processSelector";
@@ -65,7 +65,7 @@ var writeStyleItem = (style, ref, base, slots, itemType, componentType) => {
 };
 var mergeCss = (base, patch) => {
 	const merged = { ...base };
-	for (const [key, value] of Object.entries(patch ?? {})) if (value === null) Reflect.deleteProperty(merged, key);
+	for (const [key, value] of Object.entries(expandShorthandPatch(patch ?? {}))) if (value === null) Reflect.deleteProperty(merged, key);
 	else merged[key] = value;
 	return Object.keys(merged).length > 0 ? merged : void 0;
 };

package/dist/modules/mcp/tools/shared/validator/audit.js

@@ -83,10 +83,7 @@ var collectTouched = (ops) => {
 			touched.globalStyles.add(op.componentType);
 			break;
 		case "upsertIdStyle":
-		case "patchIdStyle":
-			touched.idStyles.add(op.targetId);
-			break;
-		default: break;
+		case "patchIdStyle": touched.idStyles.add(op.targetId);
 	}
 	return touched;
 };

package/dist/modules/mcp/tools/shared/validator/css.js

@@ -1,20 +1,12 @@
-import { compoundLonghands, expandShorthand, isCssProperty, suggestCssProperty } from "../../../catalogs/cssCatalog.js";
-import { checkStyleVarRefs, checkVarRefs, warnOnce } from "./context.js";
+import { expandShorthand, isCssProperty, suggestCssProperty } from "../../../catalogs/cssCatalog/index.js";
+import { checkStyleVarRefs, checkVarRefs } from "./context.js";
 //#region src/modules/mcp/tools/shared/validator/css.ts
 var checkCss = (css, path, ctx) => {
 	if (!css) return;
 	const declared = {};
 	for (const [key, value] of Object.entries(css)) if (value !== null) declared[key] = value;
 	for (const [key, value] of Object.entries(expandShorthand(declared))) {
-		const longhands = compoundLonghands(key);
-		if (longhands) if (!isCssProperty(key)) ctx.errors.push({
-			path: `${path}.${key}`,
-			message: `Compound CSS shorthand "${key}" is not supported — write its atomic longhand properties`,
-			hint: `Use: ${longhands.join(", ")}. (Note: flex layout is display + flex-direction + flex-grow/shrink/basis, not "flex".)`,
-			validValues: longhands
-		});
-		else warnOnce(ctx, `CSS shorthand "${key}" at ${path}.${key} is accepted but stored as one compound value. Plitzi styling is atomic — prefer the longhands (${longhands.join(", ")}) so a breakpoint/state/variant can override each property independently.`);
-		else if (!isCssProperty(key)) {
+		if (!isCssProperty(key)) {
 			const suggestion = suggestCssProperty(key);
 			ctx.errors.push({
 				path: `${path}.${key}`,

package/dist/modules/mcp/tools/shared/validator/elements.js

@@ -25,7 +25,10 @@ var checkVariantApplication = (initialState, path, ctx) => {
 		const batch = ctx.batchVariants.get(cls);
 		for (const [selector, variant] of Object.entries(selectors)) {
 			const names = Array.isArray(variant) ? variant : [variant];
-			for (const name of names) if (!((declared?.[selector]?.includes(name) ?? false) || (batch?.has(name) ?? false))) warnOnce(ctx, `Element applies variant "${name}" on class "${cls}" (${selector}) at ${path}, but that class defines no such variant${declared ? ` (declares: ${Object.entries(declared).map(([s, v]) => `${s}:${v.join("/")}`).join(", ")})` : ""}. Create it via upsertDefinition/patchDefinition "variants", or fix the name.`);
+			for (const name of names) if (!((declared?.[selector]?.includes(name) ?? false) || (batch?.has(name) ?? false))) {
+				const avail = declared ? ` (declares: ${Object.entries(declared).map(([s, v]) => `${s}:${v.join("/")}`).join(", ")})` : "";
+				warnOnce(ctx, `Element applies variant "${name}" on class "${cls}" (${selector}) at ${path}, but that class defines no such variant${avail}. Create it via upsertDefinition/patchDefinition "variants", or fix the name.`);
+			}
 		}
 	}
 };

package/dist/modules/mcp/tools/shared/validator/index.js

@@ -191,19 +191,21 @@ var validateOperations = (space, ops) => {
 			case "patchInteractionNode": {
 				checkRef(op.ref, `${base}.ref`, ctx);
 				const existing = findElementByRef(space.schema, op.ref)?.definition.interactions?.[op.nodeId];
-				if (existing) checkInteractionNode({
-					id: existing.id,
-					title: op.title ?? existing.title,
-					nodeType: existing.type,
-					action: op.action ?? existing.action,
-					params: {
-						...existing.params,
-						...op.params ?? {}
-					},
-					enabled: op.enabled ?? existing.enabled,
-					elementId: op.elementId ?? existing.elementId ?? void 0
-				}, base, ctx, op.ref);
-				else checkObservedName(op.action, ctx.observedActions, "Interaction action", "plitzi://interactions", `${base}.action`, ctx);
+				if (existing) {
+					const merged = {
+						id: existing.id,
+						title: op.title ?? existing.title,
+						nodeType: existing.type,
+						action: op.action ?? existing.action,
+						params: {
+							...existing.params,
+							...op.params ?? {}
+						},
+						enabled: op.enabled ?? existing.enabled,
+						elementId: op.elementId ?? existing.elementId ?? void 0
+					};
+					checkInteractionNode(merged, base, ctx, op.ref);
+				} else checkObservedName(op.action, ctx.observedActions, "Interaction action", "plitzi://interactions", `${base}.action`, ctx);
 				break;
 			}
 			case "deleteInteraction":
@@ -213,8 +215,6 @@ var validateOperations = (space, ops) => {
 					message: "Provide exactly one of flowId or nodeId",
 					hint: "flowId removes a whole flow; nodeId removes a single step"
 				});
-				break;
-			default: break;
 		}
 	});
 	return {

package/dist/modules/mcp/tools/shared/validator/interactions.js

@@ -96,10 +96,7 @@ var checkInteractionNode = (node, base, ctx, hostRef) => {
 		case "callback":
 			checkElementCallback(node, base, ctx, hostRef);
 			break;
-		case "utility":
-			checkUtility(node, base, ctx);
-			break;
-		default: break;
+		case "utility": checkUtility(node, base, ctx);
 	}
 };
 //#endregion

package/dist/modules/oauth/authorize.js

@@ -28,7 +28,8 @@ var hiddenFieldsFor = (request, pendingId) => {
 	return hidden;
 };
 var renderConsent = async (config, res, view) => {
-	sendHtml(res, 200, await (config.renderConsent ?? renderConsentPage)(view));
+	const html = await (config.renderConsent ?? renderConsentPage)(view);
+	sendHtml(res, 200, html);
 };
 /** Validates the parts of an authorization request that decide WHERE a failure may be reported. Until the client
 *  and its redirect target check out, nothing may be sent back to the client. */

package/dist/modules/oauth/metadata.js

@@ -22,11 +22,17 @@ var resourceMetadataUrl = (config, req) => `${issuerOf(config, req)}${PROTECTED_
 *
 *  `resource` echoes the path the document was asked for: Claude requires it to match the server URL the user
 *  typed, path included, and a dedicated MCP server answers JSON-RPC on every path — so `/.well-known/…/mcp`
-*  describes `https://host/mcp` while the bare path describes the origin. */
+*  describes `https://host/mcp` while the bare path describes the origin.
+*
+*  A server mounted at the ORIGIN is `https://host/`, WITH the trailing slash: a host parses the URL the user
+*  typed before it does anything with it, and an empty path renders as `/` — that normalized form is what the
+*  client sends back as the `resource` parameter (asserted in the connector e2e). A document claiming to be
+*  `https://host` then disagrees with the request made against it, and Claude's connector drops the grant it
+*  just completed — it takes the token and never opens the session. */
 var protectedResourceMetadata = (config, req) => {
 	const issuer = issuerOf(config, req);
 	return {
-		resource: `${issuer}${canonicalPath(req.path.slice(37))}`,
+		resource: `${issuer}${canonicalPath(req.path.slice(37)) || "/"}`,
 		authorization_servers: [issuer],
 		scopes_supported: scopesOf(config),
 		bearer_methods_supported: ["header"]

package/dist/modules/oauth/records.js

@@ -1,5 +1,5 @@
 //#region src/modules/oauth/records.ts
-var CLIENT_TTL_SECONDS = 3600 * 24 * 90;
+var CLIENT_TTL_SECONDS = 7776e3;
 var PENDING_TTL_SECONDS = 600;
 var keyOf = (kind, id) => `oauth:${kind}:${id}`;
 var readJson = async (store, kind, id) => {
@@ -16,6 +16,15 @@ var writeJson = async (store, kind, id, value, ttlSeconds) => {
 };
 var putClient = (store, client) => writeJson(store, "client", client.clientId, client, CLIENT_TTL_SECONDS);
 var getClient = (store, clientId) => readJson(store, "client", clientId);
+/** The id already handed out for an identical registration. Keyed by what the client asked to be registered AS,
+*  so the same request always resolves to the same client — see handleRegister for why that matters. */
+var getClientByFingerprint = async (store, fingerprint) => {
+	const clientId = await store.get(keyOf("clientfp", fingerprint));
+	return clientId ? getClient(store, clientId) : void 0;
+};
+var putClientFingerprint = async (store, fingerprint, clientId) => {
+	await store.put(keyOf("clientfp", fingerprint), clientId, CLIENT_TTL_SECONDS);
+};
 var putPending = (store, id, pending) => writeJson(store, "pending", id, pending, PENDING_TTL_SECONDS);
 var getPending = (store, id) => readJson(store, "pending", id);
 var dropPending = async (store, id) => {
@@ -34,4 +43,4 @@ var dropRefresh = async (store, token) => {
 var putAccess = (store, token, record, ttlSeconds) => writeJson(store, "access", token, record, ttlSeconds);
 var getAccess = (store, token) => readJson(store, "access", token);
 //#endregion
-export { dropCode, dropPending, dropRefresh, getAccess, getClient, getCode, getPending, getRefresh, putAccess, putClient, putCode, putPending, putRefresh };
+export { dropCode, dropPending, dropRefresh, getAccess, getClient, getClientByFingerprint, getCode, getPending, getRefresh, putAccess, putClient, putClientFingerprint, putCode, putPending, putRefresh };