@koobiq/components 21.0.0 → 21.1.0

package/schematics/ng-add/{index.js → index.cjs}

@@ -7,272 +7,14 @@ var tasks = require('@angular-devkit/schematics/tasks');
 var utility = require('@schematics/angular/utility');
 var app_config = require('@schematics/angular/utility/standalone/app_config');
 var util = require('@schematics/angular/utility/standalone/util');
-var rxjs = require('rxjs');
 var ts = require('@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript');
-var utils_messages = require('../utils/messages.js');
-var utils_packageConfig = require('../package-config-BhU2TfC8.js');
-
-const KNOWN_THEME_CLASSES = ['kbq-app-background', 'kbq-light', 'kbq-dark'];
-const COMMENT_START = '<!--';
-const COMMENT_END = '-->';
-/**
- * Index of the `<` starting a real `<body` tag — one that isn't inside an HTML comment (e.g. a
- * pasted Google Tag Manager snippet mentioning `<body>` in its install instructions) — or `-1`.
- * Walks the string once rather than matching `<body` with a regex, so a comment can't be mistaken
- * for the element.
- */
-function findBodyTagStart(html) {
-    const lower = html.toLowerCase();
-    let i = 0;
-    while (i < html.length) {
-        if (lower.startsWith(COMMENT_START, i)) {
-            const end = lower.indexOf(COMMENT_END, i + COMMENT_START.length);
-            i = end === -1 ? html.length : end + COMMENT_END.length;
-            continue;
-        }
-        if (lower.startsWith('<body', i) && (html[i + 5] === undefined || /[\s/>]/.test(html[i + 5]))) {
-            return i;
-        }
-        i++;
-    }
-    return -1;
-}
-/**
- * Index of the `>` that closes the tag starting at `tagStart`, tracking open quotes so a `>`
- * inside a quoted attribute value (`<body data-x="a>b">`) doesn't end the tag early. `-1` if the
- * tag is never closed.
- */
-function findTagEnd(html, tagStart) {
-    let quote = null;
-    for (let i = tagStart + 1; i < html.length; i++) {
-        const char = html[i];
-        if (quote) {
-            if (char === quote)
-                quote = null;
-        }
-        else if (char === '"' || char === "'") {
-            quote = char;
-        }
-        else if (char === '>') {
-            return i;
-        }
-    }
-    return -1;
-}
-/**
- * Parses the attributes of the tag whose content spans `[start, end)` (between `<body` and the
- * closing `>`), handling double-quoted, single-quoted and unquoted values — so a single-quoted
- * `class` attribute is found exactly like a double-quoted one, instead of only the latter matching.
- */
-function parseAttrs(html, start, end) {
-    const attrs = [];
-    const isSpace = (char) => /\s/.test(char);
-    let i = start;
-    while (i < end) {
-        while (i < end && (isSpace(html[i]) || html[i] === '/'))
-            i++;
-        if (i >= end)
-            break;
-        const nameStart = i;
-        while (i < end && !isSpace(html[i]) && html[i] !== '=' && html[i] !== '/' && html[i] !== '>')
-            i++;
-        if (i === nameStart) {
-            i++;
-            continue;
-        }
-        const name = html.slice(nameStart, i);
-        while (i < end && isSpace(html[i]))
-            i++;
-        let value = '';
-        let attrEnd = i;
-        if (html[i] === '=') {
-            i++;
-            while (i < end && isSpace(html[i]))
-                i++;
-            const quote = html[i] === '"' || html[i] === "'" ? html[i] : null;
-            if (quote) {
-                i++;
-                const valueStart = i;
-                while (i < end && html[i] !== quote)
-                    i++;
-                value = html.slice(valueStart, i);
-                if (i < end)
-                    i++;
-            }
-            else {
-                const valueStart = i;
-                while (i < end && !isSpace(html[i]) && html[i] !== '>')
-                    i++;
-                value = html.slice(valueStart, i);
-            }
-            attrEnd = i;
-        }
-        attrs.push({ name, start: nameStart, end: attrEnd, value });
-    }
-    return attrs;
-}
-/**
- * Sets the Koobiq theme classes on the app's `<body>` tag.
- *
- * `'light'`/`'dark'` get the full `kbq-app-background kbq-{theme}` pair from the theming guide —
- * `kbq-app-background` paints the page's own background/text color, `kbq-{theme}` picks the theme.
- * `'auto'` only gets `kbq-app-background`: `KbqThemeService` applies `kbq-light`/`kbq-dark` to
- * `document.body` itself at runtime, so a static class here would just go stale before the app
- * bootstraps, or fight the service once it does.
- *
- * Re-running is idempotent: any class this function manages is stripped from the existing `class`
- * value first, so switching `theme` between runs doesn't leave a stale `kbq-light` sitting next to
- * a newly added `kbq-dark`. Any other existing classes, and their relative order, are preserved.
- *
- * Locates the `<body>` tag and its `class` attribute with a small hand-written scanner rather than
- * a `<body>`/`class` regex-and-`String.replace`, so quoting style (`'`, `"`, or none), a `>` inside
- * an unrelated attribute's value, an attribute merely named `data-class`, a `<body` mentioned inside
- * a comment, and `$`-containing values already on the tag can't corrupt the result. Deliberately
- * doesn't pull in a full HTML parser (e.g. `parse5`) for this: it's the only thing in this package
- * that would need one, and this package is distributed as a dependency of `@koobiq/components`,
- * where an extra runtime `dependencies` entry isn't worth it for one small, well-tested edit.
- */
-function setKoobiqThemeBodyClass(html, theme) {
-    const tagStart = findBodyTagStart(html);
-    if (tagStart === -1)
-        return { content: html, changed: false };
-    const tagEnd = findTagEnd(html, tagStart);
-    if (tagEnd === -1)
-        return { content: html, changed: false };
-    const attrs = parseAttrs(html, tagStart + '<body'.length, tagEnd);
-    const classAttr = attrs.find((attr) => attr.name.toLowerCase() === 'class');
-    const existingClasses = classAttr ? classAttr.value.split(/\s+/).filter(Boolean) : [];
-    const keptClasses = existingClasses.filter((cls) => !KNOWN_THEME_CLASSES.includes(cls));
-    const newClasses = theme === 'auto'
-        ? [...keptClasses, 'kbq-app-background']
-        : [...keptClasses, 'kbq-app-background', `kbq-${theme}`];
-    const newClassValue = newClasses.join(' ');
-    if (classAttr) {
-        if (classAttr.value === newClassValue)
-            return { content: html, changed: false };
-        const updated = html.slice(0, classAttr.start) + `class="${newClassValue}"` + html.slice(classAttr.end);
-        return { content: updated, changed: true };
-    }
-    const updated = html.slice(0, tagEnd) + ` class="${newClassValue}"` + html.slice(tagEnd);
-    return { content: updated, changed: true };
-}
-
-/**
- * Whether `project` is an application (as opposed to a library) — the same check
- * `@schematics/angular` itself uses (see `utility/workspace.js`'s `createDefaultPath`), rather than
- * an allowlist of builder names. A project can sit on any builder — a custom webpack wrapper, an Nx
- * executor, one this schematic has never heard of — and still be a perfectly good application; only
- * `projectType` reliably says so.
- */
-function isApplicationProject(project) {
-    return project.extensions['projectType'] === 'application';
-}
-const KOOBIQ_STATIC_STYLE_ENTRIES = [
-    'node_modules/@koobiq/icons/fonts/kbq-icons.css',
-    'node_modules/@koobiq/design-tokens/web/css-tokens.css',
-    'node_modules/@koobiq/components/prebuilt-themes/theme.css'
-];
-const THEME_TOKENS_PATTERN = /^node_modules\/@koobiq\/design-tokens\/web\/css-tokens-(light|dark)\.css$/;
-/**
- * The style entries documented in the installation guide, in the order they must be loaded.
- * `'auto'` includes both token files, since `KbqThemeService` switches between them at runtime —
- * a static `'light'`/`'dark'` choice only needs its own.
- *
- * `@koobiq/design-tokens` ships code-block, scrollbar and skeleton's tokens as opt-in
- * `component-tokens*.css` files, but `prebuilt-themes/theme.css` already carries their values,
- * baked in at `@koobiq/components`' own build time — nothing extra to wire here for them.
- */
-function getKoobiqStyleEntries(theme) {
-    const [icons, tokens, prebuiltTheme] = KOOBIQ_STATIC_STYLE_ENTRIES;
-    const themeTokens = theme === 'auto' ? [
-        'node_modules/@koobiq/design-tokens/web/css-tokens-light.css',
-        'node_modules/@koobiq/design-tokens/web/css-tokens-dark.css'
-    ] : [`node_modules/@koobiq/design-tokens/web/css-tokens-${theme}.css`];
-    return [icons, tokens, ...themeTokens, prebuiltTheme];
-}
-/**
- * Prepends the Koobiq style entries ahead of whatever is already in `existingStyles`, matching the
- * order documented in installation.md, where the app's own stylesheet comes last. Re-running with
- * the same theme is a no-op; re-running with a different theme swaps the `css-tokens-*.css`
- * entries instead of accumulating duplicates. Non-string entries (style-budget objects) and any
- * unrelated entries are preserved, untouched, in their original order.
- */
-function mergeKoobiqStyles(existingStyles, theme) {
-    const desired = getKoobiqStyleEntries(theme);
-    const rest = existingStyles.filter((entry) => {
-        if (typeof entry !== 'string')
-            return true;
-        return (!desired.includes(entry) &&
-            !KOOBIQ_STATIC_STYLE_ENTRIES.includes(entry) &&
-            !THEME_TOKENS_PATTERN.test(entry));
-    });
-    return [...desired, ...rest];
-}
-/**
- * Resolves the workspace-root-relative path of a project's index.html, mirroring the
- * `@angular/build:application` builder's own default (`<sourceRoot>/index.html`) when the
- * `index` option isn't set explicitly. `buildTarget` is `undefined` for a project with no `build`
- * target at all, in which case the default is the only option available.
- */
-function getIndexHtmlPath(project, buildTarget) {
-    const indexOption = buildTarget?.options?.index;
-    if (typeof indexOption === 'string') {
-        return indexOption;
-    }
-    if (indexOption && typeof indexOption === 'object' && !Array.isArray(indexOption)) {
-        const input = indexOption.input;
-        if (typeof input === 'string') {
-            return input;
-        }
-    }
-    const sourceRoot = project.sourceRoot ?? `${project.root}/src`;
-    return `${sourceRoot}/index.html`;
-}
-/**
- * Whether a `build` target's `server`/`ssr` options indicate the project renders on the server —
- * `KbqThemeCookieStore` matters there, where `KbqThemeLocalStorageStore`'s default doesn't reach
- * the server render.
- */
-function isSsrBuildTarget(buildTarget) {
-    const { server, ssr } = buildTarget.options ?? {};
-    return Boolean((typeof server === 'string' && server) || ssr === true || (ssr && typeof ssr === 'object'));
-}
-/**
- * Mutates `workspace` in place: for every application project (optionally scoped to
- * `projectName`), merges the Koobiq style entries for `theme` into its `build` target's `styles`
- * array, when it has one. Returns per-project wiring info the caller uses to edit index.html and
- * the project's bootstrap file afterward — for every application project, regardless of whether it
- * had a `build` target to wire styles into, since the bootstrap file (and thus the theme providers)
- * is resolved independently of it.
- *
- * Only the target literally named `build` is touched — not `test` (Karma) or `serve` — keeping the
- * change's blast radius minimal.
- */
-function applyKoobiqWorkspaceStyles(workspace, theme, projectName) {
-    const wired = [];
-    for (const [name, project] of workspace.projects) {
-        if (projectName && name !== projectName)
-            continue;
-        if (!isApplicationProject(project))
-            continue;
-        const buildTarget = project.targets.get('build');
-        let stylesWired = false;
-        if (buildTarget) {
-            const options = buildTarget.options ?? (buildTarget.options = {});
-            const existingStyles = Array.isArray(options.styles) ? options.styles : [];
-            options.styles = mergeKoobiqStyles(existingStyles, theme);
-            stylesWired = true;
-        }
-        wired.push({
-            projectName: name,
-            projectRoot: project.root,
-            indexHtmlPath: getIndexHtmlPath(project, buildTarget),
-            isSsr: buildTarget ? isSsrBuildTarget(buildTarget) : false,
-            stylesWired
-        });
-    }
-    return wired;
-}
+var utils_htmlConfig = require('../utils/html-config.cjs');
+var utils_messages = require('../utils/messages.cjs');
+var utils_packageConfig = require('../utils/package-config.cjs');
+var utils_safeRule = require('../utils/safe-rule.cjs');
+var utils_workspaceStyles = require('../utils/workspace-styles.cjs');
+require('../utils/project-files.cjs');
+require('rxjs');
 
 function noProject(project) {
     return `Unable to find project '${project}' in the workspace`;
@@ -320,7 +62,7 @@ function ssrSuggestion() {
 function fontsSuggestion() {
     return [
         'Koobiq recommends the Inter and JetBrains Mono fonts.',
-        'See https://koobiq.io/en/main/typography for installation options (Fontsource or Google Fonts CDN).'
+        'See https://koobiq.io/en/main/typography for installation options (npm packages or self-hosted files).'
     ];
 }
 
@@ -388,22 +130,6 @@ function replaceNode(tree, providers, node, text) {
     const end = node.getEnd();
     tree.overwrite(providers.filePath, content.slice(0, start) + text + content.slice(end));
 }
-/**
- * Runs `rule` against `tree` and swallows any error it throws, logging `fallbackMessage` instead.
- * Only ever used for the case `resolveProviders` has already told us to expect: a bootstrap it
- * couldn't statically analyze, where `addRootProvider` is expected to fail the same way. Any other,
- * genuinely unexpected error is left to propagate instead of being silently turned into a warning.
- */
-function safeRule(rule, fallbackMessage) {
-    return async (tree, context) => {
-        try {
-            await rxjs.firstValueFrom(schematics.callRule(rule, tree, context));
-        }
-        catch {
-            utils_messages.logMessage(context.logger, fallbackMessage);
-        }
-    };
-}
 /** `addRootProvider` rule inserting the `kbqThemeProvider({ ... })` call built by `themeProviderCallText`. */
 function themeProviderRule(projectName, theme) {
     return utility.addRootProvider(projectName, ({ code, external }) => {
@@ -458,15 +184,15 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^21.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^21.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^21.1.0");
         // `@koobiq/angular-luxon-adapter` is a wrapper: it extends `LuxonDateAdapter` from the base
         // package and re-exports its formats, both as value imports. That makes the base a mandatory
         // peer of the wrapper, and installing a package without its mandatory peers only works on
         // npm — Yarn leaves them out, so the application ends up unable to resolve the adapter.
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/luxon-date-adapter', "^3.5.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.5.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.7.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.5.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^12.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^12.5.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^4.1.0");
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.7.2");
         // `overlayscrollbars` is a mandatory peer too: `@koobiq/components/scrollbar` imports it
@@ -479,7 +205,7 @@ function ngAdd(options) {
         // Wiring styles: prepend the documented style entries to every application project's
         // `build` target (or just `project`, when given), then apply the theme class to each
         // project's index.html.
-        const wiredProjects = applyKoobiqWorkspaceStyles(workspace, theme, project);
+        const wiredProjects = utils_workspaceStyles.applyKoobiqWorkspaceStyles(workspace, theme, project);
         await utility.writeWorkspace(tree, workspace);
         if (wiredProjects.length === 0) {
             utils_messages.logMessage(context.logger, noWiredProjects());
@@ -488,7 +214,7 @@ function ngAdd(options) {
         let sawSsrProject = false;
         for (const wired of wiredProjects) {
             if (tree.exists(wired.indexHtmlPath)) {
-                const { content, changed } = setKoobiqThemeBodyClass(tree.read(wired.indexHtmlPath).toString('utf-8'), theme);
+                const { content, changed } = utils_htmlConfig.setKoobiqThemeBodyClass(tree.read(wired.indexHtmlPath).toString('utf-8'), theme);
                 if (changed)
                     tree.overwrite(wired.indexHtmlPath, content);
             }
@@ -523,9 +249,9 @@ function ngAdd(options) {
                 // bootstrap, a missing `build` target, ...) — `addRootProvider` is expected to fail
                 // for the same reason, so route it through `safeRule` and tell the user to wire the
                 // provider up by hand instead.
-                providerRules.push(safeRule(themeProviderRule(wired.projectName, theme), themeProviderFallback(wired.projectName, theme)));
+                providerRules.push(utils_safeRule.safeRule(themeProviderRule(wired.projectName, theme), themeProviderFallback(wired.projectName, theme)));
                 if (theme === 'auto') {
-                    providerRules.push(safeRule(themeServiceInitializerRule(wired.projectName), themeServiceFallback(wired.projectName)));
+                    providerRules.push(utils_safeRule.safeRule(themeServiceInitializerRule(wired.projectName), themeServiceFallback(wired.projectName)));
                 }
             }
         }

package/schematics/utils/{angular-parsing.js → angular-parsing.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
 var ts = require('typescript');
-var utils_ast = require('./ast.js');
-var utils_typescript = require('./typescript.js');
+var utils_ast = require('./ast.cjs');
+var utils_typescript = require('./typescript.cjs');
 
 /**
  * Update separate html file

package/schematics/utils/custom-data.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var schematics = require('@angular-devkit/schematics');
+var fs = require('fs');
+var path = require('path');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+
+const MAPPING_EXAMPLE = '[{ "replace": "kbq-add-to-list_16", "replaceWith": "kbq-file-plus-o_16" }]';
+function readCustomJson(tree, filePath, bases = ['/']) {
+    for (const base of bases) {
+        const candidate = path__namespace.posix.join(base, filePath);
+        if (tree.exists(candidate)) {
+            return JSON.parse(tree.readText(candidate));
+        }
+    }
+    const absolutePath = path__namespace.resolve(filePath);
+    if (!fs.existsSync(absolutePath)) {
+        throw new schematics.SchematicsException(`Unable to find '${filePath}' in the workspace or at '${absolutePath}'`);
+    }
+    return JSON.parse(fs.readFileSync(absolutePath, 'utf-8'));
+}
+function readCustomIconMapping(tree, filePath, logger, bases) {
+    const entries = readCustomJson(tree, filePath, bases);
+    const invalid = () => new schematics.SchematicsException(`'${filePath}' must hold a JSON array of icon pairs, for example ${MAPPING_EXAMPLE}`);
+    if (!Array.isArray(entries)) {
+        throw invalid();
+    }
+    let legacyShape = false;
+    const pairs = entries.map((entry) => {
+        if (typeof entry?.replace === 'string' && typeof entry?.replaceWith === 'string') {
+            return { from: entry.replace, to: entry.replaceWith };
+        }
+        if (typeof entry?.from === 'string' && typeof entry?.to === 'string') {
+            legacyShape = true;
+            return { from: entry.from, to: entry.to };
+        }
+        throw invalid();
+    });
+    if (legacyShape) {
+        logger.warn(`'${filePath}' uses the deprecated { "from", "to" } pairs; write them as { "replace", "replaceWith" }, for example ${MAPPING_EXAMPLE}`);
+    }
+    return pairs;
+}
+
+exports.readCustomIconMapping = readCustomIconMapping;
+exports.readCustomJson = readCustomJson;

package/schematics/utils/{deprecated-path-migration.js → deprecated-path-migration.cjs}

@@ -1,7 +1,8 @@
 'use strict';
 
-var utils_messages = require('./messages.js');
-var utils_packageConfig = require('../package-config-BhU2TfC8.js');
+var utils_messages = require('./messages.cjs');
+var utils_packageConfig = require('./package-config.cjs');
+var utils_projectFiles = require('./project-files.cjs');
 require('@angular-devkit/schematics');
 require('@schematics/angular/utility');
 
@@ -34,7 +35,7 @@ function deprecatedPathMigration(entryPoint) {
         const root = projectDefinition?.root ?? '';
         const rootDir = root ? tree.getDir(root) : tree.root;
         let touched = 0;
-        utils_packageConfig.visitProjectFiles(rootDir, (filePath, entry) => {
+        utils_projectFiles.visitProjectFiles(rootDir, (filePath, entry) => {
             if (!filePath.endsWith(TS_EXT))
                 return;
             const originalContent = entry?.content.toString();

package/schematics/utils/html-config.cjs

@@ -0,0 +1,148 @@
+'use strict';
+
+const KNOWN_THEME_CLASSES = ['kbq-app-background', 'kbq-light', 'kbq-dark'];
+const COMMENT_START = '<!--';
+const COMMENT_END = '-->';
+/**
+ * Index of the `<` starting a real `<body` tag — one that isn't inside an HTML comment (e.g. a
+ * pasted Google Tag Manager snippet mentioning `<body>` in its install instructions) — or `-1`.
+ * Walks the string once rather than matching `<body` with a regex, so a comment can't be mistaken
+ * for the element.
+ */
+function findBodyTagStart(html) {
+    const lower = html.toLowerCase();
+    let i = 0;
+    while (i < html.length) {
+        if (lower.startsWith(COMMENT_START, i)) {
+            const end = lower.indexOf(COMMENT_END, i + COMMENT_START.length);
+            i = end === -1 ? html.length : end + COMMENT_END.length;
+            continue;
+        }
+        if (lower.startsWith('<body', i) && (html[i + 5] === undefined || /[\s/>]/.test(html[i + 5]))) {
+            return i;
+        }
+        i++;
+    }
+    return -1;
+}
+/**
+ * Index of the `>` that closes the tag starting at `tagStart`, tracking open quotes so a `>`
+ * inside a quoted attribute value (`<body data-x="a>b">`) doesn't end the tag early. `-1` if the
+ * tag is never closed.
+ */
+function findTagEnd(html, tagStart) {
+    let quote = null;
+    for (let i = tagStart + 1; i < html.length; i++) {
+        const char = html[i];
+        if (quote) {
+            if (char === quote)
+                quote = null;
+        }
+        else if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === '>') {
+            return i;
+        }
+    }
+    return -1;
+}
+/**
+ * Parses the attributes of the tag whose content spans `[start, end)` (between `<body` and the
+ * closing `>`), handling double-quoted, single-quoted and unquoted values — so a single-quoted
+ * `class` attribute is found exactly like a double-quoted one, instead of only the latter matching.
+ */
+function parseAttrs(html, start, end) {
+    const attrs = [];
+    const isSpace = (char) => /\s/.test(char);
+    let i = start;
+    while (i < end) {
+        while (i < end && (isSpace(html[i]) || html[i] === '/'))
+            i++;
+        if (i >= end)
+            break;
+        const nameStart = i;
+        while (i < end && !isSpace(html[i]) && html[i] !== '=' && html[i] !== '/' && html[i] !== '>')
+            i++;
+        if (i === nameStart) {
+            i++;
+            continue;
+        }
+        const name = html.slice(nameStart, i);
+        while (i < end && isSpace(html[i]))
+            i++;
+        let value = '';
+        let attrEnd = i;
+        if (html[i] === '=') {
+            i++;
+            while (i < end && isSpace(html[i]))
+                i++;
+            const quote = html[i] === '"' || html[i] === "'" ? html[i] : null;
+            if (quote) {
+                i++;
+                const valueStart = i;
+                while (i < end && html[i] !== quote)
+                    i++;
+                value = html.slice(valueStart, i);
+                if (i < end)
+                    i++;
+            }
+            else {
+                const valueStart = i;
+                while (i < end && !isSpace(html[i]) && html[i] !== '>')
+                    i++;
+                value = html.slice(valueStart, i);
+            }
+            attrEnd = i;
+        }
+        attrs.push({ name, start: nameStart, end: attrEnd, value });
+    }
+    return attrs;
+}
+/**
+ * Sets the Koobiq theme classes on the app's `<body>` tag.
+ *
+ * `'light'`/`'dark'` get the full `kbq-app-background kbq-{theme}` pair from the theming guide —
+ * `kbq-app-background` paints the page's own background/text color, `kbq-{theme}` picks the theme.
+ * `'auto'` only gets `kbq-app-background`: `KbqThemeService` applies `kbq-light`/`kbq-dark` to
+ * `document.body` itself at runtime, so a static class here would just go stale before the app
+ * bootstraps, or fight the service once it does.
+ *
+ * Re-running is idempotent: any class this function manages is stripped from the existing `class`
+ * value first, so switching `theme` between runs doesn't leave a stale `kbq-light` sitting next to
+ * a newly added `kbq-dark`. Any other existing classes, and their relative order, are preserved.
+ *
+ * Locates the `<body>` tag and its `class` attribute with a small hand-written scanner rather than
+ * a `<body>`/`class` regex-and-`String.replace`, so quoting style (`'`, `"`, or none), a `>` inside
+ * an unrelated attribute's value, an attribute merely named `data-class`, a `<body` mentioned inside
+ * a comment, and `$`-containing values already on the tag can't corrupt the result. Deliberately
+ * doesn't pull in a full HTML parser (e.g. `parse5`) for this: it's the only thing in this package
+ * that would need one, and this package is distributed as a dependency of `@koobiq/components`,
+ * where an extra runtime `dependencies` entry isn't worth it for one small, well-tested edit.
+ */
+function setKoobiqThemeBodyClass(html, theme) {
+    const tagStart = findBodyTagStart(html);
+    if (tagStart === -1)
+        return { content: html, changed: false };
+    const tagEnd = findTagEnd(html, tagStart);
+    if (tagEnd === -1)
+        return { content: html, changed: false };
+    const attrs = parseAttrs(html, tagStart + '<body'.length, tagEnd);
+    const classAttr = attrs.find((attr) => attr.name.toLowerCase() === 'class');
+    const existingClasses = classAttr ? classAttr.value.split(/\s+/).filter(Boolean) : [];
+    const keptClasses = existingClasses.filter((cls) => !KNOWN_THEME_CLASSES.includes(cls));
+    const newClasses = theme === 'auto'
+        ? [...keptClasses, 'kbq-app-background']
+        : [...keptClasses, 'kbq-app-background', `kbq-${theme}`];
+    const newClassValue = newClasses.join(' ');
+    if (classAttr) {
+        if (classAttr.value === newClassValue)
+            return { content: html, changed: false };
+        const updated = html.slice(0, classAttr.start) + `class="${newClassValue}"` + html.slice(classAttr.end);
+        return { content: updated, changed: true };
+    }
+    const updated = html.slice(0, tagEnd) + ` class="${newClassValue}"` + html.slice(tagEnd);
+    return { content: updated, changed: true };
+}
+
+exports.setKoobiqThemeBodyClass = setKoobiqThemeBodyClass;

package/schematics/utils/{icon-migration.js → icon-migration.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
 var ts = require('typescript');
-var utils_ast = require('./ast.js');
-var utils_typescript = require('./typescript.js');
+var utils_ast = require('./ast.cjs');
+var utils_typescript = require('./typescript.cjs');
 
 function escapeRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -178,6 +178,9 @@ function createIconTemplateTransform(data, tokenMap, opts) {
         utils_ast.visitAll(visitor, parsed.tree.rootNodes);
         const edits = [];
         const allFound = [];
+        const iconHostTokenMap = data.scopeClassOnIconHost === undefined || data.scopeClassOnIconHost === data.scopeClassInList
+            ? tokenMap
+            : new Map(tokenMap).set(data.scope.from, data.scopeClassOnIconHost === 'remove' ? null : data.scope.to);
         const resolveValueToken = (token) => {
             if (tokenMap.has(token)) {
                 return tokenMap.get(token);
@@ -191,6 +194,9 @@ function createIconTemplateTransform(data, tokenMap, opts) {
             opts.warn(`${message}${(fileName && ' File: ' + fileName) || ''}`);
         };
         for (const el of visitor.elementsToMigrate) {
+            const classTokenMap = el.attrs.some((attr) => data.valueAttrs.includes(utils_ast.getSimpleAttributeName(attr.name)))
+                ? iconHostTokenMap
+                : tokenMap;
             for (const attr of el.attrs) {
                 if (!attr.valueSpan) {
                     continue;
@@ -223,7 +229,7 @@ function createIconTemplateTransform(data, tokenMap, opts) {
                 }
                 if (simpleName === 'class' && !attr.name.startsWith('[')) {
                     const found = [];
-                    const newValue = utils_ast.replaceTokenList(attr.value, exactTokenLookup(tokenMap, found));
+                    const newValue = utils_ast.replaceTokenList(attr.value, exactTokenLookup(classTokenMap, found));
                     if (newValue !== undefined) {
                         edits.push({
                             start: attr.valueSpan.start.offset,
@@ -235,8 +241,8 @@ function createIconTemplateTransform(data, tokenMap, opts) {
                     continue;
                 }
                 const bindingToken = utils_ast.getClassBindingToken(simpleName);
-                if (bindingToken !== undefined && tokenMap.has(bindingToken)) {
-                    const replacement = tokenMap.get(bindingToken);
+                if (bindingToken !== undefined && classTokenMap.has(bindingToken)) {
+                    const replacement = classTokenMap.get(bindingToken);
                     if (replacement) {
                         const newSimpleName = simpleName.replace(new RegExp(`\\.${escapeRegExp(bindingToken)}$`), `.${replacement}`);
                         const newName = attr.name.startsWith('[') ? `[${newSimpleName}]` : newSimpleName;

package/schematics/utils/list-item-pattern.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+/**
+ * The source of a RegExp that matches `item` (a RegExp source) together with one of its commas when it is an element
+ * of a `[…]` or `{…}` list: the comma before it, or the one after it when it comes first. Deleting the match leaves
+ * the list well-formed and the rest of the file untouched. An inline `type` modifier goes with a list element;
+ * outside a list, `item` is matched alone.
+ */
+function listItemPattern(item) {
+    const element = `(?:\\btype\\s+)?(?:${item})`;
+    const withCommaBefore = `,\\s*${element}(?=\\s*[,\\]}])`;
+    const firstOrOnly = `(?<=[\\[{]\\s*)${element}(?:\\s*,\\s*|(?=\\s*[\\]}]))`;
+    return `(?:${withCommaBefore}|${firstOrOnly}|(?:${item}))`;
+}
+
+exports.listItemPattern = listItemPattern;