@ethlete/cli 3.0.0-next.21 → 3.0.0-next.22

package/src/lib/design/system/render-check.js

@@ -0,0 +1,427 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderIssuesOf = exports.renderIssueLineOf = void 0;
+const browser_1 = require("../browser");
+const css_source_1 = require("./css-source");
+const serve_1 = require("../serve");
+const shot_1 = require("../shot");
+const thumb_1 = require("../thumb");
+const list_system_1 = require("./list-system");
+const resolve_product_1 = require("./resolve-product");
+const system_modules_1 = require("./system-modules");
+const renderIssueLineOf = (issue) => `${issue.rule} ${issue.product} ${issue.part} ${issue.state} at ${issue.size}: ${issue.path} - ${issue.detail}`;
+exports.renderIssueLineOf = renderIssueLineOf;
+const SINGLE_LINE = 'button, [role="button"], [role="tab"], [role="switch"], [role="menuitem"], [data-wireframe="button"], ' +
+    '[data-wireframe="badge"], [data-wireframe="tabs"], [data-wireframe="segmented"], [data-wireframe="select"]';
+/**
+ * Reads the rule breaks in a drawn frame. A string, not a function: the build would add helpers to a
+ * function that the page does not have.
+ */
+const ESCAPABLE = ['CLIPPED', 'WRAP'];
+const WARNING_RULES = new Set(['UNDEFINED-CLASS']);
+const inspectFrame = (options) => `((options) => {
+  const root = document.getElementById('root');
+  const refused = root.innerText.trim();
+  if (refused.startsWith('design-explore:')) return [{ rule: 'RENDER', path: '#root', detail: refused.split('\\n')[0] }];
+
+  const found = [];
+  const seen = new Set();
+  const skipsOf = (element) => {
+    const skipped = new Set();
+    for (let at = element; at && at !== root; at = at.parentElement) {
+      for (const rule of (at.getAttribute('data-et-skip') ?? '').split(' ')) skipped.add(rule);
+      for (const key of (at.getAttribute('data-et-part') ?? '').split(' '))
+        for (const rule of options.skips[key] ?? []) skipped.add(rule);
+    }
+    return skipped;
+  };
+  const nameOf = (element) => {
+    const tag = element.tagName.toLowerCase();
+    const kit = element.getAttribute('data-wireframe');
+    if (kit) return tag + '[data-wireframe=' + kit + ']';
+    const part = element.getAttribute('data-et-part');
+    if (part) return tag + '[data-et-part=' + part.split(' ')[0] + ']';
+    const named = [...element.classList].find((name) => !/^et-(surface|color)--/.test(name));
+    if (named) return tag + '.' + named;
+    const same = [...(element.parentElement?.children ?? [])].filter((other) => other.tagName === element.tagName);
+    return same.length > 1 ? tag + ':nth-of-type(' + (same.indexOf(element) + 1) + ')' : tag;
+  };
+  const pathOf = (element) => {
+    const names = [];
+    for (let at = element; at && at !== root && names.length < 4; at = at.parentElement) names.unshift(nameOf(at));
+    return names.join(' > ');
+  };
+  const report = (rule, element, detail) => {
+    const path = pathOf(element);
+    if (skipsOf(element).has(rule) || seen.has(rule + path)) return;
+    seen.add(rule + path);
+    const escape = '; on purpose: data-et-skip="' + rule + '" on the element, or definePart({ checks: { skip: [\\'' + rule + '\\'] } })';
+    found.push({ rule, path, detail: options.escapable.includes(rule) ? detail + escape : detail });
+  };
+  const sizeOf = (element) =>
+    element.scrollWidth + 'x' + element.scrollHeight + ' in ' + element.clientWidth + 'x' + element.clientHeight;
+
+  const partRoot = root.querySelector('[data-et-part]') ?? root.querySelector(':scope > :not(style)');
+  if (!partRoot) return found;
+
+  const sheets = [...document.styleSheets].map((sheet) => {
+    try {
+      return [...sheet.cssRules].map((rule) => rule.cssText).join('\\n');
+    } catch {
+      return '';
+    }
+  }).join('\\n');
+  const themes = new Set([...sheets.matchAll(/\\.et-color--([\\w-]+)/g)].map((match) => match[1]));
+  for (const element of root.querySelectorAll('[class*="et-color--"]'))
+    for (const name of element.classList) {
+      const theme = name.startsWith('et-color--') ? name.slice(10) : '';
+      // the SDK's runtime marker for keeping the parent colour, not a theme
+      if (theme && theme !== 'inherited' && !themes.has(theme)) report('UNKNOWN-THEME', element, 'colour theme "' + theme + '" is defined by no stylesheet of the frame, so it draws in the fallback colour');
+    }
+  const defined = new Set([...sheets.matchAll(/\\.(-?[_a-zA-Z][\\w-]*)/g)].map((match) => match[1]));
+  for (const element of root.querySelectorAll('[class]')) {
+    const missing = [...element.classList].filter((name) => options.namespaces.some((prefix) => name.startsWith(prefix)) && !defined.has(name));
+    if (missing.length > 0) report('UNDEFINED-CLASS', element, 'class ' + missing.map((name) => '"' + name + '"').join(', ') + ' is defined by no stylesheet of the frame');
+  }
+
+  const box = partRoot.getBoundingClientRect();
+  if (box.width === 0 || box.height === 0) {
+    report('ZERO-SIZE', partRoot, 'drawn at ' + Math.round(box.width) + 'x' + Math.round(box.height));
+    return found;
+  }
+
+  const page = document.documentElement;
+  const frame = options.fit ? root : page;
+  const right = options.fit ? root.getBoundingClientRect().right : page.clientWidth;
+  if (frame.scrollWidth > frame.clientWidth || (options.fixed && page.scrollHeight > page.clientHeight)) {
+    let furthest = partRoot;
+    let most = 0;
+    for (const element of root.querySelectorAll('*')) {
+      const rect = element.getBoundingClientRect();
+      const past = Math.max(rect.right + scrollX - right, options.fixed ? rect.bottom + scrollY - page.clientHeight : 0);
+      if (past > 0 && past >= most) [furthest, most] = [element, past];
+    }
+    if (most === 0)
+      for (const element of root.querySelectorAll('*'))
+        if (element.scrollWidth > element.clientWidth && getComputedStyle(element).overflowX === 'visible') furthest = element;
+    report('OVERFLOW', furthest, 'content ' + sizeOf(frame) + ' frame');
+  }
+
+  const clips = (value) => value === 'hidden' || value === 'clip';
+  const drawnSizeOf = (element) => {
+    if (!element.hasAttribute('data-et-embed-box')) return { width: element.scrollWidth, height: element.scrollHeight };
+    const rect = element.firstElementChild.getBoundingClientRect();
+    return { width: Math.floor(rect.width), height: Math.floor(rect.height) };
+  };
+  for (const element of root.querySelectorAll('*')) {
+    const style = getComputedStyle(element);
+    const drawn = drawnSizeOf(element);
+    const cutX = clips(style.overflowX) && drawn.width > element.clientWidth;
+    const cutY = clips(style.overflowY) && drawn.height > element.clientHeight;
+    const cutsOnPurpose = style.textOverflow === 'ellipsis' || style.webkitLineClamp !== 'none';
+    if ((cutX || cutY) && !cutsOnPurpose) report('CLIPPED', element, 'content ' + drawn.width + 'x' + drawn.height + ' in ' + element.clientWidth + 'x' + element.clientHeight);
+  }
+
+  const px = (value) => parseFloat(value) || 0;
+  const invisible = (colour) => colour === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(colour);
+  const frameBox = () => {
+    if (options.fit) return { name: 'the frame', box: root.getBoundingClientRect() };
+    const bottom = options.fixed ? page.clientHeight - scrollY : Infinity;
+    return { name: 'the frame', box: { left: -scrollX, right: page.clientWidth - scrollX, top: options.fixed ? -scrollY : -Infinity, bottom } };
+  };
+  const clipOf = (from) => {
+    for (let at = from; at && at !== root; at = at.parentElement) {
+      const style = getComputedStyle(at);
+      if (style.overflowX === 'visible' && style.overflowY === 'visible') continue;
+      const rect = at.getBoundingClientRect();
+      const left = rect.left + at.clientLeft;
+      const top = rect.top + at.clientTop;
+      const box = {
+        left: style.overflowX === 'visible' ? -Infinity : left,
+        right: style.overflowX === 'visible' ? Infinity : left + at.clientWidth,
+        top: style.overflowY === 'visible' ? -Infinity : top,
+        bottom: style.overflowY === 'visible' ? Infinity : top + at.clientHeight,
+      };
+      return { name: pathOf(at), box };
+    }
+    return frameBox();
+  };
+  const pastOf = (rect, reach, box) =>
+    Math.max(
+      rect.left >= box.left ? box.left - (rect.left - reach.left) : 0,
+      rect.right <= box.right ? rect.right + reach.right - box.right : 0,
+      rect.top >= box.top ? box.top - (rect.top - reach.top) : 0,
+      rect.bottom <= box.bottom ? rect.bottom + reach.bottom - box.bottom : 0,
+    );
+  const shadowReachOf = (value) => {
+    const reach = { left: 0, right: 0, top: 0, bottom: 0 };
+    if (value === 'none') return reach;
+    for (const shadow of value.split(/,(?![^(]*\\))/)) {
+      if (/\\binset\\b/.test(shadow)) continue;
+      const colour = shadow.match(/(rgba?|oklch|oklab|lab|lch|hsla?|color)\\([^)]*\\)|transparent/)?.[0] ?? '';
+      if (invisible(colour)) continue;
+      const [x = 0, y = 0, blur = 0, spread = 0] = [...shadow.replace(/\\w+\\([^)]*\\)/g, '').matchAll(/-?[\\d.]+px/g)].map((match) => px(match[0]));
+      if (blur > 0) continue;
+      reach.left = Math.max(reach.left, spread - x);
+      reach.right = Math.max(reach.right, spread + x);
+      reach.top = Math.max(reach.top, spread - y);
+      reach.bottom = Math.max(reach.bottom, spread + y);
+    }
+    return reach;
+  };
+  for (const element of root.querySelectorAll('*')) {
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const outline = style.outlineStyle !== 'none' && !invisible(style.outlineColor) ? Math.max(0, px(style.outlineWidth) + px(style.outlineOffset)) : 0;
+    const shadow = shadowReachOf(style.boxShadow);
+    const clip = clipOf(element.parentElement);
+    const outlinePast = outline > 0 ? pastOf(rect, { left: outline, right: outline, top: outline, bottom: outline }, clip.box) : 0;
+    const shadowPast = pastOf(rect, shadow, clip.box);
+    if (outlinePast > 1) report('CLIPPED', element, 'outline ' + Math.round(outlinePast) + 'px past ' + clip.name);
+    else if (shadowPast > 1) report('CLIPPED', element, 'box-shadow ' + Math.round(shadowPast) + 'px past ' + clip.name);
+  }
+
+  const metrics = document.createElement('canvas').getContext('2d');
+  for (const element of root.querySelectorAll('*')) {
+    const style = getComputedStyle(element);
+    if (!style.textDecorationLine.includes('underline') || invisible(style.textDecorationColor)) continue;
+    const fontSize = px(style.fontSize);
+    const thickness = /px$/.test(style.textDecorationThickness) ? px(style.textDecorationThickness) : Math.max(1, fontSize / 16);
+    const offset = /px$/.test(style.textUnderlineOffset) ? px(style.textUnderlineOffset) : fontSize / 10;
+    const below = offset + thickness + (style.textDecorationStyle === 'wavy' ? 3 : 0);
+    const clip = clipOf(element);
+    let most = 0;
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (!node.textContent.trim()) continue;
+      metrics.font = getComputedStyle(node.parentElement).font;
+      const descent = metrics.measureText(node.textContent).fontBoundingBoxDescent;
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      for (const rect of range.getClientRects()) {
+        const baseline = rect.bottom - descent;
+        if (rect.width > 0 && baseline <= clip.box.bottom) most = Math.max(most, baseline + below - clip.box.bottom);
+      }
+    }
+    if (most > 1) report('CLIPPED', element, 'underline ' + Math.round(most) + 'px past ' + clip.name);
+  }
+
+  const singleLine = (element) => {
+    for (let at = element; at && at !== root; at = at.parentElement)
+      if (at.matches(${JSON.stringify(SINGLE_LINE)}) || [...at.classList].some((name) => /(^|[-_])(badge|chip|pill|tab)$/.test(name)))
+        return true;
+    return false;
+  };
+  const groups = new Map();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (!node.textContent.trim()) continue;
+    let block = node.parentElement;
+    while (block && block !== root && ['inline', 'contents'].includes(getComputedStyle(block).display)) block = block.parentElement;
+    if (!block || block === root) continue;
+    groups.set(block, [...(groups.get(block) ?? []), node]);
+  }
+  for (const [block, nodes] of groups) {
+    const style = getComputedStyle(block);
+    if (!singleLine(block) && style.whiteSpace !== 'nowrap' && style.textWrapMode !== 'nowrap') continue;
+    const lines = [];
+    for (const node of nodes) {
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      for (const rect of range.getClientRects()) {
+        const middle = rect.top + rect.height / 2;
+        if (rect.width > 0 && rect.height > 0 && !lines.some((line) => middle >= line.top && middle <= line.bottom))
+          lines.push({ top: rect.top, bottom: rect.bottom });
+      }
+    }
+    if (lines.length > 1) {
+      const text = block.textContent.trim().replace(/\\s+/g, ' ');
+      report('WRAP', block, '"' + (text.length > 32 ? text.slice(0, 31) + '…' : text) + '" breaks onto ' + lines.length + ' lines');
+    }
+  }
+
+  return found;
+})(${JSON.stringify(Object.assign(Object.assign({}, options), { escapable: ESCAPABLE }))})`;
+const stringsOf = (value) => Array.isArray(value) ? value.filter((entry) => typeof entry === 'string') : [];
+const SDK_PREFIX = 'et-';
+const namespacesOf = (cssSources) => [
+    ...new Set(cssSources.flatMap((source) => source
+        ? (0, css_source_1.cssBlocksOf)(source)
+            .selectors.flatMap(css_source_1.classesOf)
+            .flatMap((name) => { var _a, _b; return (_b = (_a = /^[a-z]{2,}-/.exec(name)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : []; })
+            .filter((prefix) => prefix !== SDK_PREFIX)
+        : [])),
+];
+const firstOfEach = (issues) => {
+    const seen = new Set();
+    return issues.filter((issue) => {
+        const key = JSON.stringify([issue.sketch, issue.rule, issue.detail]);
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+};
+const widthsOf = (value) => Array.isArray(value)
+    ? value.filter((width) => typeof width === 'number' && Number.isInteger(width) && width > 0)
+    : [];
+const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { browser, base, frames } = options;
+    const context = yield browser.newContext();
+    const issues = [];
+    try {
+        const page = yield context.newPage();
+        for (const frame of frames) {
+            yield page.setViewportSize(frame.viewport);
+            yield (0, thumb_1.openFrame)(page, `${base}/frame.html?${frame.search}`);
+            yield page.evaluate(thumb_1.settled);
+            const found = (yield page.evaluate(inspectFrame({
+                fixed: frame.fixed,
+                fit: frame.fit,
+                skips: frame.skips,
+                namespaces: frame.namespaces,
+            })));
+            const { product, part, state, sketch } = frame.address;
+            issues.push(...found.map((issue) => (Object.assign(Object.assign({}, issue), { product, part, state, sketch, size: frame.size }))));
+        }
+    }
+    finally {
+        yield context.close();
+    }
+    return issues;
+});
+/**
+ * Draws every state of the parts of each job in one headless Chromium, on one page of a design server of
+ * its own: a page at each product preset, a part with `widths` at each width, any other part fitted to
+ * its content. Answers the rule breaks it finds, or why it could not draw.
+ */
+const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e;
+    const { target, config, jobs } = options;
+    const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
+    if (jobs.length === 0)
+        return { issues: [], warnings: [], grids: [], drawn: [] };
+    if (!(yield resolveChromium(target)))
+        return { unavailable: 'neither the checkout nor this package resolves playwright or playwright-core' };
+    const queue = (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
+    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    try {
+        yield server.listen();
+        const { port } = (_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address();
+        const base = `http://localhost:${port}`;
+        const system = (0, system_modules_1.createSystemModules)({ target, config });
+        const frames = [];
+        const issues = [];
+        const grids = [];
+        const gridWarnings = [];
+        for (const { product, sketch, parts } of jobs) {
+            const skips = {};
+            const drawn = system.drawnOf(product, sketch);
+            if (!drawn)
+                continue;
+            const namespaces = namespacesOf(drawn.parts.map((part) => part.cssSource));
+            for (const part of drawn.parts) {
+                const key = (0, resolve_product_1.partKeyOf)(part);
+                const loaded = yield server
+                    .ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file: part.file, product, sketch }))
+                    .then((module) => ({ module: module }))
+                    .catch((error) => ({ error: error instanceof Error ? error.message : String(error) }));
+                if ('error' in loaded) {
+                    if (!parts || parts.includes(key))
+                        issues.push({
+                            rule: 'RENDER',
+                            product,
+                            part: key,
+                            state: '-',
+                            size: '-',
+                            path: '-',
+                            detail: (_c = loaded.error.split('\n')[0]) !== null && _c !== void 0 ? _c : '',
+                            sketch,
+                        });
+                    continue;
+                }
+                const definition = loaded.module.default;
+                skips[key] = stringsOf((_d = definition === null || definition === void 0 ? void 0 : definition.checks) === null || _d === void 0 ? void 0 : _d.skip);
+                if (parts && !parts.includes(key))
+                    continue;
+                const states = (definition === null || definition === void 0 ? void 0 : definition.states) && typeof definition.states === 'object' ? Object.keys(definition.states) : [];
+                const grid = (0, list_system_1.gridReportOf)(definition === null || definition === void 0 ? void 0 : definition.grid, states);
+                if (grid) {
+                    grids.push({ product, part: key, sketch, line: grid.line });
+                    grid.problems.forEach((detail) => issues.push({ rule: 'GRID', product, part: key, state: '-', size: '-', path: '-', detail, sketch }));
+                    grid.warnings.forEach((detail) => gridWarnings.push({
+                        rule: 'GRID-COVERAGE',
+                        product,
+                        part: key,
+                        state: '-',
+                        size: '-',
+                        path: '-',
+                        detail,
+                        sketch,
+                    }));
+                }
+                const widths = widthsOf(definition === null || definition === void 0 ? void 0 : definition.widths);
+                const sizes = part.layer === 'pages'
+                    ? Object.keys(drawn.presets).map((preset) => ({ preset, width: null }))
+                    : widths.length > 0
+                        ? widths.map((width) => ({ preset: null, width }))
+                        : [{ preset: null, width: null }];
+                for (const state of states) {
+                    for (const { preset, width } of sizes) {
+                        const address = { product, part: key, state, preset, width, sketch, interaction: null };
+                        const frame = (0, shot_1.partFrameOf)(Object.assign({ system }, address));
+                        if (frame instanceof Error)
+                            continue;
+                        frames.push({
+                            address,
+                            size: preset !== null && preset !== void 0 ? preset : (width ? `${width}px` : 'fitted'),
+                            search: frame.search.toString(),
+                            viewport: (0, shot_1.viewportOf)(frame.size),
+                            fixed: ((_e = frame.size) === null || _e === void 0 ? void 0 : _e.height) !== undefined,
+                            fit: frame.size === null,
+                            skips,
+                            namespaces,
+                        });
+                    }
+                }
+            }
+        }
+        const inspected = yield queue.run((browser) => inspect({ browser, base, frames }));
+        issues.push(...inspected.filter((issue) => !WARNING_RULES.has(issue.rule)));
+        return {
+            issues,
+            warnings: [...gridWarnings, ...firstOfEach(inspected.filter((issue) => WARNING_RULES.has(issue.rule)))],
+            grids,
+            drawn: frames.map(({ address }) => {
+                var _a;
+                return ({
+                    product: address.product,
+                    part: address.part,
+                    state: address.state,
+                    size: (_a = address.preset) !== null && _a !== void 0 ? _a : (address.width ? `${address.width}px` : 'fitted'),
+                    sketch: address.sketch,
+                });
+            }),
+        };
+    }
+    catch (error) {
+        if (error instanceof thumb_1.ThumbUnavailableError)
+            return { unavailable: error.message };
+        throw error;
+    }
+    finally {
+        yield Promise.all([queue.close(), server.close()]);
+    }
+});
+exports.renderIssuesOf = renderIssuesOf;
+//# sourceMappingURL=render-check.js.map

package/src/lib/design/system/render-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-check.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/render-check.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,wCAAwC;AAExC,6CAAsD;AACtD,oCAA8C;AAC9C,kCAA+D;AAC/D,oCAA+F;AAC/F,+CAA6C;AAC7C,uDAA8C;AAC9C,qDAAyF;AAsClF,MAAM,iBAAiB,GAAG,CAAC,KAAkB,EAAE,EAAE,CACtD,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,OAAO,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,MAAM,EAAE,CAAC;AADrG,QAAA,iBAAiB,qBACoF;AAElH,MAAM,WAAW,GACf,wGAAwG;IACxG,4GAA4G,CAAC;AAE/G;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEtC,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,CAAC,OAKrB,EAAE,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8LiB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiC7C,IAAI,CAAC,SAAS,iCAAM,OAAO,KAAE,SAAS,EAAE,SAAS,IAAG,GAAG,CAAC;AAE7D,MAAM,SAAS,GAAG,CAAC,KAAc,EAAE,EAAE,CACnC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAElG,MAAM,UAAU,GAAG,KAAK,CAAC;AAEzB,MAAM,YAAY,GAAG,CAAC,UAA6B,EAAE,EAAE,CAAC;IACtD,GAAG,IAAI,GAAG,CACR,UAAU,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAC5B,MAAM;QACJ,CAAC,CAAC,IAAA,wBAAW,EAAC,MAAM,CAAC;aAChB,SAAS,CAAC,OAAO,CAAC,sBAAS,CAAC;aAC5B,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,eAAC,OAAA,MAAA,MAAA,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,0CAAG,CAAC,CAAC,mCAAI,EAAE,CAAA,EAAA,CAAC;aACtD,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,UAAU,CAAC;QAC9C,CAAC,CAAC,EAAE,CACP,CACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAqB,EAAE,EAAE;IAC5C,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAC;IAE/B,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;QAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QAErE,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,OAAO,KAAK,CAAC;QAEhC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEd,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAE,EAAE,CAClC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAClB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;IAC7G,CAAC,CAAC,EAAE,CAAC;AAET,MAAM,OAAO,GAAG,CAAO,OAA4D,EAAE,EAAE;IACrF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAkB,EAAE,CAAC;IAEjC,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAErC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC3C,MAAM,IAAA,iBAAS,EAAC,IAAI,EAAE,GAAG,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;YAC5D,MAAM,IAAI,CAAC,QAAQ,CAAC,eAAO,CAAC,CAAC;YAE7B,MAAM,KAAK,GAAG,CAAC,MAAM,IAAI,CAAC,QAAQ,CAChC,YAAY,CAAC;gBACX,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,GAAG,EAAE,KAAK,CAAC,GAAG;gBACd,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,UAAU,EAAE,KAAK,CAAC,UAAU;aAC7B,CAAC,CACH,CAAY,CAAC;YACd,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;YAEvD,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCAAM,KAAK,KAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAG,CAAC,CAAC,CAAC;QACvG,CAAC;IACH,CAAC;YAAS,CAAC;QACT,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAA,CAAC;AAEF;;;;GAIG;AACI,MAAM,cAAc,GAAG,CAAO,OAKpC,EAGC,EAAE;;IACF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,OAAO,CAAC,UAAU,mCAAI,oBAAU,CAAC;IAEzD,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAEjF,IAAI,CAAC,CAAC,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;QAClC,OAAO,EAAE,WAAW,EAAE,8EAA8E,EAAE,CAAC;IAEzG,MAAM,KAAK,GAAG,IAAA,uBAAe,EAAC,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC,CAAC;IACvE,MAAM,MAAM,GAAG,MAAM,IAAA,0BAAkB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;IAEnF,IAAI,CAAC;QACH,MAAM,MAAM,CAAC,MAAM,EAAE,CAAC;QAEtB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAA,MAAM,CAAC,UAAU,0CAAE,OAAO,EAAiB,CAAC;QAC7D,MAAM,IAAI,GAAG,oBAAoB,IAAI,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,IAAA,oCAAmB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QACvD,MAAM,MAAM,GAAY,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAkB,EAAE,CAAC;QACjC,MAAM,KAAK,GAAmB,EAAE,CAAC;QACjC,MAAM,YAAY,GAAkB,EAAE,CAAC;QACvC,KAAK,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC;YAC9C,MAAM,KAAK,GAA6B,EAAE,CAAC;YAE3C,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YAE9C,IAAI,CAAC,KAAK;gBAAE,SAAS;YAErB,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YAE3E,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;gBAC/B,MAAM,GAAG,GAAG,IAAA,2BAAS,EAAC,IAAI,CAAC,CAAC;gBAC5B,MAAM,MAAM,GAAG,MAAM,MAAM;qBACxB,aAAa,CAAC,IAAA,kCAAiB,EAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;qBACtE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAoB,EAAE,CAAC,CAAC;qBACpD,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gBAElG,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;oBACtB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;wBAC/B,MAAM,CAAC,IAAI,CAAC;4BACV,IAAI,EAAE,QAAQ;4BACd,OAAO;4BACP,IAAI,EAAE,GAAG;4BACT,KAAK,EAAE,GAAG;4BACV,IAAI,EAAE,GAAG;4BACT,IAAI,EAAE,GAAG;4BACT,MAAM,EAAE,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE;4BACzC,MAAM;yBACP,CAAC,CAAC;oBAEL,SAAS;gBACX,CAAC;gBAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;gBAEzC,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,0CAAE,IAAI,CAAC,CAAC;gBAEjD,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;oBAAE,SAAS;gBAE5C,MAAM,MAAM,GACV,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,KAAI,OAAO,UAAU,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpG,MAAM,IAAI,GAAG,IAAA,0BAAY,EAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,EAAE,MAAM,CAAC,CAAC;gBAEpD,IAAI,IAAI,EAAE,CAAC;oBACT,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC5D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAC/B,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CACpG,CAAC;oBACF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAC/B,YAAY,CAAC,IAAI,CAAC;wBAChB,IAAI,EAAE,eAAe;wBACrB,OAAO;wBACP,IAAI,EAAE,GAAG;wBACT,KAAK,EAAE,GAAG;wBACV,IAAI,EAAE,GAAG;wBACT,IAAI,EAAE,GAAG;wBACT,MAAM;wBACN,MAAM;qBACP,CAAC,CACH,CAAC;gBACJ,CAAC;gBAED,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,CAAC,CAAC;gBAC5C,MAAM,KAAK,GACT,IAAI,CAAC,KAAK,KAAK,OAAO;oBACpB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;oBACvE,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;wBACjB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;wBAClD,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;gBAExC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;oBAC3B,KAAK,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,EAAE,CAAC;wBACtC,MAAM,OAAO,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;wBACxF,MAAM,KAAK,GAAG,IAAA,kBAAW,kBAAG,MAAM,IAAK,OAAO,EAAG,CAAC;wBAElD,IAAI,KAAK,YAAY,KAAK;4BAAE,SAAS;wBAErC,MAAM,CAAC,IAAI,CAAC;4BACV,OAAO;4BACP,IAAI,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;4BACjD,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;4BAC/B,QAAQ,EAAE,IAAA,iBAAU,EAAC,KAAK,CAAC,IAAI,CAAC;4BAChC,KAAK,EAAE,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,MAAM,MAAK,SAAS;4BACvC,GAAG,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI;4BACxB,KAAK;4BACL,UAAU;yBACX,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAEnF,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAE5E,OAAO;YACL,MAAM;YACN,QAAQ,EAAE,CAAC,GAAG,YAAY,EAAE,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvG,KAAK;YACL,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;;gBAAC,OAAA,CAAC;oBAClC,OAAO,EAAE,OAAO,CAAC,OAAO;oBACxB,IAAI,EAAE,OAAO,CAAC,IAAI;oBAClB,KAAK,EAAE,OAAO,CAAC,KAAK;oBACpB,IAAI,EAAE,MAAA,OAAO,CAAC,MAAM,mCAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;oBACzE,MAAM,EAAE,OAAO,CAAC,MAAM;iBACvB,CAAC,CAAA;aAAA,CAAC;SACJ,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,IAAI,KAAK,YAAY,6BAAqB;YAAE,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QAElF,MAAM,KAAK,CAAC;IACd,CAAC;YAAS,CAAC;QACT,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;AACH,CAAC,CAAA,CAAC;AAhJW,QAAA,cAAc,kBAgJzB"}

package/src/lib/design/system/resolve-product.d.ts

@@ -0,0 +1,32 @@
+import { DesignPreset, DesignProduct } from '../paths';
+import { ProductSource } from './base';
+import { PartFile } from './product';
+import { Problem } from './problem';
+export type PartOrigin = 'product' | 'base' | 'overridden';
+export type ResolvedPart = PartFile & {
+    origin: PartOrigin;
+    source: string;
+    cssSource: string | null;
+};
+export type ResolvedProduct = ProductSource & {
+    base: ProductSource | null;
+    parts: ResolvedPart[];
+    fixtures: string | null;
+    presets: Record<string, DesignPreset>;
+    problems: Problem[];
+};
+/** The parts whose stylesheets every frame of a product draws under, in order. */
+export declare const tokenPartsOf: (config: DesignProduct) => string[];
+export declare const partKeyOf: (part: {
+    layer: string;
+    name: string;
+}) => string;
+/**
+ * A product's design system as it draws: its own parts, the base parts it does not override, the
+ * fixture set and the viewport presets, each taken from the product first and from the base second.
+ */
+export declare const resolveProduct: (options: {
+    target: string;
+    name: string;
+    config: DesignProduct;
+}) => ResolvedProduct;

package/src/lib/design/system/resolve-product.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveProduct = exports.partKeyOf = exports.tokenPartsOf = void 0;
+const fs_1 = require("fs");
+const paths_1 = require("../paths");
+const base_1 = require("./base");
+const layers_1 = require("./layers");
+const product_1 = require("./product");
+const DEFAULT_TOKEN_PARTS = ['foundations/tokens'];
+/** The parts whose stylesheets every frame of a product draws under, in order. */
+const tokenPartsOf = (config) => { var _a; return (_a = config.tokens) !== null && _a !== void 0 ? _a : DEFAULT_TOKEN_PARTS; };
+exports.tokenPartsOf = tokenPartsOf;
+const partKeyOf = (part) => `${part.layer}/${part.name}`;
+exports.partKeyOf = partKeyOf;
+const read = (file, origin) => (Object.assign(Object.assign({}, file), { origin, source: (0, fs_1.readFileSync)(file.file, 'utf8'), cssSource: file.css && (0, fs_1.existsSync)(file.css) ? (0, fs_1.readFileSync)(file.css, 'utf8') : null }));
+const hasPresets = (presets) => !!presets && Object.keys(presets).length > 0;
+/**
+ * A product's design system as it draws: its own parts, the base parts it does not override, the
+ * fixture set and the viewport presets, each taken from the product first and from the base second.
+ */
+const resolveProduct = (options) => {
+    var _a, _b;
+    const { target, name, config } = options;
+    const configFile = (0, paths_1.configPathOf)(target);
+    const dir = (0, product_1.productDirOf)({ target, product: name });
+    const own = (0, product_1.partFilesOf)(dir);
+    const loaded = config.base ? (0, base_1.loadBase)({ target, base: config.base, configFile }) : { base: null, problems: [] };
+    const base = loaded.base;
+    const inherited = base ? (0, product_1.partFilesOf)(base.dir) : { parts: [], problems: [] };
+    const hidden = new Set((_a = config.hideBaseParts) !== null && _a !== void 0 ? _a : []);
+    const ownKeys = new Set(own.parts.map(exports.partKeyOf));
+    const baseKeys = new Set(inherited.parts.map(exports.partKeyOf));
+    const parts = [
+        ...own.parts.map((part) => read(part, baseKeys.has((0, exports.partKeyOf)(part)) ? 'overridden' : 'product')),
+        ...inherited.parts
+            .filter((part) => !ownKeys.has((0, exports.partKeyOf)(part)) && !hidden.has((0, exports.partKeyOf)(part)))
+            .map((part) => read(part, 'base')),
+    ].sort((a, b) => layers_1.LAYERS.indexOf(a.layer) - layers_1.LAYERS.indexOf(b.layer) || a.name.localeCompare(b.name));
+    const basePresets = base === null || base === void 0 ? void 0 : base.config.presets;
+    const presets = hasPresets(config.presets) ? config.presets : hasPresets(basePresets) ? basePresets : {};
+    const problems = [...own.problems, ...loaded.problems, ...inherited.problems];
+    if (!hasPresets(presets)) {
+        problems.push({
+            rule: 'PRESETS',
+            file: configFile,
+            message: `product "${name}" declares no viewport presets, nor does its base`,
+        });
+    }
+    return {
+        name,
+        dir,
+        config,
+        configFile,
+        base,
+        parts,
+        fixtures: (_b = (0, product_1.fixturesOf)(dir)) !== null && _b !== void 0 ? _b : (base ? (0, product_1.fixturesOf)(base.dir) : null),
+        presets,
+        problems,
+    };
+};
+exports.resolveProduct = resolveProduct;
+//# sourceMappingURL=resolve-product.js.map

package/src/lib/design/system/resolve-product.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-product.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/resolve-product.ts"],"names":[],"mappings":"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"}

package/src/lib/design/system/rules/component-copy.d.ts

@@ -0,0 +1,7 @@
+import { Problem } from '../problem';
+import { ResolvedProduct } from '../resolve-product';
+/**
+ * An element or page that restyles a component's class in its CSS, or writes a component's class
+ * in its markup without importing that component.
+ */
+export declare const componentCopiesOf: (product: ResolvedProduct) => Problem[];

package/src/lib/design/system/rules/component-copy.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentCopiesOf = void 0;
+const css_source_1 = require("../css-source");
+const imports_1 = require("../imports");
+const ts_source_1 = require("../ts-source");
+const classAttributesOf = (text) => [...text.matchAll(/\bclass\s*=\s*["']([^"']*)/g)].flatMap((match) => { var _a; return ((_a = match[1]) !== null && _a !== void 0 ? _a : '').split(/\s+/).filter(Boolean); });
+/** Each class a component's CSS declares a selector for, with the component that owns it. */
+const ownersOf = (product) => {
+    const owners = new Map();
+    for (const part of product.parts) {
+        if (part.layer !== 'components' || !part.cssSource)
+            continue;
+        for (const name of (0, css_source_1.cssBlocksOf)(part.cssSource).selectors.flatMap(css_source_1.classesOf))
+            owners.set(name, part);
+    }
+    return owners;
+};
+const copyOf = (options) => ({
+    rule: 'COMPONENT-COPY',
+    file: options.file,
+    message: `${options.how} .${options.name} of ${(0, imports_1.partSpecifierOf)(options.owner)} - import the component instead`,
+});
+/**
+ * An element or page that restyles a component's class in its CSS, or writes a component's class
+ * in its markup without importing that component.
+ */
+const componentCopiesOf = (product) => {
+    const owners = ownersOf(product);
+    const ownerOf = (name) => owners.get(name);
+    return product.parts
+        .filter((part) => part.layer === 'elements' || part.layer === 'pages')
+        .flatMap((part) => {
+        const imported = new Set((0, imports_1.partDependenciesOf)(part).map((dependency) => dependency.specifier));
+        const styled = part.css && part.cssSource ? (0, css_source_1.cssBlocksOf)(part.cssSource).selectors.flatMap(css_source_1.classesOf) : [];
+        const written = (0, ts_source_1.textsOf)(part.source).flatMap(classAttributesOf);
+        return [
+            ...[...new Set(styled)].flatMap((name) => {
+                var _a;
+                const owner = ownerOf(name);
+                return owner ? [copyOf({ file: (_a = part.css) !== null && _a !== void 0 ? _a : part.file, name, owner, how: 'restyles' })] : [];
+            }),
+            ...[...new Set(written)].flatMap((name) => {
+                const owner = ownerOf(name);
+                return owner && !imported.has((0, imports_1.partSpecifierOf)(owner))
+                    ? [copyOf({ file: part.file, name, owner, how: 'writes' })]
+                    : [];
+            }),
+        ];
+    });
+};
+exports.componentCopiesOf = componentCopiesOf;
+//# sourceMappingURL=component-copy.js.map

package/src/lib/design/system/rules/component-copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-copy.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/lib/design/system/rules/component-copy.ts"],"names":[],"mappings":"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"}

package/src/lib/design/system/rules/flow.d.ts

@@ -0,0 +1,8 @@
+import { Problem } from '../problem';
+import { ResolvedProduct } from '../resolve-product';
+/**
+ * A flow file that cannot be read, a frame whose part or state is gone (a part that exists only as a sketch
+ * counts with the states of its first variant), a line between states the flow does not show,
+ * and two free notes with one id.
+ */
+export declare const flowProblemsOf: (product: ResolvedProduct) => Problem[];