@plitzi/sdk-server 0.32.15 → 0.32.16

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.15"
+		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) => {

package/dist/modules/oauth/token.js

@@ -4,8 +4,8 @@ import { randomId, verifyChallenge } from "./pkce.js";
 import { dropCode, dropRefresh, getCode, getRefresh, putAccess, putRefresh } from "./records.js";
 import { sendErrorJson, sendJson } from "./respond.js";
 //#region src/modules/oauth/token.ts
-var DEFAULT_REFRESH_TTL_SECONDS = 3600 * 24 * 30;
-var DEFAULT_ACCESS_TTL_SECONDS = 3600 * 24 * 30;
+var DEFAULT_REFRESH_TTL_SECONDS = 2592e3;
+var DEFAULT_ACCESS_TTL_SECONDS = 2592e3;
 var refreshTtlOf = (config) => config.refreshTtlSeconds ?? DEFAULT_REFRESH_TTL_SECONDS;
 var scopeOf = (config, requested) => requested ?? scopesOf(config).join(" ");
 /** The token response, plus a rotated refresh grant when refresh is enabled. Rotation is unconditional: a refresh

package/dist/modules/ssr/registerExternalPlugins.js

@@ -2,7 +2,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import fs from "node:fs/promises";
 //#region src/modules/ssr/registerExternalPlugins.ts
-var MANIFEST_TTL_MS = 600 * 1e3;
+var MANIFEST_TTL_MS = 6e5;
 var manifestCache = /* @__PURE__ */ new Map();
 var refreshing = /* @__PURE__ */ new Set();
 var cacheDir;

package/dist/plugins/manager.js

@@ -6,7 +6,7 @@ import path from "node:path";
 import fs from "node:fs/promises";
 //#region src/plugins/manager.ts
 var META_FILE = "meta.json";
-var DEFAULT_TTL_MS = 10080 * 60 * 1e3;
+var DEFAULT_TTL_MS = 6048e5;
 var DEFAULT_CACHE_DIR = ".sdk-plugins";
 var PluginManager = class {
 	urlPrefix = "/sdk-plugins";

package/dist/src/core/createServer.d.ts

@@ -1,6 +1,14 @@
 import { SSRServer, SSRServerConfig } from '@plitzi/sdk-shared';
-export { createSSRServer } from './server/ssrServer';
+export { createSSRServer } from './server/pageServer';
 export { createMCPServer } from './server/mcpServer';
 export { resolveServices } from './services/resolve';
 export type { ResolvedServices } from './services/resolve';
+/** The general server: mounts whatever the config asks for — SSR, RSC and MCP together, if that is what it
+ *  enables — and is what a deployment reaches for when it serves more than one surface from a single port (the
+ *  package's own standalone harness does exactly that).
+ *
+ *  Prefer the surface-specific factories whenever the surface IS known, so the process states what it serves by
+ *  the name it calls: createSSRServer for pages + RSC, createMCPServer for a dedicated MCP server. An MCP-only
+ *  config is handed to the latter here, since the lean pipeline builds none of the render template, caches or
+ *  plugin manager a page server would carry unused. */
 export declare const createServer: (config: SSRServerConfig) => SSRServer;

package/dist/src/core/server/pageServer.d.ts

@@ -0,0 +1,10 @@
+import { ResolvedServices } from '../services/resolve';
+import { SSRServer, SSRServerConfig } from '@plitzi/sdk-shared';
+/** The page-serving machinery: html/rsc caches, the render template and the plugin manager, driving the page
+ *  pipeline. Which services it mounts is the CALLER's decision — {@link createServer} passes whatever the config
+ *  enables, createSSRServer pins the page surface — so this unit never second-guesses a factory's promise. */
+export declare const createPageServer: (config: SSRServerConfig, services: ResolvedServices) => SSRServer;
+/** The page server: SSR and RSC, and nothing else. MCP is pinned OFF here even when the config asks for it —
+ *  what a factory named after a surface mounts must be readable from its name alone. A deployment that wants
+ *  both surfaces in one process asks {@link createServer} for them; a dedicated MCP server is createMCPServer. */
+export declare const createSSRServer: (config: SSRServerConfig) => SSRServer;

package/dist/src/core/services/registry.d.ts

@@ -1,4 +1,4 @@
 import { ResolvedServices } from './resolve';
 import { BaseContext, SSRContext, Stage } from '../http/types';
-export declare const buildSSRPipeline: (services: ResolvedServices) => Stage<SSRContext>[];
+export declare const buildPagePipeline: (services: ResolvedServices) => Stage<SSRContext>[];
 export declare const buildMCPPipeline: () => Stage<BaseContext>[];

package/dist/src/modules/mcp/catalogs/cssCatalog/border.d.ts

@@ -0,0 +1,4 @@
+import { CssProps } from '../../types';
+export declare const classifyBorderTokens: (value: string) => Record<"width" | "style" | "color", string>;
+export declare const expandBorder: (key: string, value: string, out: CssProps) => void;
+export declare const expandBorderGroup: (suffix: string, value: string, out: CssProps) => void;

package/dist/src/modules/mcp/catalogs/cssCatalog/box.d.ts

@@ -0,0 +1,4 @@
+import { CssProps } from '../../types';
+export declare const expandBox: (key: string, value: string, out: CssProps) => void;
+export declare const expandBorderRadius: (value: string, out: CssProps) => void;
+export declare const expandGap: (value: string, out: CssProps) => void;

package/dist/src/modules/mcp/catalogs/cssCatalog/helpers.d.ts

@@ -0,0 +1,34 @@
+/** Split a shorthand value into whitespace-separated tokens, keeping parenthesized and quoted runs whole. */
+export declare const splitTokens: (value: string) => string[];
+/** Split a value on a top-level separator. Used for the comma-separated layers of transition/animation/background
+ *  and for the `/` of border-radius/grid-template/grid-row. */
+export declare const splitOn: (value: string, separator: "," | "/") => string[];
+/** Split a value on its first top-level `/` — the `a / b` form of border-radius, grid-template, background and
+ *  font. Returns the half after the slash as undefined when there is none, which is what tells those expanders the
+ *  second half was not declared at all. */
+export declare const splitPair: (value: string, separator: "/") => [string, string | undefined];
+export declare const TIME_RE: RegExp;
+export declare const NUMBER_RE: RegExp;
+/** A numeric value with an optional unit or `%` — matches both `12px` and `50%`. */
+export declare const LENGTH_RE: RegExp;
+export declare const QUOTE_RE: RegExp;
+/** Resolve the 1–4 value syntax shared by padding/margin/inset (top/right/bottom/left) and border-radius
+ *  (top-left/top-right/bottom-right/bottom-left): 1 value fills all, 2 pair up, 3 leave the 4th mirroring the 2nd. */
+export declare const expandTo4: (tokens: string[]) => [string, string, string, string];
+export declare const SIDES: readonly ["top", "right", "bottom", "left"];
+export declare const FLEX_DIRECTIONS: Set<string>;
+export declare const FLEX_WRAPS: Set<string>;
+export declare const LIST_STYLE_TYPES: Set<string>;
+export declare const LIST_STYLE_POSITIONS: Set<string>;
+export declare const TEXT_DECORATION_LINES: Set<string>;
+export declare const TEXT_DECORATION_STYLES: Set<string>;
+/** A timing function may also be a function call — cubic-bezier(…) or steps(…). */
+export declare const isTimingFunction: (token: string) => boolean;
+export declare const ANIMATION_DIRECTIONS: Set<string>;
+export declare const ANIMATION_FILL_MODES: Set<string>;
+export declare const ANIMATION_PLAY_STATES: Set<string>;
+export declare const FONT_STYLE_KEYWORDS: Set<string>;
+export declare const FONT_VARIANT_KEYWORDS: Set<string>;
+export declare const FONT_WEIGHT_KEYWORDS: Set<string>;
+export declare const BORDER_STYLES: Set<string>;
+export declare const BORDER_WIDTH_KEYWORDS: Set<string>;