@schalkneethling/miyagi-core 4.6.2 → 4.8.0

package/api/index.js

@@ -17,6 +17,8 @@ import {
   validateComponentHtml as validateComponentHtmlImpl,
 } from "../lib/validator/html.js";
 import { generateMarkdownReport } from "../lib/validator/html-report.js";
+import { runPerformance } from "../lib/performance/index.js";
+import { generatePerformanceReport } from "../lib/performance/report.js";
 
 /**
  * @param {object} obj
@@ -327,6 +329,39 @@ export const validateHtml = async (options = {}) => {
   };
 };
 
+/**
+ * Run the performance-budget check programmatically.
+ * @param {object} [options]
+ * @param {boolean} [options.html] - include post-build HTML pages
+ * @param {string} [options.buildFolder] - required when html is true
+ * @param {"raw"|"gzip"|"brotli"} [options.compression] - override config compression
+ * @returns {Promise<object>}
+ */
+export const getPerformance = async (options = {}) => {
+  global.app = await init("api");
+
+  if (options.compression) {
+    global.config.performance = {
+      ...(global.config.performance || {}),
+      compression: options.compression,
+    };
+  }
+
+  const result = runPerformance({
+    config: global.config,
+    html: Boolean(options.html),
+    buildFolder: options.buildFolder,
+  });
+
+  return {
+    success: result.summary.exceed === 0,
+    data: {
+      result,
+      report: generatePerformanceReport(result),
+    },
+  };
+};
+
 /**
  * @param {object} obj
  * @param {string|null} obj.component

package/dist/css/iframe.css

@@ -4,4 +4,4 @@
     --json-tree-js-container-border-color
   );--json-tree-js-button-text-color:var(--json-tree-js-color-white);--json-tree-js-button-background-color-hover:var(
     --json-tree-js-container-border-color
-  );--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:0.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:0.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:1em;--json-tree-js-transition:all 0.3s}div.json-tree-js{background-color:var(--color-Code-background);border:.0625rem solid var(--color-Outline);box-sizing:border-box;color:var(--json-tree-js-color-white);display:inline-block;font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);line-height:1.5;margin:0!important;padding:var(--json-tree-js-spacing);width:100%}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *,div.json-tree-js :after,div.json-tree-js :before{box-sizing:border-box}}@layer miyagi{div.json-tree-js :is(.down-arrow,.right-arrow,.no-arrow){appearance:none;background:none;border:none;display:inline-flex;font:inherit;height:1.5em;padding:0;width:1.5em}div.json-tree-js .no-arrow{pointer-events:none;visibility:hidden}div.json-tree-js :is(.down-arrow,.right-arrow){align-items:center;cursor:pointer;justify-content:center;transform:translateY(-.125em)}div.json-tree-js :is(.down-arrow,.right-arrow):after{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:inline-block;flex:0 0 var(--toggle-width);font-size:.4em;height:var(--toggle-height)}div.json-tree-js :is(.down-arrow,.right-arrow):hover{opacity:.7}div.json-tree-js .down-arrow:after{transform:translateY(-25%) rotate(135deg)}div.json-tree-js .right-arrow:after{transform:translateX(-25%) rotate(45deg)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.controls,div.json-tree-js div.title-bar div.title{display:none}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight);text-align:left!important}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing)*2);margin-top:calc(var(--json-tree-js-spacing)/2);text-align:left!important}div.json-tree-js div.object-type-contents div.object-type-value{margin-bottom:calc(var(--json-tree-js-spacing)/2);margin-top:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing)/2);margin-right:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.decimal,div.json-tree-js div.object-type-contents div.object-type-value span.function,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.unknown{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.decimal:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.unknown:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.decimal{color:var(--json-tree-js-color-decimal)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{color:var(--json-tree-js-color-array);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.object{color:var(--json-tree-js-color-object);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.unknown{color:var(--json-tree-js-color-unknown);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-thumb,.custom-scroll-bars::-webkit-scrollbar-track{box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}}@layer miyagi{.Colors{display:grid;gap:3em;grid-template-columns:repeat(auto-fill,minmax(14em,1fr))}.Colors-button{--size:3em;display:flex;flex-wrap:wrap}.Colors-button:after,.Colors-button:before{display:block}.Colors--all .Colors-button:before{margin-inline-end:10px;width:var(--size)}.Colors--all .Colors-button:before,.Colors--decoration .Colors-button:before{background:var(--color);border:1px solid var(--backdrop,transparent);content:"";height:var(--size);order:-1}.Colors--decoration .Colors-button:before{width:100%}.Colors--all .Colors-button:after,.Colors--typo .Colors-button:after{color:var(--color);font-size:var(--size);font-weight:700;order:-1;-webkit-text-stroke:1px var(--backdrop,transparent);text-stroke:1px var(--backdrop,transparent)}.Colors--all .Colors-button:after{content:"Aa"}.Colors--typo .Colors-button:after{content:"AaBbCc"}.Colors-prop,.Colors-value{flex:1 0 100%;margin:10px 0 0}.Fonts-item:not(:first-child){margin-top:3em}.Fonts-button{color:inherit}.Fonts-button:before{content:"The quick brown fox jumps over the lazy dog";font-family:var(--font-family);font-feature-settings:var(--font-feature-settings);font-kerning:var(--font-kerning);font-size:var(--font-size);font-size-adjust:var(--font-size-adjust);font-stretch:var(--font-stretch);font-style:var(--font-style);font-variant:var(--font-variant);font-variant-caps:var(--font-variant-caps);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);text-shadow:var(--text-shadow);text-transform:var(--text-transform)}.Fonts-details{display:flex;list-style:none;padding:0}.Fonts-details>li:not(:last-child){border-inline-end:.0625rem solid currentcolor;margin-inline-end:.5em;padding-inline-end:.5em}.Spacings{align-items:flex-start;display:flex;flex-direction:column}.Spacings-item:not(:first-child){margin-top:3em}.Spacings-button{color:inherit}.Spacings-button:before{background:currentcolor;content:"";display:block;height:var(--spacing);width:var(--spacing)}.CustomPropsGroup{list-style:none;margin:3em 0;padding:0}.CustomProp{border:.0625rem solid transparent}.CustomProp,.CustomProp[aria-selected=true]{position:relative}.CustomProp-prop{display:block;margin:10px 0 0;word-break:break-all}.CustomProp-button{appearance:none;background:none;border:none;font:inherit;padding:0;text-align:start;width:fit-content}.CustomProp-button:focus{outline:none}.CustomProp-button:not([aria-expanded=true]):focus .CustomProp-prop,.CustomProp-button:not([aria-expanded=true]):hover .CustomProp-prop{text-decoration:underline}.CustomProp-details{background:var(--color-Tooltip-background);bottom:calc(100% + 15px);box-shadow:0 4px 10px rgba(0,0,0,.1);box-sizing:border-box;display:none;font-size:14px;gap:.5rem 1rem;grid-template-columns:fit-content(50%) 1fr;inset-inline-start:0;line-height:1.5;margin:0;outline:.0625rem solid var(--color-Tooltip-outline);padding:15px;position:absolute;white-space:nowrap;z-index:1}}@layer miyagi{}@layer miyagi{}@layer miyagi{@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.CustomProp-button:hover+.CustomProp-details,.CustomProp-details:not([hidden]){animation:fadeIn .15s ease;display:grid}.CustomProp-details:after,.CustomProp-details:before{border:10px solid transparent;content:"";display:block;height:0;inset-inline-start:15px;position:absolute;width:0}.CustomProp-details:before{border-top-color:var(--color-Tooltip-outline);top:100%}.CustomProp-details:after{border-top-color:var(--color-Tooltip-background);top:calc(100% - 2px)}.CustomProp-detailsProperty{font-weight:600}.CustomProp-detailsValue{margin:0}}html{--iframe-spacing:clamp(0.75rem,4vi,2.5rem);height:100%}body{background:var(--color-Iframe-background);color:var(--color-Iframe-text);font-family:var(--font-family);margin:0;min-height:100%}.Wrapper{box-sizing:border-box;padding:var(--iframe-spacing);width:100%}a{color:var(--color-Iframe-link);text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:.25em;outline:3px solid currentcolor;outline-offset:2px}code[class*=language-],pre[class*=language-]{border-radius:0;box-shadow:none;text-shadow:none}.Code code,.Documentation code,:not(pre)>code[class*=language-]{font-size-adjust:.525;text-shadow:none}.Code code,.Documentation,.ErrorMessage,.Information,:not(pre)>code[class*=language-]{line-height:3.125ex}.Code code,.Documentation code,.Information code,:not(pre)>code[class*=language-]{font-family:Menlo,Monaco,monospace}.Documentation h1{font-size:2.4em;font-weight:700;line-height:1;text-transform:capitalize}.Documentation>*+*{margin-top:3.125ex}.Documentation i{font-style:italic}.Documentation table{border-spacing:0}.Documentation th{border-block-end:.0625rem solid currentcolor;text-align:left}.Documentation :is(th,td){padding:.25em .5em}.Documentation tr:not(:last-child) td{border-block-end:.0625rem solid var(--color-Outline)}.Information-val{margin-inline-start:0}.Component-variationHeader{display:flex;font-size:14px;gap:16px;inset-inline-end:40px;line-height:1;position:absolute;top:13px}.Documentation>:first-child{margin-top:0}.Documentation p{max-width:64ch}.SectionTitle{align-items:center;display:flex;font-size:1.6em;margin:2em 0 1em;scroll-margin-top:1.5em}.SectionTitle:after{background:var(--color-Outline);content:"";flex:1;height:.0625rem;margin-inline-start:20px}.Information-wrapper+.Information-wrapper{margin-top:30px}.Information-attr{color:var(--color-Iframe-text-secondary);font-family:var(--font-family);font-size:.875em;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Information-attr:not(:first-child){margin-top:1em}.Documentation code,.Information code{font-weight:600}.Status:before{display:inline-block;margin-inline-end:.5em}.Status--valid{color:var(--color-Positive)}.Status--valid:before{content:"✓"}.Status--invalid{color:var(--color-Negative)}.Status--invalid:before{content:"✗"}.Error{align-items:center;display:flex;height:100%;justify-content:center;margin:0}.Error,.ErrorMessage{color:var(--color-Negative)}.ErrorMessage{margin:1.5em 0}.Iframe-newTabLink{align-items:center;display:flex;font-weight:400}.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E");content:"";display:block;height:1em;margin-inline-end:.5em;width:1em}.Code,:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--color-Code-background)}:not(pre)>code[class*=language-],pre[class*=language-]{border-color:var(--color-Outline)}.Code,:not(pre)>code[class*=language-]{border:.0625rem solid var(--color-Outline);padding:calc(var(--iframe-spacing)/2)}.Code,pre[class*=language-]{font-size:.875em}.Tabs-tab summary{cursor:default;list-style-type:none;padding-block:10px;padding-inline-start:16px;position:relative}.Tabs-tab summary:before{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:block;font-size:.4em;height:var(--toggle-height);inset-inline-start:.25rem;position:absolute;top:50%;transition:var(--toggle-transition);width:var(--toggle-width)}.Tabs-tab summary::-webkit-details-marker{display:none}.Tabs-tab:not([open]) summary:before{transform:var(--toggle-transition-closed)}.Tabs-tab[open] summary:before{transform:var(--toggle-transition-opened)}.Component:not(:last-child){margin-bottom:calc(var(--iframe-spacing)*2)}.Component-iframeWrapper{height:calc(100vh - var(--iframe-spacing)*2.5);width:100%}.Component-iframeWrapper:not(.has-fixedHeight){outline:.0625rem solid var(--color-Outline);resize:both}.Component-iframe{height:100%;width:100%}.Component-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:0 0 20px}.Component-headMeta{align-items:center;display:flex;gap:16px}.Component-mockValidation{appearance:none;background:none;border:none;color:var(--color-Iframe-link);cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:1;margin:0;padding:0;text-decoration:underline}.Component-mockData{background:light-dark(#f2f2f2,#1f1f1f);border:none;box-sizing:border-box;height:calc(100vb - var(--iframe-spacing)*2);max-width:70ch;overscroll-behavior:contain;padding:var(--iframe-spacing);width:calc(100vi - var(--iframe-spacing)*2)}.Component-mockData::backdrop{background:light-dark(hsla(0,0%,100%,.8),rgba(0,0,0,.8))}.Component-mockData:not([open]){display:none}.Component-mockDataHeading{margin-block:0 1em}.Component-closeMockData{appearance:none;background:none;border:0;color:var(--color-Iframe-link);cursor:pointer;inset-block-start:1rem;inset-inline-end:1rem;line-height:1;margin:0;padding:0;position:absolute;text-decoration:underline}.Component-closeMockData,.Component-file{font-family:var(--font-family);font-size:.875em}.Component-file{align-items:center;color:var(--color-Iframe-text-secondary);display:inline-flex;flex-wrap:wrap;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Component-file:active,.Component-file:focus,.Component-file:hover{text-decoration:underline}.Component-fileFolders{color:var(--color-Iframe-text-tertiary)}.ComponentView{border:.0625rem solid var(--color-Outline);box-sizing:border-box;height:calc(100vh - var(--iframe-spacing)*2);overflow:hidden;resize:both;width:100%}.ComponentView-iframe{height:100%;width:100%}[data-mode=presentation] .DeveloperInformation{display:none}@media screen and (prefers-reduced-motion){*,:after,:before{animation:none!important;transition:none!important}}@media (prefers-color-scheme:dark){.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E")}}
+  );--json-tree-js-button-text-color-hover:var(--json-tree-js-color-snow-white);--json-tree-js-button-background-color-active:#616b79;--json-tree-js-button-text-color-active:var(--json-tree-js-color-snow-white);--json-tree-js-border-radius:0.5rem;--json-tree-js-border-style-scrollbar:inset 0 0 6px var(--json-tree-js-color-dark-gray);--json-tree-js-border-size:0.5px;--json-tree-js-spacing:10px;--json-tree-js-spacing-font-size:1em;--json-tree-js-transition:all 0.3s}div.json-tree-js{background-color:var(--color-Code-background);border:.0625rem solid var(--color-Outline);box-sizing:border-box;color:var(--json-tree-js-color-white);display:inline-block;font-size:var(--json-tree-js-spacing-font-size);font-weight:var(--json-tree-js-text-bold-weight);line-height:1.5;margin:0!important;padding:var(--json-tree-js-spacing);width:100%}div.json-tree-js div.no-click{pointer-events:none!important}div.json-tree-js *,div.json-tree-js :after,div.json-tree-js :before{box-sizing:border-box}}@layer miyagi{div.json-tree-js :is(.down-arrow,.right-arrow,.no-arrow){appearance:none;background:none;border:none;display:inline-flex;font:inherit;height:1.5em;padding:0;width:1.5em}div.json-tree-js .no-arrow{pointer-events:none;visibility:hidden}div.json-tree-js :is(.down-arrow,.right-arrow){align-items:center;cursor:pointer;justify-content:center;transform:translateY(-.125em)}div.json-tree-js :is(.down-arrow,.right-arrow):after{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:inline-block;flex:0 0 var(--toggle-width);font-size:.4em;height:var(--toggle-height)}div.json-tree-js :is(.down-arrow,.right-arrow):hover{opacity:.7}div.json-tree-js .down-arrow:after{transform:translateY(-25%) rotate(135deg)}div.json-tree-js .right-arrow:after{transform:translateX(-25%) rotate(45deg)}div.json-tree-js div.title-bar{display:flex;margin-bottom:var(--json-tree-js-spacing)}div.json-tree-js div.title-bar div.controls,div.json-tree-js div.title-bar div.title{display:none}div.json-tree-js div.object-type-title{font-weight:var(--json-tree-js-header-bold-weight);text-align:left!important}div.json-tree-js div.object-type-title span.array{color:var(--json-tree-js-color-array)}div.json-tree-js div.object-type-title span.object{color:var(--json-tree-js-color-object)}div.json-tree-js div.object-type-title span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents{margin-left:calc(var(--json-tree-js-spacing)*2);margin-top:calc(var(--json-tree-js-spacing)/2);text-align:left!important}div.json-tree-js div.object-type-contents div.object-type-value{margin-bottom:calc(var(--json-tree-js-spacing)/2);margin-top:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.split{margin-left:calc(var(--json-tree-js-spacing)/2);margin-right:calc(var(--json-tree-js-spacing)/2)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean,div.json-tree-js div.object-type-contents div.object-type-value span.date,div.json-tree-js div.object-type-contents div.object-type-value span.decimal,div.json-tree-js div.object-type-contents div.object-type-value span.function,div.json-tree-js div.object-type-contents div.object-type-value span.null,div.json-tree-js div.object-type-contents div.object-type-value span.number,div.json-tree-js div.object-type-contents div.object-type-value span.string,div.json-tree-js div.object-type-contents div.object-type-value span.unknown{transition:var(--json-tree-js-transition);transition-property:opacity}div.json-tree-js div.object-type-contents div.object-type-value span.boolean:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.date:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.decimal:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.function:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.null:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.number:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.string:not(.no-hover):hover,div.json-tree-js div.object-type-contents div.object-type-value span.unknown:not(.no-hover):hover{cursor:pointer;opacity:.7}div.json-tree-js div.object-type-contents div.object-type-value span.comma{color:var(--json-tree-js-color-white);font-weight:var(--json-tree-js-text-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.boolean{color:var(--json-tree-js-color-boolean)}div.json-tree-js div.object-type-contents div.object-type-value span.decimal{color:var(--json-tree-js-color-decimal)}div.json-tree-js div.object-type-contents div.object-type-value span.number{color:var(--json-tree-js-color-number)}div.json-tree-js div.object-type-contents div.object-type-value span.string{color:var(--json-tree-js-color-string)}div.json-tree-js div.object-type-contents div.object-type-value span.date{color:var(--json-tree-js-color-date)}div.json-tree-js div.object-type-contents div.object-type-value span.array{color:var(--json-tree-js-color-array);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.object{color:var(--json-tree-js-color-object);font-weight:var(--json-tree-js-header-bold-weight)}div.json-tree-js div.object-type-contents div.object-type-value span.null{color:var(--json-tree-js-color-null);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.function{color:var(--json-tree-js-color-function);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.unknown{color:var(--json-tree-js-color-unknown);font-style:italic}div.json-tree-js div.object-type-contents div.object-type-value span.count{font-weight:var(--json-tree-js-text-bold-weight);margin-left:calc(var(--json-tree-js-spacing)/2)}.custom-scroll-bars::-webkit-scrollbar{width:12px}.custom-scroll-bars::-webkit-scrollbar-thumb,.custom-scroll-bars::-webkit-scrollbar-track{box-shadow:var(--json-tree-js-border-style-scrollbar)}.custom-scroll-bars::-webkit-scrollbar-thumb{background:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:hover{background-color:var(--json-tree-js-color-white)}.custom-scroll-bars::-webkit-scrollbar-thumb:active{background-color:var(--json-tree-js-color-lighter-gray)}}@layer miyagi{.Colors{display:grid;gap:3em;grid-template-columns:repeat(auto-fill,minmax(14em,1fr))}.Colors-button{--size:3em;display:flex;flex-wrap:wrap}.Colors-button:after,.Colors-button:before{display:block}.Colors--all .Colors-button:before{margin-inline-end:10px;width:var(--size)}.Colors--all .Colors-button:before,.Colors--decoration .Colors-button:before{background:var(--color);border:1px solid var(--backdrop,transparent);content:"";height:var(--size);order:-1}.Colors--decoration .Colors-button:before{width:100%}.Colors--all .Colors-button:after,.Colors--typo .Colors-button:after{color:var(--color);font-size:var(--size);font-weight:700;order:-1;-webkit-text-stroke:1px var(--backdrop,transparent);text-stroke:1px var(--backdrop,transparent)}.Colors--all .Colors-button:after{content:"Aa"}.Colors--typo .Colors-button:after{content:"AaBbCc"}.Colors-prop,.Colors-value{flex:1 0 100%;margin:10px 0 0}.Fonts-item:not(:first-child){margin-top:3em}.Fonts-button{color:inherit}.Fonts-button:before{content:"The quick brown fox jumps over the lazy dog";font-family:var(--font-family);font-feature-settings:var(--font-feature-settings);font-kerning:var(--font-kerning);font-size:var(--font-size);font-size-adjust:var(--font-size-adjust);font-stretch:var(--font-stretch);font-style:var(--font-style);font-variant:var(--font-variant);font-variant-caps:var(--font-variant-caps);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);text-shadow:var(--text-shadow);text-transform:var(--text-transform)}.Fonts-details{display:flex;list-style:none;padding:0}.Fonts-details>li:not(:last-child){border-inline-end:.0625rem solid currentcolor;margin-inline-end:.5em;padding-inline-end:.5em}.Spacings{align-items:flex-start;display:flex;flex-direction:column}.Spacings-item:not(:first-child){margin-top:3em}.Spacings-button{color:inherit}.Spacings-button:before{background:currentcolor;content:"";display:block;height:var(--spacing);width:var(--spacing)}.CustomPropsGroup{list-style:none;margin:3em 0;padding:0}.CustomProp{border:.0625rem solid transparent}.CustomProp,.CustomProp[aria-selected=true]{position:relative}.CustomProp-prop{display:block;margin:10px 0 0;word-break:break-all}.CustomProp-button{appearance:none;background:none;border:none;font:inherit;padding:0;text-align:start;width:fit-content}.CustomProp-button:focus{outline:none}.CustomProp-button:not([aria-expanded=true]):focus .CustomProp-prop,.CustomProp-button:not([aria-expanded=true]):hover .CustomProp-prop{text-decoration:underline}.CustomProp-details{background:var(--color-Tooltip-background);bottom:calc(100% + 15px);box-shadow:0 4px 10px rgba(0,0,0,.1);box-sizing:border-box;display:none;font-size:14px;gap:.5rem 1rem;grid-template-columns:fit-content(50%) 1fr;inset-inline-start:0;line-height:1.5;margin:0;outline:.0625rem solid var(--color-Tooltip-outline);padding:15px;position:absolute;white-space:nowrap;z-index:1}}@layer miyagi{}@layer miyagi{}@layer miyagi{@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.CustomProp-button:hover+.CustomProp-details,.CustomProp-details:not([hidden]){animation:fadeIn .15s ease;display:grid}.CustomProp-details:after,.CustomProp-details:before{border:10px solid transparent;content:"";display:block;height:0;inset-inline-start:15px;position:absolute;width:0}.CustomProp-details:before{border-top-color:var(--color-Tooltip-outline);top:100%}.CustomProp-details:after{border-top-color:var(--color-Tooltip-background);top:calc(100% - 2px)}.CustomProp-detailsProperty{font-weight:600}.CustomProp-detailsValue{margin:0}.PerformanceTable{border-collapse:collapse;margin-block:1em;width:100%}}@layer miyagi{.PerformanceTable :is(th,td){padding:.35em .75em;text-align:start;vertical-align:top}.PerformanceTable thead th{border-block-end:.0625rem solid currentcolor;font-size:.875em;font-weight:700;letter-spacing:.0375em;text-transform:uppercase}.PerformanceTable tbody tr:not(:last-child) :is(td,th){border-block-end:.0625rem solid var(--color-Outline)}.PerformanceTable-totals :is(th,td){font-weight:700}.PerformanceTable tr[data-missing=true] td{color:var(--color-Iframe-text-secondary)}.PerformanceStatus{border-radius:.25em;display:inline-block;font-size:.875em;font-weight:700;letter-spacing:.0375em;padding:.15em .6em;text-transform:uppercase}.PerformanceStatus--ok{background:color-mix(in srgb,var(--color-Positive) 20%,transparent);color:var(--color-Positive)}.PerformanceStatus--warn{background:color-mix(in srgb,var(--color-Iframe-text-secondary) 25%,transparent);color:var(--color-Iframe-text)}.PerformanceStatus--exceed{background:color-mix(in srgb,var(--color-Negative) 20%,transparent);color:var(--color-Negative)}.PerformanceStatus--unbudgeted{color:var(--color-Iframe-text-secondary)}}html{--iframe-spacing:clamp(0.75rem,4vi,2.5rem);height:100%}body{background:var(--color-Iframe-background);color:var(--color-Iframe-text);font-family:var(--font-family);margin:0;min-height:100%}.Wrapper{box-sizing:border-box;padding:var(--iframe-spacing);width:100%}a{color:var(--color-Iframe-link);text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:.25em;outline:3px solid currentcolor;outline-offset:2px}code[class*=language-],pre[class*=language-]{border-radius:0;box-shadow:none;text-shadow:none}.Code code,.Documentation code,:not(pre)>code[class*=language-]{font-size-adjust:.525;text-shadow:none}.Code code,.Documentation,.ErrorMessage,.Information,:not(pre)>code[class*=language-]{line-height:3.125ex}.Code code,.Documentation code,.Information code,:not(pre)>code[class*=language-]{font-family:Menlo,Monaco,monospace}.Documentation h1{font-size:2.4em;font-weight:700;line-height:1;text-transform:capitalize}.Documentation>*+*{margin-top:3.125ex}.Documentation i{font-style:italic}.Documentation table{border-spacing:0}.Documentation th{border-block-end:.0625rem solid currentcolor;text-align:left}.Documentation :is(th,td){padding:.25em .5em}.Documentation tr:not(:last-child) td{border-block-end:.0625rem solid var(--color-Outline)}.Information-val{margin-inline-start:0}.Component-variationHeader{display:flex;font-size:14px;gap:16px;inset-inline-end:40px;line-height:1;position:absolute;top:13px}.Documentation>:first-child{margin-top:0}.Documentation p{max-width:64ch}.SectionTitle{align-items:center;display:flex;font-size:1.6em;margin:2em 0 1em;scroll-margin-top:1.5em}.SectionTitle:after{background:var(--color-Outline);content:"";flex:1;height:.0625rem;margin-inline-start:20px}.Information-wrapper+.Information-wrapper{margin-top:30px}.Information-attr{color:var(--color-Iframe-text-secondary);font-family:var(--font-family);font-size:.875em;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Information-attr:not(:first-child){margin-top:1em}.Documentation code,.Information code{font-weight:600}.Status:before{display:inline-block;margin-inline-end:.5em}.Status--valid{color:var(--color-Positive)}.Status--valid:before{content:"✓"}.Status--invalid{color:var(--color-Negative)}.Status--invalid:before{content:"✗"}.Error{align-items:center;display:flex;height:100%;justify-content:center;margin:0}.Error,.ErrorMessage{color:var(--color-Negative)}.ErrorMessage{margin:1.5em 0}.Iframe-newTabLink{align-items:center;display:flex;font-weight:400}.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E");content:"";display:block;height:1em;margin-inline-end:.5em;width:1em}.Code,:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--color-Code-background)}:not(pre)>code[class*=language-],pre[class*=language-]{border-color:var(--color-Outline)}.Code,:not(pre)>code[class*=language-]{border:.0625rem solid var(--color-Outline);padding:calc(var(--iframe-spacing)/2)}.Code,pre[class*=language-]{font-size:.875em}.Tabs-tab summary{cursor:default;list-style-type:none;padding-block:10px;padding-inline-start:16px;position:relative}.Tabs-tab summary:before{border:var(--toggle-border);border-color:currentcolor;border-inline-end-width:.25em;border-top-width:.25em;content:"";display:block;font-size:.4em;height:var(--toggle-height);inset-inline-start:.25rem;position:absolute;top:50%;transition:var(--toggle-transition);width:var(--toggle-width)}.Tabs-tab summary::-webkit-details-marker{display:none}.Tabs-tab:not([open]) summary:before{transform:var(--toggle-transition-closed)}.Tabs-tab[open] summary:before{transform:var(--toggle-transition-opened)}.Component:not(:last-child){margin-bottom:calc(var(--iframe-spacing)*2)}.Component-iframeWrapper{height:calc(100vh - var(--iframe-spacing)*2.5);width:100%}.Component-iframeWrapper:not(.has-fixedHeight){outline:.0625rem solid var(--color-Outline);resize:both}.Component-iframe{height:100%;width:100%}.Component-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:0 0 20px}.Component-headMeta{align-items:center;display:flex;gap:16px}.Component-mockValidation{appearance:none;background:none;border:none;color:var(--color-Iframe-link);cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:1;margin:0;padding:0;text-decoration:underline}.Component-mockData{background:light-dark(#f2f2f2,#1f1f1f);border:none;box-sizing:border-box;height:calc(100vb - var(--iframe-spacing)*2);max-width:70ch;overscroll-behavior:contain;padding:var(--iframe-spacing);width:calc(100vi - var(--iframe-spacing)*2)}.Component-mockData::backdrop{background:light-dark(hsla(0,0%,100%,.8),rgba(0,0,0,.8))}.Component-mockData:not([open]){display:none}.Component-mockDataHeading{margin-block:0 1em}.Component-closeMockData{appearance:none;background:none;border:0;color:var(--color-Iframe-link);cursor:pointer;inset-block-start:1rem;inset-inline-end:1rem;line-height:1;margin:0;padding:0;position:absolute;text-decoration:underline}.Component-closeMockData,.Component-file{font-family:var(--font-family);font-size:.875em}.Component-file{align-items:center;color:var(--color-Iframe-text-secondary);display:inline-flex;flex-wrap:wrap;letter-spacing:.0375em;text-decoration:none;text-transform:uppercase}.Component-file:active,.Component-file:focus,.Component-file:hover{text-decoration:underline}.Component-fileFolders{color:var(--color-Iframe-text-tertiary)}.ComponentView{border:.0625rem solid var(--color-Outline);box-sizing:border-box;height:calc(100vh - var(--iframe-spacing)*2);overflow:hidden;resize:both;width:100%}.ComponentView-iframe{height:100%;width:100%}[data-mode=presentation] .DeveloperInformation{display:none}@media screen and (prefers-reduced-motion){*,:after,:before{animation:none!important;transition:none!important}}@media (prefers-color-scheme:dark){.Iframe-newTabLink:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3'/%3E%3C/svg%3E")}}

package/frontend/assets/css/iframe/performance.css

@@ -0,0 +1,64 @@
+.PerformanceTable {
+  border-collapse: collapse;
+  margin-block: 1em;
+  width: 100%;
+}
+
+.PerformanceTable :is(th, td) {
+  padding: 0.35em 0.75em;
+  text-align: start;
+  vertical-align: top;
+}
+
+.PerformanceTable thead th {
+  border-block-end: 0.0625rem solid currentcolor;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.875em;
+  letter-spacing: 0.0375em;
+}
+
+.PerformanceTable tbody tr:not(:last-child) :is(td, th) {
+  border-block-end: 0.0625rem solid var(--color-Outline);
+}
+
+.PerformanceTable-totals :is(th, td) {
+  font-weight: bold;
+}
+
+.PerformanceTable tr[data-missing="true"] td {
+  color: var(--color-Iframe-text-secondary);
+}
+
+.PerformanceStatus {
+  display: inline-block;
+  padding: 0.15em 0.6em;
+  border-radius: 0.25em;
+  font-size: 0.875em;
+  font-weight: bold;
+  letter-spacing: 0.0375em;
+  text-transform: uppercase;
+}
+
+.PerformanceStatus--ok {
+  background: color-mix(in srgb, var(--color-Positive) 20%, transparent);
+  color: var(--color-Positive);
+}
+
+.PerformanceStatus--warn {
+  background: color-mix(
+    in srgb,
+    var(--color-Iframe-text-secondary) 25%,
+    transparent
+  );
+  color: var(--color-Iframe-text);
+}
+
+.PerformanceStatus--exceed {
+  background: color-mix(in srgb, var(--color-Negative) 20%, transparent);
+  color: var(--color-Negative);
+}
+
+.PerformanceStatus--unbudgeted {
+  color: var(--color-Iframe-text-secondary);
+}

package/frontend/assets/css/iframe.css

@@ -4,6 +4,7 @@
 @import url("./iframe/accordion-tabs.css") layer(miyagi);
 @import url("./iframe/jsontree.js.css") layer(miyagi);
 @import url("./iframe/styleguide/index.css") layer(miyagi);
+@import url("./iframe/performance.css") layer(miyagi);
 
 html {
   --iframe-spacing: clamp(0.75rem, 4vi, 2.5rem);

package/frontend/views/component_variation.twig.miyagi

@@ -24,8 +24,8 @@
     {% if assets.js %}
       <script src="{{ assets.js }}"></script>
     {% endif %}
-    {% if mockDataResolved is defined %}
-    <script type="application/json" id="miyagi-mock-data">{{ mockDataResolved|replace({'</script>': '<\\/script>'})|raw }}</script>
+    {% if dataJson is defined and dataJson %}
+    <script type="application/json" id="{{ dataJsonId }}">{{ dataJson|replace({'</script>': '<\\/script>'})|raw }}</script>
     {% endif %}
     <script>
       {{ theme.js }}

package/frontend/views/iframe_component.twig.miyagi

@@ -34,6 +34,12 @@
 								<div id="json-tree-resolved-mocks" data-jsontree-js="jsontree.mocks"></div>
 							</details>
 						{% endif %}
+						{% if dataJson %}
+							<details class="Tabs-tab">
+								<summary>Data</summary>
+								<div id="json-tree-resolved-data" data-jsontree-js="jsontree.data"></div>
+							</details>
+						{% endif %}
 						{% if template %}
 							<details class="Tabs-tab">
 								<summary>Template</summary>
@@ -135,6 +141,9 @@
 				},
 				"mocks": {
 					"data": {{ mocks|default({})|replace({'</script>': '<\\/script>'})|raw }}
+				},
+				"data": {
+					"data": {{ dataJson|default({})|replace({'</script>': '<\\/script>'})|raw }}
 				}
 			};
 		</script>

package/frontend/views/performance.twig.miyagi

@@ -0,0 +1,72 @@
+{% extends "@miyagi/layouts/iframe_default.twig.miyagi" %}
+{% block body %}
+	<div class="Wrapper">
+		<div class="Documentation">
+			<h1>Performance budget</h1>
+			<p>Measured at <strong>{{ compression }}</strong>. OK: {{ summary.ok }} · Warn: {{ summary.warn }} · Exceed: {{ summary.exceed }} · Unbudgeted: {{ summary.unbudgeted }}.</p>
+
+			<h2>Evaluations</h2>
+			<table class="PerformanceTable">
+				<thead>
+					<tr>
+						<th scope="col">Category</th>
+						<th scope="col">Item</th>
+						<th scope="col">Actual</th>
+						<th scope="col">Budget</th>
+						<th scope="col">Status</th>
+					</tr>
+				</thead>
+				<tbody>
+					{% for row in evaluations %}
+						<tr data-status="{{ row.status }}">
+							<td>{{ row.category }}</td>
+							<td>{% if row.key == "total" %}Total{% else %}{{ row.label }}{% endif %}</td>
+							<td>{{ row.actualFormatted }}</td>
+							<td>{{ row.budgetFormatted }}</td>
+							<td>
+								<span class="PerformanceStatus PerformanceStatus--{{ row.status }}">
+									{% if row.status == "ok" %}OK{% elseif row.status == "warn" %}WARN{% elseif row.status == "exceed" %}EXCEED{% else %}—{% endif %}
+								</span>
+								{% if row.ratioPercent is not null %}
+									<small>({{ row.ratioPercent }}%)</small>
+								{% endif %}
+							</td>
+						</tr>
+					{% endfor %}
+				</tbody>
+			</table>
+
+			{% for cat in categories %}
+				{% if cat.files|length > 0 %}
+					<h2>{{ cat.category }}</h2>
+					<table class="PerformanceTable">
+						<thead>
+							<tr>
+								<th scope="col">File</th>
+								<th scope="col">Raw</th>
+								<th scope="col">Gzip</th>
+								<th scope="col">Brotli</th>
+							</tr>
+						</thead>
+						<tbody>
+							{% for file in cat.files %}
+								<tr{% if file.missing %} data-missing="true"{% endif %}>
+									<td>{{ file.path }}{% if file.missing %} <em>(missing)</em>{% endif %}</td>
+									<td>{{ file.raw }}</td>
+									<td>{{ file.gzip }}</td>
+									<td>{{ file.brotli }}</td>
+								</tr>
+							{% endfor %}
+							<tr class="PerformanceTable-totals">
+								<th scope="row">Total</th>
+								<td>{{ cat.totals.raw }}</td>
+								<td>{{ cat.totals.gzip }}</td>
+								<td>{{ cat.totals.brotli }}</td>
+							</tr>
+						</tbody>
+					</table>
+				{% endif %}
+			{% endfor %}
+		</div>
+	</div>
+{% endblock %}

package/lib/build/index.js

@@ -7,6 +7,8 @@ import appConfig from "../default-config.js";
 import { t } from "../i18n/index.js";
 import log from "../logger.js";
 import { getVariationData } from "../mocks/index.js";
+import { runPerformance } from "../performance/index.js";
+import { generatePerformanceReport } from "../performance/report.js";
 
 /**
  * Module for creating a static build
@@ -176,6 +178,12 @@ export default () => {
           .then(async () => {
             await createJsonOutputFile(buildFolder, paths);
 
+            const performanceError = await writePerformanceReport(buildFolder);
+            if (performanceError) {
+              reject(performanceError);
+              return;
+            }
+
             resolve(
               t("buildDone").replace(
                 "{{count}}",
@@ -190,6 +198,71 @@ export default () => {
     });
   });
 
+  /**
+   * Runs the performance-budget check against the just-built output, logs a
+   * summary, and (when configured) writes a markdown report. Never throws —
+   * a missing budget configuration is treated as "feature disabled". The only
+   * way this returns an Error is when `performance.report.failOnExceed` is on
+   * and a budget has actually been exceeded.
+   * @param {string} buildFolder
+   * @returns {Promise<Error|null>}
+   */
+  async function writePerformanceReport(buildFolder) {
+    const perfConfig = global.config.performance;
+    if (!perfConfig || !perfConfig.enabled) {
+      return null;
+    }
+
+    let result;
+    try {
+      result = runPerformance({
+        config: global.config,
+        html: true,
+        buildFolder,
+      });
+    } catch (error) {
+      log("warn", `Performance budget check skipped: ${error.message}`);
+      return null;
+    }
+
+    const configuredOutput = perfConfig.report?.output;
+    if (configuredOutput) {
+      // A bare filename (no directory component) lands inside the build folder
+      // alongside output.json; anything with a directory is honoured as-is.
+      const outputPath =
+        path.dirname(configuredOutput) === "."
+          ? path.join(buildFolder, configuredOutput)
+          : path.resolve(configuredOutput);
+
+      try {
+        await writeFile(
+          outputPath,
+          generatePerformanceReport(result),
+          "utf-8",
+        );
+        log("info", null, `Wrote ${outputPath}.`);
+      } catch (error) {
+        log("warn", `Failed to write performance report: ${error.message}`);
+      }
+    }
+
+    const { exceed, warn, ok, unbudgeted } = result.summary;
+    const summaryLine = `Performance budget (${result.compression}): ${ok} ok, ${warn} warn, ${exceed} exceed, ${unbudgeted} unbudgeted.`;
+
+    if (exceed > 0) {
+      log("warn", summaryLine);
+      if (perfConfig.report?.failOnExceed) {
+        return new Error(
+          `Performance budget exceeded in ${exceed} categor${exceed === 1 ? "y" : "ies"}.`,
+        );
+      }
+    } else {
+      log("info", summaryLine);
+    }
+
+    return null;
+  }
+
   /**
    * Creates an "output.json" file with the given array as content
    * @param {string} buildFolder
@@ -665,6 +738,7 @@ export default () => {
             component,
             componentData: data.resolved,
             componentDeclaredAssets: data.$assets || null,
+            variation,
             cb: async (err, response) => {
               if (err) {
                 if (typeof err === "string") {

package/lib/cli/budget.js

@@ -0,0 +1,157 @@
+import { writeFile } from "node:fs/promises";
+import getConfig from "../config.js";
+import log from "../logger.js";
+import { EXIT_CODES } from "../errors.js";
+import { runPerformance } from "../performance/index.js";
+import { generatePerformanceReport } from "../performance/report.js";
+import { formatSize } from "../performance/parse-size.js";
+
+const VALID_COMPRESSIONS = ["raw", "gzip", "brotli"];
+
+/**
+ * `miyagi budget` — on-demand performance budget check.
+ * By default walks the configured global CSS/JS and asset folders, measures
+ * them, and compares against `config.performance.budgets`. The HTML category
+ * (post-build pages) is opt-in via `--build-folder`.
+ * @param {object} args
+ * @returns {Promise<object>}
+ */
+export default async function budgetCli(args) {
+  const config = await getConfig(args);
+  global.config = config;
+
+  if (args.compression && !VALID_COMPRESSIONS.includes(args.compression)) {
+    log(
+      "error",
+      `Unknown --compression "${args.compression}". Use one of: ${VALID_COMPRESSIONS.join(", ")}`,
+    );
+    return {
+      success: false,
+      code: EXIT_CODES.CLI_USAGE_ERROR,
+      shouldExit: true,
+    };
+  }
+
+  if (args.compression) {
+    config.performance = {
+      ...(config.performance || {}),
+      compression: args.compression,
+    };
+  }
+
+  const result = runPerformance({
+    config,
+    html: Boolean(args.buildFolder),
+    buildFolder: args.buildFolder,
+    listAllPages: args.listAllPages,
+  });
+
+  if (args.json) {
+    process.stdout.write(`${JSON.stringify(result, null, 2)}\n`);
+  } else {
+    printTable(result);
+  }
+
+  if (args.output) {
+    const report = generatePerformanceReport(result);
+    try {
+      await writeFile(args.output, report, "utf-8");
+      log("info", `Performance report written to ${args.output}`);
+    } catch (error) {
+      log("error", `Failed to write report: ${error.message}`);
+    }
+  }
+
+  const exceeded = result.summary.exceed > 0;
+  const shouldFail =
+    args.fail || config.performance?.report?.failOnExceed;
+
+  if (exceeded && shouldFail) {
+    return {
+      success: false,
+      code: EXIT_CODES.VALIDATION_ERROR,
+      shouldExit: true,
+    };
+  }
+
+  if (exceeded) {
+    log(
+      "warn",
+      `Performance budget exceeded in ${result.summary.exceed} categor${result.summary.exceed === 1 ? "y" : "ies"}.`,
+    );
+  }
+
+  return {
+    success: true,
+    code: EXIT_CODES.SUCCESS,
+    shouldExit: true,
+  };
+}
+
+/**
+ * @param {import("../performance/index.js").PerformanceResult} result
+ * @returns {void}
+ */
+function printTable(result) {
+  const { evaluations, compression, summary } = result;
+
+  log("info", `Performance budget — measured at ${compression}.`);
+
+  const header = ["Category", "Item", "Actual", "Budget", "Status"];
+  const rows = evaluations.map((row) => [
+    row.category,
+    row.key === "total" ? "Total" : shortLabel(row.label),
+    formatSize(row.actual),
+    formatSize(row.budget),
+    statusLabel(row.status),
+  ]);
+
+  const columnWidths = header.map((heading, index) =>
+    Math.max(heading.length, ...rows.map((row) => row[index].length)),
+  );
+
+  const padCell = (text, width) => text + " ".repeat(width - text.length);
+  const renderRow = (columns) =>
+    columns.map((cell, index) => padCell(cell, columnWidths[index])).join("  ");
+
+  process.stdout.write(`${renderRow(header)}\n`);
+  process.stdout.write(
+    `${columnWidths.map((width) => "-".repeat(width)).join("  ")}\n`,
+  );
+  for (const row of rows) {
+    process.stdout.write(`${renderRow(row)}\n`);
+  }
+  process.stdout.write(
+    `\nOK: ${summary.ok}  Warn: ${summary.warn}  Exceed: ${summary.exceed}  Unbudgeted: ${summary.unbudgeted}\n`,
+  );
+}
+
+const MAX_LABEL_LENGTH = 60;
+
+/**
+ * @param {string} label
+ * @returns {string}
+ */
+function shortLabel(label) {
+  if (label.length <= MAX_LABEL_LENGTH) {
+    return label;
+  }
+  return `…${label.slice(-(MAX_LABEL_LENGTH - 1))}`;
+}
+
+/**
+ * @param {string} status
+ * @returns {string}
+ */
+function statusLabel(status) {
+  switch (status) {
+    case "ok":
+      return "OK";
+    case "warn":
+      return "WARN";
+    case "exceed":
+      return "EXCEED";
+    default:
+      return "—";
+  }
+}

package/lib/cli/index.js

@@ -3,9 +3,11 @@ import componentImport from "./component.js";
 import drupalAssetsImport from "./drupal-assets.js";
 import doctorImport from "./doctor.js";
 import validateHtmlImport from "./validate-html.js";
+import budgetImport from "./budget.js";
 
 export const lint = lintImport;
 export const component = componentImport;
 export const drupalAssets = drupalAssetsImport;
 export const doctor = doctorImport;
 export const validateHtml = validateHtmlImport;
+export const budgetCli = budgetImport;

package/lib/cli/run.js

@@ -10,6 +10,7 @@ import {
   drupalAssets,
   doctor,
   validateHtml as validateHtmlCli,
+  budgetCli,
 } from "./index.js";
 import { EXIT_CODES, MiyagiError } from "../errors.js";
 
@@ -235,6 +236,15 @@ async function runDoctorCommand(args) {
   return await doctor(args);
 }
 
+/**
+ * @param {object} args
+ * @returns {Promise<object>}
+ */
+async function runBudgetCommand(args) {
+  applyCliEnv(args);
+  return await budgetCli(args);
+}
+
 /**
  * @param {Error|MiyagiError|string} error
  * @param {string[]} argv
@@ -281,6 +291,7 @@ export async function runCli(argv = process.argv) {
       validateHtml: runValidateHtmlCommand,
       drupalAssets: runDrupalAssetsCommand,
       doctor: runDoctorCommand,
+      budget: runBudgetCommand,
     },
     argv,
   );