@ikas/code-components-mcp 1.4.0-beta.210 → 1.4.0-beta.213

package/dist/index.js

@@ -4698,7 +4698,7 @@ const textStyleFontParams = {
     text_overflow: z
         .string()
         .optional()
-        .describe("text-overflow: clip | ellipsis"),
+        .describe("text-overflow: clip | ellipsis — ellipsis only truncates with white_space: nowrap and overflow: hidden in the component CSS"),
     white_space: z
         .string()
         .optional()
@@ -4736,11 +4736,45 @@ function textStyleFontArgs(input) {
     // An empty string is passed through: with breakpoint_id it removes that override.
     return Object.entries(map).flatMap(([flag, value]) => value != null ? [flag, value] : []);
 }
+// Per-breakpoint text-style overrides in one call. `.strict()` so a non-responsive property
+// (e.g. text_transform) is rejected instead of silently dropped.
+const textStyleBreakpointsParam = z
+    .array(z
+    .object({
+    breakpoint_id: z
+        .string()
+        .describe("Existing theme breakpoint id from `list_theme_globals`."),
+    font_size: z.string().optional(),
+    font_weight: z
+        .string()
+        .optional()
+        .describe('Plain number, e.g. "500" (the style\'s italic is kept).'),
+    line_height: z.string().optional(),
+    letter_spacing: z.string().optional(),
+})
+    .strict())
+    .optional()
+    .describe("RESPONSIVE overrides for several breakpoints in ONE call: [{ breakpoint_id, font_size?, font_weight?, " +
+    "line_height?, letter_spacing? }]. Only these 4 properties, each needs a desktop value (set in this same " +
+    'call or earlier), "" removes an override. Validated as a whole: one invalid entry rejects the call and ' +
+    "nothing is written. Breakpoints are not created here.");
+function textStyleBreakpointsArgs(breakpoints) {
+    if (!breakpoints)
+        return [];
+    const json = breakpoints.map((bp) => ({
+        breakpointId: bp.breakpoint_id,
+        fontSize: bp.font_size,
+        fontWeight: bp.font_weight,
+        lineHeight: bp.line_height,
+        letterSpacing: bp.letter_spacing,
+    }));
+    return ["--breakpoints", JSON.stringify(json)];
+}
 // Tool: create_theme_global
 server.tool("create_theme_global", "Create a theme global setting in the connected editor. `kind` selects what to create:\n" +
     '- globalVariable: requires display_name + type (TEXT|RICH_TEXT|IMAGE|COLOR|NUMBER|BOOLEAN|BORDER|SHADOW|ENUM); value optional. Pass `value` as a REAL JSON value, never a stringified JSON. Value shapes — TEXT/COLOR: string; RICH_TEXT: HTML string; NUMBER: number; BOOLEAN: real JSON boolean true/false (NOT the string "true"); IMAGE: an image REFERENCE object { id: "theme-images/<uuid>" } (NOT { url }) — the id MUST come from a REAL upload: call `upload_image` (file_path or image_url) and use the id it returns, or reuse an id already listed by `list_theme_globals`. NEVER invent an id — it is stored as given and renders as a broken image, so if you have no image, omit `value` and let the merchant set it from the "Theme Settings" panel; BORDER: { width: { value, unit }, style, color } (width.value must be a number); SHADOW: { x, y, blur, spread, color, position: "outside"|"inside" }; ENUM: a setting that selects ONE option of a PROJECT enum — pass `enum_type_id` (an enum id from `list_theme_globals` → `enumTypes[]`; the same enum an ENUM prop declares as `enumTypeId`; built-in @ikas/* enums are REJECTED) and `value` = one of that enum\'s option VALUES (the strings in its `options`, e.g. "bottom"), NOT a label; omit `value` to leave it unset. Once created, an ENUM prop of the SAME enum can be bound to it with `update_section_prop` `bind_global`, and in component code `themeValue("_<id>")` from `./global-types` narrows to the enum\'s union type. For object types (IMAGE/BORDER/SHADOW) pass an actual JSON object, not a JSON-encoded string. Every value is validated server-side and a wrong shape is REJECTED, not silently stored.\n' +
     '- color: requires name + value — a CONCRETE color (hex e.g. "#ff0000", rgb()/hsl() or a CSS color name). A color token cannot alias another color, so a "var(...)" reference is REJECTED here (to reuse another theme color, reference its cssVar in component code, or in a colorScheme slot). TIP: a "/" in the `name` GROUPS the color in the editor UI (e.g. "Brand/Primary", "Brand/Accent" appear under a "Brand" group); use this to organize related colors. To CHANGE an existing color later, use `update_theme_color` (edits in place, keeps the cssVar stable) — do NOT delete+recreate.\n' +
-    '- typography: requires name + at least one text-style property. These are exactly the fields the editor\'s "Update Text Style" modal exposes — nothing else (in particular there is NO color or text-align on a text style). VALUE FORMATS (all validated; a bad value is rejected with the offending value and the allowed set): font_weight is one of 100,200,300,400,500,600,700,800,900 (append \'i\' for italic, e.g. "600i") AND must be a weight the chosen font actually ships (many fonts provide only a subset, e.g. "Modak" only ships 400) — if unavailable the call fails and lists the supported weights, so when unsure use 400; stored as a numeric weight + a font-style entry; font_size is a number WITH a unit (e.g. "16px", "1.2rem", "80%"); line_height is "normal", a unitless number (e.g. "1.5") or a length; letter_spacing is "normal" or a length (e.g. "0.02em", "0.5px"); font_family is a real font the editor offers (a Google Fonts name with EXACT casing, e.g. "Inter") — an unknown/invented family is rejected; text_decoration is none|underline|line-through; text_transform is none|uppercase|lowercase|capitalize; text_overflow is clip|ellipsis; white_space is normal|pre|pre-wrap|pre-line|wrap|nowrap|collapse; line_break is auto|loose|normal|strict|anywhere; word_break is normal|break-all|keep-all; text_wrap_style is auto|balance|pretty|stable. TIP: a "/" in the `name` GROUPS the text style in the editor UI (e.g. "Heading/H1", "Heading/H2" appear under a "Heading" group); use this to organize related styles. To CHANGE an existing text style later, use `update_text_style` (edits in place, keeps the `className` stable) — do NOT delete+recreate, which changes the id/className.\n' +
+    '- typography: requires name + at least one text-style property. These are exactly the fields the editor\'s "Update Text Style" modal exposes — nothing else (in particular there is NO color or text-align on a text style). VALUE FORMATS (all validated; a bad value is rejected with the offending value and the allowed set): font_weight is one of 100,200,300,400,500,600,700,800,900 (append \'i\' for italic, e.g. "600i") AND must be a weight the chosen font actually ships (many fonts provide only a subset, e.g. "Modak" only ships 400) — if unavailable the call fails and lists the supported weights, so when unsure use 400; stored as a numeric weight + a font-style entry; font_size is a number WITH a unit (e.g. "16px", "1.2rem", "80%"); line_height is "normal", a unitless number (e.g. "1.5") or a length; letter_spacing is "normal" or a length (e.g. "0.02em", "0.5px"); font_family is a real font the editor offers (a Google Fonts name with EXACT casing, e.g. "Inter") — an unknown/invented family is rejected; text_decoration is none|underline|line-through; text_transform is none|uppercase|lowercase|capitalize; text_overflow is clip|ellipsis; white_space is normal|pre|pre-wrap|pre-line|wrap|nowrap|collapse; line_break is auto|loose|normal|strict|anywhere; word_break is normal|break-all|keep-all; text_wrap_style is auto|balance|pretty|stable. TIP: a "/" in the `name` GROUPS the text style in the editor UI (e.g. "Heading/H1", "Heading/H2" appear under a "Heading" group); use this to organize related styles. Optional `breakpoints` sets responsive overrides in the same call (see the param). To CHANGE an existing text style later, use `update_text_style` (edits in place, keeps the `className` stable) — do NOT delete+recreate, which changes the id/className.\n' +
     "- breakpoint: requires name + width (a positive INTEGER, in px — no decimals). To CHANGE an existing breakpoint later, use `update_theme_breakpoint` (edits in place, keeps the id).\n" +
     "- keyframe: requires name + points (array of { point, styles? }) where each style is { property, value } using a CSS property name (opacity, transform, filter, background, color, …); keyframe_type defaults to \"keyframe\". Optional `settings` = animation-level config as { property, value } entries, TYPE-DEPENDENT: for keyframe — animation-duration, animation-iteration-count, animation-play-state, animation-delay, animation-timing-function, animation-direction, animation-fill-mode, animation-timeline, animation-range, transform-origin, backface-visibility; for transition — transition, backface-visibility. Setting these means the editor drives the animation timing (you don't have to hand-write `animation:` CSS). Use the keyframe's `ref` as the CSS animation-name. For a TRANSITION keyframe, put the target/hover-state styles on the 100% point (points[1].styles) — the 0% point is ignored (the start state is the element's own normal state). To CHANGE an existing keyframe later, use `update_theme_keyframe` (edits in place, keeps the `ref` stable) — do NOT delete+recreate, which changes the ref and breaks references.\n" +
     '- colorScheme: requires name + colors (array of { slotId? | newSlotName?, value }) — each color targets ONE color SLOT, EITHER by `slotId` (an EXISTING slot\'s id, from `list_theme_globals` → colorSchemes.schemes[].id or a `colorsByScheme` key — the id-keyed path) OR by `newSlotName` (a name to CREATE-or-reuse a slot; write-only, for the standard vocabulary and brand-new slots). Pass EXACTLY ONE of the two per entry. `value` is EITHER a literal color (hex/rgb/hsl or a CSS color name, e.g. "#0b1120") OR a REFERENCE to an existing theme color, passed as that color\'s cssVar from `list_theme_globals` (e.g. "var(--<colorId>)"). A `var(--id)` value is stored as a linked reference (editing the global color updates the scheme too and the dependency is tracked) — do NOT inline a hex you copied from a global color; pass its cssVar. SLOT IDENTITY: `colorSchemes.schemes` lists each slot as `{id, name}`. To set a color on an EXISTING slot, find it there by name and pass its `slotId` (names are NOT unique — two design assets can each have a "Background" — so when ambiguous disambiguate via the scheme\'s existing `colorsByScheme` keys); use `newSlotName` only to add a slot the scheme does not have yet. When creating slots use the theme\'s STANDARD slot names so components resolve them: "Background", "Heading", "Text", "Link", "HoverLink", "Border", and per button "PrimaryButton/Background", "PrimaryButton/Text", "PrimaryButton/Border", "PrimaryButton/HoverBackground", "PrimaryButton/HoverText", "PrimaryButton/HoverBorder" (and the same six under "SecondaryButton/"); a "/" groups the slot in the editor UI. A scheme should normally define EVERY slot it uses; omitted slots fall back to the default scheme\'s color. A mistaken slot can be removed with `delete_theme_global` kind `colorSchemeSlot` (by slot id), or renamed in place (id stays stable) with `rename_theme_color_scheme_slot`. To CHANGE an existing scheme later, use `update_theme_color_scheme` (edits in place, keeps the className stable; merges colors by slot, and can set/clear its default flag via `is_default`).\n' +
@@ -4773,6 +4807,7 @@ server.tool("create_theme_global", "Create a theme global setting in the connect
         .optional()
         .describe("globalVariable of type ENUM only: id of the project enum the setting selects from (from `list_theme_globals` → `enumTypes[]`). Required for ENUM, invalid for other types."),
     ...textStyleFontParams,
+    breakpoints: textStyleBreakpointsParam.describe("typography only: " + textStyleBreakpointsParam.description),
     width: z
         .number()
         .int()
@@ -4828,6 +4863,7 @@ server.tool("create_theme_global", "Create a theme global setting in the connect
                 "--name",
                 String(input.name ?? ""),
                 ...textStyleFontArgs(input),
+                ...textStyleBreakpointsArgs(input.breakpoints),
                 ...p,
             ];
             break;
@@ -4985,7 +5021,7 @@ server.tool("update_text_style", "Update an existing theme typography token (tex
     'or a length; letter_spacing is "normal" or a length (e.g. "0.02em"); font_family is a real font the editor ' +
     'offers (a Google Fonts name with EXACT casing, e.g. "Inter") — an unknown/invented family is rejected; ' +
     "text_decoration is none|underline|" +
-    "line-through; text_transform is none|uppercase|lowercase|capitalize; text_overflow is clip|ellipsis; white_space " +
+    "line-through; text_transform is none|uppercase|lowercase|capitalize; text_overflow is clip|ellipsis (ellipsis also needs white_space: nowrap here and overflow: hidden in the component CSS); white_space " +
     "is normal|pre|pre-wrap|pre-line|wrap|nowrap|collapse; line_break is auto|loose|normal|strict|anywhere; word_break " +
     "is normal|break-all|keep-all; text_wrap_style is auto|balance|pretty|stable. Set `is_default: true` to make " +
     'this text style the theme\'s default/global style (the editor\'s right-click "Make Default Style" / "Global ' +
@@ -4993,11 +5029,12 @@ server.tool("update_text_style", "Update an existing theme typography token (tex
     "current default state is readable from `list_theme_globals` (each typography entry's `isDefault`). " +
     "RESPONSIVE: pass `breakpoint_id` (an existing breakpoint id from `list_theme_globals`) to set that breakpoint's " +
     "overrides instead of the desktop values. Then ONLY font_size, font_weight, line_height and letter_spacing are " +
-    "allowed, each needs a desktop value on the style first, font_weight is a plain number (italic is shared by all " +
-    'breakpoints) and an empty string ("") removes that override so the value is inherited again. Overrides cascade ' +
-    "desktop-first (a narrower breakpoint inherits from wider ones); `list_theme_globals` returns them per typography " +
+    "allowed, each needs a desktop value on the style first, font_weight is a plain number (the style's italic is kept — italic is " +
+    'shared by all breakpoints) and an empty string ("") removes that override so the value is inherited again. Overrides cascade ' +
+    "desktop-first and chained: a property a breakpoint does not override comes from the nearest WIDER breakpoint that overrides it, else desktop; `list_theme_globals` returns them per typography " +
     "entry under `breakpoints` (`overrides` = own values, `resolved` = effective values). Breakpoints are NOT created " +
-    "by this tool, and `breakpoint_id` cannot be combined with `name` or `is_default`. Requires " +
+    "by this tool. To write SEVERAL breakpoints (optionally together with desktop values) in one call, use " +
+    "`breakpoints` instead of `breakpoint_id`. Requires " +
     "`ikas theme dev` running with the editor connected.", {
     project_root: z
         .string()
@@ -5019,13 +5056,14 @@ server.tool("update_text_style", "Update an existing theme typography token (tex
         .string()
         .optional()
         .describe("Existing theme breakpoint id from `list_theme_globals`. When set, the font params are written as that " +
-        "breakpoint's overrides (font_size/font_weight/line_height/letter_spacing only; \"\" removes one)."),
+        'breakpoint\'s overrides (font_size/font_weight/line_height/letter_spacing only; "" removes one).'),
+    breakpoints: textStyleBreakpointsParam,
     port: z
         .number()
         .optional()
         .describe("Dev server WebSocket port (default 5201)."),
 }, async (input) => {
-    const { project_root, id, name, is_default, breakpoint_id, port } = input;
+    const { project_root, id, name, is_default, breakpoint_id, breakpoints, port, } = input;
     const args = [
         "update-text-style",
         "--id",
@@ -5033,6 +5071,7 @@ server.tool("update_text_style", "Update an existing theme typography token (tex
         ...(breakpoint_id !== undefined ? ["--breakpoint", breakpoint_id] : []),
         ...(name !== undefined ? ["--name", name] : []),
         ...textStyleFontArgs(input),
+        ...textStyleBreakpointsArgs(breakpoints),
         ...(is_default === true
             ? ["--default"]
             : is_default === false