@cmo-so/cli 0.12.8 → 0.12.9

package/dist/cmo.mjs

@@ -14658,6 +14658,54 @@ function replace(blocks, ref, next, synced = {}) {
 function sectionAt(blocks, ref, synced = {}) {
   return pick(locate(blocks), ref, synced);
 }
+function widthValue(width) {
+  const w = String(width ?? "").trim();
+  if (w === "content") return null;
+  if (w === "wide") return "var(--wp--style--global--wide-size)";
+  if (/^\d{2,4}(\.\d+)?(px|rem|em|vw|%)$/.test(w)) return w;
+  throw new Error('width: "content", "wide" or a CSS length such as 1240px.');
+}
+var NARROW_PX = 700;
+var sizePx = (v) => {
+  const m = /^(\d+(?:\.\d+)?)(px|rem|em)$/.exec(v);
+  return m ? Number(m[1]) * (m[2] === "px" ? 1 : 16) : null;
+};
+function setSectionWidth(b, width) {
+  const size = widthValue(width);
+  const before = [];
+  const visit = (x, top) => {
+    let changed = false;
+    for (const c of x.inner) if (visit(c, false)) changed = true;
+    const lay = x.attrs.layout;
+    const constrained = lay?.type === "constrained";
+    const cur = lay?.contentSize;
+    const px = cur ? sizePx(cur) : null;
+    const eligible = constrained && (!cur || cur.includes("--wp--style--global") || px == null || px >= NARROW_PX);
+    if (eligible || top && !lay && (x.name === "core/group" || x.name === "core/cover")) {
+      if ((cur ?? null) !== size) {
+        before.push(cur ?? "content");
+        const next = { ...lay ?? {}, type: "constrained" };
+        if (size) next.contentSize = size;
+        else delete next.contentSize;
+        x.attrs = { ...x.attrs, layout: next };
+        changed = true;
+      }
+    }
+    if (changed) delete x.raw;
+    return changed;
+  };
+  visit(b, true);
+  return { containers: before.length, before };
+}
+function refreshRaw(list3) {
+  let any = false;
+  for (const b of list3) {
+    const inner = refreshRaw(b.inner);
+    if (inner) delete b.raw;
+    if (inner || b.raw == null) any = true;
+  }
+  return any;
+}
 var escRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function applyEdits(b, e) {
   let m = serializeBlock(b);
@@ -15195,6 +15243,15 @@ async function styleGet(site) {
       fonts: (user.settings?.typography?.fontFamilies?.theme ?? []).map((f) => f.slug)
     },
     contrast: contrastReport(Object.fromEntries([...palette.values()].map((c) => [c.slug, c.color]))),
+    layout: {
+      content: user.settings?.layout?.contentSize ?? base.settings?.layout?.contentSize ?? null,
+      wide: user.settings?.layout?.wideSize ?? base.settings?.layout?.wideSize ?? null,
+      padding: {
+        left: user.styles?.spacing?.padding?.left ?? base.styles?.spacing?.padding?.left ?? null,
+        right: user.styles?.spacing?.padding?.right ?? base.styles?.spacing?.padding?.right ?? null
+      }
+    },
+    css: user.styles?.css ?? "",
     _palette: [...palette.values()],
     _fonts: [...fonts.values()],
     _user: user
@@ -15235,6 +15292,17 @@ function contrastReport(colors) {
   });
 }
 async function styleSet(site, change, force = false) {
+  const len = (v, what) => {
+    const t = String(v ?? "").trim();
+    if (!/^(0|\d{1,4}(\.\d+)?(px|rem|em|vw|%)|var\(--wp--preset--spacing--[a-z0-9-]+\)|clamp\([0-9a-z.,%+\-\s()]+\))$/i.test(
+      t
+    ))
+      throw new Error(`${what}: "${t}" isn't a CSS length like 1240px, 2rem or var(--wp--preset--spacing--50).`);
+    return t;
+  };
+  for (const css of [change.css, change.css_append])
+    if (css != null && /<\/?style|<\?|<script|@import\s+url\(\s*['"]?(?!https:)/i.test(css))
+      throw new Error("css: plain CSS only (no <style>, <script>, PHP or non-https imports).");
   const cur = await styleGet(site);
   const palette = cur._palette.map((c) => ({ ...c }));
   for (const [slug, color] of Object.entries(change.colors ?? {})) {
@@ -15259,15 +15327,48 @@ async function styleSet(site, change, force = false) {
     );
   const user = cur._user;
   const settings2 = { ...user.settings ?? {} };
+  const styles = { ...user.styles ?? {} };
   if (change.colors) settings2.color = { ...settings2.color ?? {}, palette: { theme: palette } };
   if (change.fonts)
     settings2.typography = { ...settings2.typography ?? {}, fontFamilies: { theme: fonts } };
+  if (change.layout) {
+    const layout = { ...settings2.layout ?? {} };
+    if (change.layout.content != null) layout.contentSize = len(change.layout.content, "layout.content");
+    if (change.layout.wide != null) layout.wideSize = len(change.layout.wide, "layout.wide");
+    settings2.layout = layout;
+  }
+  if (change.padding) {
+    const spacing = { ...styles.spacing ?? {} };
+    const pad = { ...spacing.padding ?? {} };
+    if (change.padding.left != null) pad.left = len(change.padding.left, "padding.left");
+    if (change.padding.right != null) pad.right = len(change.padding.right, "padding.right");
+    styles.spacing = { ...spacing, padding: pad };
+    settings2.useRootPaddingAwareAlignments = true;
+  }
+  if (change.css != null) styles.css = change.css;
+  if (change.css_append)
+    styles.css = `${String(styles.css ?? "").trimEnd()}
+
+${change.css_append.trim()}
+`.trimStart();
   await call(site, {
     method: "POST",
     path: `/wp/v2/global-styles/${cur.id}`,
-    body: { settings: settings2, styles: user.styles ?? {} }
+    body: { settings: settings2, styles }
   });
+  const changedLayout = change.layout || change.padding;
   return {
+    ...changedLayout ? {
+      layout: {
+        before: cur.layout,
+        after: {
+          content: settings2.layout?.contentSize ?? cur.layout.content,
+          wide: settings2.layout?.wideSize ?? cur.layout.wide,
+          padding: change.padding ? { ...cur.layout.padding, ...change.padding } : cur.layout.padding
+        }
+      }
+    } : {},
+    ...change.css != null || change.css_append ? { css: { before: cur.css.length, after: String(styles.css ?? "").length, before_text: cur.css } } : {},
     colors: Object.fromEntries(
       Object.entries(change.colors ?? {}).map(([k, v]) => [k, { before: cur.colors[k], after: v }])
     ),
@@ -16386,7 +16487,7 @@ var siteTools = [
   }),
   tool({
     name: "wp_style_get",
-    description: "The brand: colours (by name: canvas, panel, soft, ink, muted, olive, accent\u2026) and fonts (display, body), and the text contrast of each colour pair.",
+    description: "The site's look: colours (by name: canvas, panel, soft, ink, muted, olive, accent\u2026), fonts (display, body), layout widths (content, wide) and page padding, the extra CSS, and the text contrast of each colour pair.",
     parameters: { type: "object", properties: {} },
     group: "site",
     need: READ,
@@ -16394,7 +16495,14 @@ var siteTools = [
     gates: ["WP"],
     run: async (ctx) => {
       const s = await styleGet(siteOf(ctx));
-      return { colors: s.colors, fonts: s.fonts, customized: s.customized, contrast: s.contrast };
+      return {
+        colors: s.colors,
+        fonts: s.fonts,
+        layout: s.layout,
+        css: s.css,
+        customized: s.customized,
+        contrast: s.contrast
+      };
     }
   })
 ];
@@ -16836,12 +16944,15 @@ var sectionTools = [
   }),
   tool({
     name: "wp_section_update",
-    description: "Change one section. edits: change text, links or pictures inside it and keep its design (works on any section, the homepage too). slots: write the section again from new content (generated types; give the complete content). faq: add, remove (1-based numbers) or replace questions.",
+    description: 'Change one section. width: line its content up with the header and footer ("wide") or another width, one section or all. edits: change text, links or pictures inside it and keep its design (works on any section, the homepage too). slots: write the section again from new content (generated types; give the complete content). faq: add, remove (1-based numbers) or replace questions.',
     parameters: {
       type: "object",
       properties: {
         page: PAGE,
-        section: str2("Section id from wp_page_get (s2, m4) or its type (faq)."),
+        section: str2('Section id from wp_page_get (s2, m4) or its type (faq); "all" with width only.'),
+        width: str2(
+          `The section's inner width: "content" (the site's content width), "wide" (the site's wide width, as the header and footer) or a CSS length (1240px). Changes the section and its containers wider than 700px; with section "all", every section on the page.`
+        ),
         edits: EDITS,
         slots: obj("Complete new content for the section (same type unless type is given)."),
         markup: str2(
@@ -16870,6 +16981,19 @@ var sectionTools = [
     ),
     run: (ctx, a) => changePage(ctx, a, (blocks, kit) => {
       const ref = String(a.section);
+      if (a.width != null && a.width !== "") {
+        const targets = ref === "all" ? locate(blocks) : [sectionAt(blocks, ref, kit.syncedTitles)];
+        const changed = {};
+        for (const t of targets) {
+          if (t.block.name === "core/block") continue;
+          const r = setSectionWidth(t.block, a.width);
+          if (r.containers) changed[t.id] = r;
+        }
+        refreshRaw(blocks);
+        if (!Object.keys(changed).length) throw new Error("Those sections already have that width.");
+        return { blocks, note: { width: String(a.width), sections: changed } };
+      }
+      if (ref === "all") throw new Error('section "all" works with width only.');
       const target = sectionAt(blocks, ref, kit.syncedTitles);
       const type = classify(target.block, target.region, kit.syncedTitles);
       let next;
@@ -17775,23 +17899,41 @@ var elementTools = [
   }),
   tool({
     name: "wp_style_set",
-    description: "Change brand colours (by name, hex) and fonts (by name, CSS font-family) for the whole site. Refuses colours that would make text hard to read (contrast under 4.5:1).",
+    description: "Change the whole site's look: brand colours (by name, hex), fonts (by name, CSS font-family), layout widths (content: the width sections and text use; wide: the header, footer and wide blocks), the left and right page padding, and extra CSS. Saved in the site's Global Styles (works on any block theme; returns before and after). Refuses colours that would make text hard to read (contrast under 4.5:1). One section's width: wp_section_update width.",
     parameters: {
       type: "object",
       properties: {
         colors: obj('e.g. { "olive": "#4F5B48", "accent": "#A8834F" }.'),
-        fonts: obj('e.g. { "display": "\\"Playfair Display\\", Georgia, serif" }.')
+        fonts: obj('e.g. { "display": "\\"Playfair Display\\", Georgia, serif" }.'),
+        layout: obj('Widths, e.g. { "content": "1240px", "wide": "1240px" }.', {
+          content: str2("Content width (CSS length)."),
+          wide: str2("Wide width (CSS length).")
+        }),
+        padding: obj('Left and right page padding, e.g. { "left": "24px", "right": "24px" }.', {
+          left: str2(""),
+          right: str2("")
+        }),
+        css: str2("Replace the site's extra CSS (Global Styles \u2192 Additional CSS); plain CSS only."),
+        css_append: str2("Add this CSS after the site's extra CSS.")
       }
     },
     group: "site",
     need: WRITE,
     risk: "W3",
     gates: [...GATES],
-    confirm: (_a3, lang) => say(lang, "Change the website's brand colours or fonts (every page).", "\u4FEE\u6539\u7DB2\u7AD9\u7684\u54C1\u724C\u984F\u8272\u6216\u5B57\u9AD4\uFF08\u6240\u6709\u9801\u9762\uFF09\u3002"),
-    run: async (ctx, a) => {
-      const r = await styleSet(siteOf(ctx), { colors: a.colors, fonts: a.fonts });
-      return r;
-    }
+    confirm: (_a3, lang) => say(
+      lang,
+      "Change the website's look for every page (colours, fonts, widths, padding or extra CSS); the result shows before and after.",
+      "\u4FEE\u6539\u7DB2\u7AD9\u6240\u6709\u9801\u9762\u7684\u5916\u89C0\uFF08\u984F\u8272\u3001\u5B57\u9AD4\u3001\u5BEC\u5EA6\u3001\u908A\u8DDD\u6216\u984D\u5916 CSS\uFF09\uFF1B\u7D50\u679C\u6703\u5217\u51FA\u4FEE\u6539\u524D\u5F8C\u3002"
+    ),
+    run: async (ctx, a) => styleSet(siteOf(ctx), {
+      colors: a.colors,
+      fonts: a.fonts,
+      layout: a.layout,
+      padding: a.padding,
+      css: typeof a.css === "string" ? a.css : void 0,
+      css_append: typeof a.css_append === "string" ? a.css_append : void 0
+    })
   })
 ];
 function checkMarkup(markup, what) {
@@ -21766,7 +21908,7 @@ var program = new Command();
 // package.json
 var package_default = {
   name: "@cmo-so/cli",
-  version: "0.12.8",
+  version: "0.12.9",
   description: "CMO.so on the command line: your websites, ideas, blog posts, LinkedIn queue and results, plus a local MCP server for Claude Desktop, Cursor and other MCP clients.",
   type: "module",
   license: "MIT",
@@ -32813,6 +32955,16 @@ function registerWp(program3) {
       o.preview ? { tool: "wp_section_update", args } : args
     );
   });
+  section.command("width <page> <section> <width>").description(
+    'line sections up: width "wide" (as the header and footer), "content" or 1240px; section "all" = every section'
+  ).option("--preview", "show the result, save nothing").action(async (p, s, w, o, c) => {
+    const args = { page: p, section: s, width: w };
+    await run(
+      g(c),
+      o.preview ? "wp_preview" : "wp_section_update",
+      o.preview ? { tool: "wp_section_update", args } : args
+    );
+  });
   pos(section.command("move <page> <section>").description("move a section")).action(
     (p, s, o, c) => run(g(c), "wp_section_move", { page: p, section: s, ...posArgs(o) })
   );
@@ -32878,12 +33030,16 @@ ${table(r.issues, ["severity", "code", "path", "detail"])}`;
       await run(g(c), part === "header" ? "wp_header_set" : "wp_footer_set", args);
     });
   }
-  const style = wp.command("style").description("brand colours and fonts");
+  const style = wp.command("style").description("brand colours, fonts, layout widths, page padding and extra CSS");
   style.command("get", { isDefault: true }).action((_o, c) => run(g(c), "wp_style_get", {}));
-  style.command("set [colors...]").description(`e.g. cmo wp style set olive=#4F5B48 --font 'display="Playfair Display", serif'`).option("--font <slug=family...>").action(
-    (colors, o, c) => run(g(c), "wp_style_set", {
+  style.command("set [colors...]").description(`e.g. cmo wp style set olive=#4F5B48 --font 'display="Playfair Display", serif'`).option("--font <slug=family...>").option("--content <width>", "content width, e.g. 1240px").option("--wide <width>", "wide width (header, footer, wide blocks)").option("--padding <length>", "left and right page padding, e.g. 24px").option("--css-file <file>", "replace the site's extra CSS with this file").option("--css-append <file>", "add this CSS file after the site's extra CSS").action(
+    async (colors, o, c) => run(g(c), "wp_style_set", {
       colors: colors.length ? Object.fromEntries(pairs(colors)) : void 0,
-      fonts: o.font ? Object.fromEntries(pairs(o.font)) : void 0
+      fonts: o.font ? Object.fromEntries(pairs(o.font)) : void 0,
+      layout: o.content || o.wide ? { content: o.content, wide: o.wide } : void 0,
+      padding: o.padding ? { left: o.padding, right: o.padding } : void 0,
+      css: o.cssFile ? await readFile2(o.cssFile, "utf8") : void 0,
+      css_append: o.cssAppend ? await readFile2(o.cssAppend, "utf8") : void 0
     })
   );
   const media = wp.command("media").description("pictures in the media library");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cmo-so/cli",
-	"version": "0.12.8",
+	"version": "0.12.9",
 	"description": "CMO.so on the command line: your websites, ideas, blog posts, LinkedIn queue and results, plus a local MCP server for Claude Desktop, Cursor and other MCP clients.",
 	"type": "module",
 	"license": "MIT",