mlola-ui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",
   "bin": {

package/registry/agents.json

@@ -233,7 +233,7 @@
     },
     {
       "name": "ml-brand-mark",
-      "note": ""
+      "note": "A brand's own logo takes the mark's place: no chip, the text color, the mark's size."
     },
     {
       "name": "ml-brand-name",

package/registry/agents.md

@@ -42,7 +42,8 @@ Set `data-theme` and `data-mode` on any ancestor. Nothing else changes.
 | `aerogel` | Aerogel Glass |
 | `nordic` | Nordic Earth |
 
-`data-mode` is `light` or `dark`.
+`data-mode` is `light`, `dark`, or `system`, which follows the reader's own setting.
+The themes' type reads `--font-inter`, `--font-newsreader` and `--font-jetbrains` before its fallbacks: load those fonts (next/font's `variable` option, or @font-face) and set the variables on the root, or the page uses the system's fonts.
 
 A project defines its own theme in one file, `mlola.theme.json`, which
 overrides fonts, colors, geometry, the spacing and type scale, and any
@@ -129,6 +130,7 @@ component, so a page built from them themes with the rest.
 
 `.ml-actions` `.ml-brand` `.ml-brand-mark` `.ml-brand-name` `.ml-chart` `.ml-chart-bar` `.ml-chart-bars` `.ml-chart-heading` `.ml-check-list` `.ml-cluster` `.ml-definition-list` `.ml-display` `.ml-divider` `.ml-empty-state` `.ml-eyebrow` `.ml-filter-chip` `.ml-filter-group` `.ml-fine-print` `.ml-form` `.ml-form-message` `.ml-form-options` `.ml-grid` `.ml-heading` `.ml-icon-chip` `.ml-inline-form` `.ml-inline-form-field` `.ml-label` `.ml-lede` `.ml-link` `.ml-page-shell` `.ml-person` `.ml-person-copy` `.ml-positive` `.ml-price` `.ml-required-mark` `.ml-section` `.ml-section-description` `.ml-section-header` `.ml-section-header-centered` `.ml-section-muted` `.ml-section-shell` `.ml-stack` `.ml-stat` `.ml-stat-card` `.ml-stat-grid` `.ml-stat-list` `.ml-stat-meta` `.ml-stat-value` `.ml-text-primary` `.ml-value`
 
+- `.ml-brand-mark` — A brand's own logo takes the mark's place: no chip, the text color, the mark's size.
 - `.ml-check-list` — A list of benefits, each after a check. Pricing tiers and feature rows share it.
 - `.ml-link` — A glyph inside a link flows with the text instead of breaking the line.
 - `.ml-page-shell` — The navigation, main and footer are grid items; they may be narrower than their widest content (a table that scrolls), so the page never does.
@@ -151,6 +153,7 @@ correct. This table is read out of the stylesheet, so it is never stale.
 | `.ml-badge` | `data-size` | `lg`, `sm` |
 | `.ml-badge` | `data-tone` | `danger`, `info`, `primary`, `success`, `warning` |
 | `.ml-badge` | `data-variant` | `outline`, `solid` |
+| `.ml-brand-mark` | `data-kind` | `logo` |
 | `.ml-breadcrumb-item` | `data-collapse-indicator` | _presence only_ |
 | `.ml-breadcrumb-item` | `data-collapsible` | _presence only_ |
 | `.ml-button` | `aria-disabled` | `true` |

package/registry/contract.json

@@ -527,6 +527,11 @@
         "solid"
       ]
     },
+    "ml-brand-mark": {
+      "data-kind": [
+        "logo"
+      ]
+    },
     "ml-breadcrumb-item": {
       "data-collapse-indicator": [],
       "data-collapsible": []

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -399,7 +399,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -491,7 +491,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -544,7 +544,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.0"
+        "@mlola-ui/motion": "^1.1.2"
       },
       "options": [
         {
@@ -708,8 +708,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -777,7 +777,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -832,7 +832,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -895,8 +895,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -960,7 +960,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -1184,8 +1184,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -1335,7 +1335,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -1386,7 +1386,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [
         {
@@ -1761,7 +1761,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -1814,8 +1814,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -1892,8 +1892,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -2039,7 +2039,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [
         {
@@ -2184,7 +2184,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [
         {
@@ -2316,7 +2316,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -2402,7 +2402,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -2545,7 +2545,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [
         {
@@ -2684,7 +2684,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -2756,7 +2756,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -2826,7 +2826,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3024,7 +3024,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -3101,7 +3101,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3156,7 +3156,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3219,7 +3219,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -3289,7 +3289,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -3408,8 +3408,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3473,7 +3473,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2"
       },
       "options": [
         {
@@ -3560,8 +3560,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3635,7 +3635,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [],
       "variants": [],
@@ -3758,7 +3758,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {
@@ -3861,8 +3861,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.0",
-        "@mlola-ui/icons": "^1.1.0"
+        "@mlola-ui/behavior": "^1.1.2",
+        "@mlola-ui/icons": "^1.1.2"
       },
       "options": [
         {

package/src/cli.js

@@ -11,7 +11,7 @@ import { addAssets, assetHint, loadAssetIndex } from "./assets.js";
 import { runDoctor } from "./doctor.js";
 import { collectEngineDependencies, installItems } from "./installer.js";
 import { loadCatalogNames, loadRegistry, resolveItems } from "./registry.js";
-import { clearCredentials, fetchProItems, GUIDE_FILENAME, hostFrom, readCredentials, saveCredentials, verifyToken, writeProGuide, writeProStyles } from "./pro.js";
+import { catalogStylesheets, clearCredentials, fetchProItems, GUIDE_FILENAME, hostFrom, readCredentials, saveCredentials, verifyToken, writeProGuide, writeProStyles } from "./pro.js";
 import { serveMcp } from "./mcp.js";
 import { pullTheme } from "./theme-pull.js";
 import { buildTheme } from "./theme-build.js";
@@ -86,15 +86,33 @@ function declaredPackages(cwd) {
   const filename = path.join(cwd, "package.json");
   if (!fs.existsSync(filename)) return null;
   const manifest = JSON.parse(fs.readFileSync(filename, "utf8"));
-  return new Set(Object.keys({ ...manifest.dependencies, ...manifest.devDependencies, ...manifest.peerDependencies }));
+  return new Map(Object.entries({ ...manifest.peerDependencies, ...manifest.devDependencies, ...manifest.dependencies }));
+}
+
+/** The lowest version a plain range (1.2.3, ^1.2.3, ~1.2.3, >=1.2.3) allows, or null for anything else. */
+function lowestVersion(range) {
+  const match = /^\s*(?:\^|~|>=|=)?\s*v?(\d+)\.(\d+)\.(\d+)\s*$/.exec(String(range));
+  return match ? match.slice(1, 4).map(Number) : null;
+}
+
+/** Whether a declared range lets in versions older than the required range does. */
+function isBehind(declared, required) {
+  const have = lowestVersion(declared);
+  const need = lowestVersion(required);
+  if (!have || !need) return false; // workspace:, file:, tags and compound ranges are the project's call.
+  for (let index = 0; index < 3; index += 1) if (have[index] !== need[index]) return have[index] < need[index];
+  return false;
 }
 
 // Installs the packages the copied code imports and package.json does not
-// declare yet, with the project's own package manager. Without a package.json
-// (a plain HTML site) or with --no-install it only names them.
+// declare, or declares at an older range than the copied code needs, with the
+// project's own package manager. Without a package.json (a plain HTML site)
+// or with --no-install it only names them.
 function ensurePackages(cwd, dependencies, { skip, output, installer }) {
   const declared = declaredPackages(cwd);
-  const missing = [...dependencies].filter(([name]) => !declared?.has(name)).map(([name, range]) => `${name}@${range}`);
+  const missing = [...dependencies]
+    .filter(([name, range]) => !declared?.has(name) || isBehind(declared.get(name), range))
+    .map(([name, range]) => `${name}@${range}`);
   if (!missing.length) return 0;
   const [command, baseArgs] = packageManager(cwd);
   const line = `${command} ${[...baseArgs, ...missing].join(" ")}`;
@@ -151,6 +169,7 @@ export async function run(argv, options = {}) {
       output.log(
         `Set data-theme="${config.theme}" on your document root and import ${stylesResult.relative}.`,
       );
+      output.log(`Add data-mode="system" to follow the reader's light or dark setting, and load the theme's fonts: https://ui.mlola.com/docs#fonts-and-mode`);
       if (!hasFlag(args, "--no-agents")) reportAgents(writeAgentFiles(cwd), output);
       return ensurePackages(cwd, new Map([[config.engine.engine ?? "@mlola-ui/engine", `^${CLI_VERSION}`]]), install);
     }
@@ -273,7 +292,7 @@ export async function run(argv, options = {}) {
 
       const items = resolveItems(registry, names, catalogNames);
       const result = installItems(cwd, registry, items, config, { overwrite });
-      const styleResult = writeProStyles(cwd, config, styles, { overwrite });
+      const styleResult = writeProStyles(cwd, config, styles, { overwrite, imports: catalogStylesheets(cwd, config, items) });
       result.written.push(...styleResult.written);
       result.unchanged.push(...styleResult.unchanged);
       result.conflicts.push(...styleResult.conflicts);

package/src/pro.js

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
-import { targetRoot } from "./config.js";
+import { interpolateTarget, targetRoot } from "./config.js";
 import { sha256 } from "./registry.js";
 
 /**
@@ -120,11 +120,24 @@ export function writeProGuide(cwd, guide, { overwrite = false } = {}) {
   return { status: "written" };
 }
 
+/**
+ * The stylesheets that blocks, pages and templates carry beside their source
+ * (navbar.css beside navbar.tsx), as files the index can import.
+ */
+export function catalogStylesheets(cwd, config, items) {
+  return items
+    .filter((item) => ["registry:block", "registry:page", "registry:template"].includes(item.type))
+    .flatMap((item) => item.files.filter((file) => file.target.endsWith(".css")))
+    .map((file) => path.join(cwd, interpolateTarget(file.target, config)));
+}
+
 /**
  * Pro stylesheets land in <styles>/mlola-pro/<name>.css, gathered by
  * <styles>/mlola-pro.css, which the project imports once after the engine.
+ * The stylesheets of installed blocks, pages and templates are gathered there
+ * too, where they are, so importing the index styles everything installed.
  */
-export function writeProStyles(cwd, config, styles, { overwrite = false } = {}) {
+export function writeProStyles(cwd, config, styles, { overwrite = false, imports = [] } = {}) {
   const root = targetRoot(config, "styles");
   const written = [];
   const unchanged = [];
@@ -151,8 +164,15 @@ export function writeProStyles(cwd, config, styles, { overwrite = false } = {})
   const indexFile = path.join(cwd, indexRelative);
   let index = fs.existsSync(indexFile) ? fs.readFileSync(indexFile, "utf8") : "/* Mlola Pro styles. Import this file once, after the engine stylesheet. */\n";
   let changed = false;
-  for (const style of styles) {
-    const line = `@import "./mlola-pro/${style.name}.css";`;
+  const indexDirectory = path.dirname(indexFile);
+  const lines = [
+    ...styles.map((style) => `@import "./mlola-pro/${style.name}.css";`),
+    ...imports.map((file) => {
+      const relative = path.relative(indexDirectory, file).split(path.sep).join("/");
+      return `@import "${relative.startsWith(".") ? relative : `./${relative}`}";`;
+    }),
+  ];
+  for (const line of lines) {
     if (!index.includes(line)) {
       index += `${line}\n`;
       changed = true;
@@ -162,5 +182,5 @@ export function writeProStyles(cwd, config, styles, { overwrite = false } = {})
     fs.mkdirSync(path.dirname(indexFile), { recursive: true });
     fs.writeFileSync(indexFile, index);
   }
-  return { written, unchanged, conflicts, index: styles.length ? indexRelative : null };
+  return { written, unchanged, conflicts, index: lines.length ? indexRelative : null };
 }