mlola-ui 1.0.1 → 1.0.3

package/registry/source-manifest.json

@@ -8,43 +8,43 @@
   "packages/components/accordion/accordion.tsx": "sha256-0ALaLJd1fvj8Vbx86HLBKm3qUItrtwbrGJTykVfNSMg=",
   "packages/components/activity-heatmap/activity-heatmap.tsx": "sha256-fMGDlXKpOfIOy0hmbpR8hKrbbN3fC386tXK27A21ZwM=",
   "packages/components/activity-heatmap/calendar.ts": "sha256-NB+AjXY5Xc+KzR8MMTRBgZxdzOeoHhkW0KQOW7WJPuQ=",
-  "packages/components/alert/alert.tsx": "sha256-kg//PTcUW7j7AEnhfO/pZFddm++RIo8yKur46OeoeNo=",
+  "packages/components/alert/alert.tsx": "sha256-j680akXvCIh4MTVnUo79acvVrv51XyQ3UBJ5FBAy8Dw=",
   "packages/components/app-shell/app-shell.tsx": "sha256-XAq82XOTH3ZR+hxTkYFu8P7Ih2aI6ERy/TpXc2VMUwM=",
   "packages/components/avatar/avatar.tsx": "sha256-hvZUGhatN95ZyX6p6NBhTRf6h1/rrJ+bJrqBMtIspq0=",
-  "packages/components/badge/badge.tsx": "sha256-+mgudoxlPn+mjpQycUfQmv8sC/e/K5FXfXm2+wnH7bI=",
-  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-SiIpg0oAieyoZbMlBwwQDZhR/KVIFLFCLCQJ6vwv7Fs=",
+  "packages/components/badge/badge.tsx": "sha256-flEH8S2jZ/64n3Y/ROhC9+9rvF7wXaN0xLcMMwqNOVQ=",
+  "packages/components/breadcrumb/breadcrumb.tsx": "sha256-Mt9mvmwwDgdp5/+mj5byIrh8+hicsp7R6UcvUlK0yog=",
   "packages/components/button/button.tsx": "sha256-khqYxcV3hlZ+Q+cYNTRXEpAfIijDFSvkuDJXMPtlk7g=",
   "packages/components/calendar/calendar.tsx": "sha256-uE22LI4jpU8ErR/oBmAkeKiu+Rp0bz3IXZVCurycpwc=",
   "packages/components/calendar/dates.ts": "sha256-mygYkoC70av2ZQ0vkxf885trwW97Wd10I4dptYQe+4A=",
   "packages/components/card/card.tsx": "sha256-aMKbv5DWYYWq7GZAFR9O1fuYE0H61WCjkvEbRMOd894=",
-  "packages/components/carousel/carousel.tsx": "sha256-LAPKz9DG9vEBv/8jKjqgH7XiSEERkWWLr4n/Kve1omQ=",
-  "packages/components/checkbox/checkbox.tsx": "sha256-cqTFwYwNPRxKiBnXXWkcFeDlJ6tpJ9GX4IdqrYRp9Fs=",
-  "packages/components/color-picker/color-picker.tsx": "sha256-UziuULSI7dIGLfu4jjWIz6Cbh2/HiaY2KYXlfQ+6iQg=",
-  "packages/components/color-picker/color.ts": "sha256-3IO6DaelZ6TVn2aw+6o6pZCQGAQdeNRkN7sPypUzddE=",
-  "packages/components/combobox/combobox.tsx": "sha256-CnuJP01m0ZPMB4MGjoKbJCBQ7inI6bPf5aMDrq4m1qI=",
+  "packages/components/carousel/carousel.tsx": "sha256-pamugpB6Ujt9Ylxd37jNF/ZwSb8iRkW/MoYe12nY3i4=",
+  "packages/components/checkbox/checkbox.tsx": "sha256-hz4YbGwOxv/aJpJHrLXR4MKSWJGyjzoJEIGvdhyML9M=",
+  "packages/components/color-picker/color-picker.tsx": "sha256-E+QB6MbSxg+3AZX3A7bOkst4arxgpmFL2ZmochoWCl8=",
+  "packages/components/color-picker/color.ts": "sha256-YqSgYjzn7XfPWAHuyzbwOhbg/ScaSfB7V73e9w+OjJs=",
+  "packages/components/combobox/combobox.tsx": "sha256-CvuYc/hJoS7yw6QM9vv1SIkwflx0Kwd95UjchtC+AOs=",
   "packages/components/command-menu/command-menu.tsx": "sha256-mF1z92yrPY609pjx5Dt1l5EhGHl9EWV8F8Sq0hyJRw4=",
   "packages/components/context-menu/context-menu.tsx": "sha256-YgYsIzvLGFcJG1XX5zFJwrid5Z1Kn0lyWVzmLKmbMVU=",
-  "packages/components/date-picker/date-picker.tsx": "sha256-pX7snZCO3SxVftkCvI/f5b82bNHPconUa50BJnjYNWc=",
+  "packages/components/date-picker/date-picker.tsx": "sha256-rsmDweD3RVfKTXR2i+/pnTb/MsrDAZXmHAYBvcUGxig=",
   "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-xgybCu9HBxIieafu5CjAtY4aCOQoaAj/VUCH6D6vLP8=",
-  "packages/components/dropzone/dropzone.tsx": "sha256-jMVEnTki4Suhx7pOWfLX9MO1Q3nLz0xqDJ/2EPHdpYg=",
-  "packages/components/empty-state/empty-state.tsx": "sha256-AWwOuZgm71hossjCGYygtvzGcDy6JOPryF+U1UrsLhM=",
-  "packages/components/hover-card/hover-card.tsx": "sha256-HZyB9SUDcRPG8MvRX1sHqHA2rNcO63yVevH9hiGqVAA=",
+  "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
+  "packages/components/empty-state/empty-state.tsx": "sha256-uCKqYpr9vkozXZHpdl4GFtdX9ijcGOriCHvgyarBqRw=",
+  "packages/components/hover-card/hover-card.tsx": "sha256-AyRbxfqDOYBgGlgjgrtQZm5DipArLEzQn6XnzjPd0ro=",
   "packages/components/input/input.tsx": "sha256-lbbheo+ydQTzyujTf0W7DD96TogOjifCyqj9c3h3W0g=",
   "packages/components/kbd/kbd.tsx": "sha256-wrPqzn1e82zJYoKzO7u94Bgq4+nPc0DXLc8GJ/4/3nY=",
   "packages/components/modal/modal.tsx": "sha256-vybxgBGYCrMYvJRnO1wDAc2VFQylu+mQIf5OZIcabX4=",
-  "packages/components/number-input/number-input.tsx": "sha256-D+8jH2YaW4lCv/F02qvkc9Huhxvz0y1idzgOBwsjiN8=",
+  "packages/components/number-input/number-input.tsx": "sha256-BDOyvCNtMULD/HK7uWHsYbGg79lrRDrVqtGQQrYHpmM=",
   "packages/components/number-input/number.ts": "sha256-IrHCQrEhI5ein9ifMFuSViSoxQUBoT3tNmmCu/paGGM=",
-  "packages/components/otp-input/otp-input.tsx": "sha256-MWDyTP99wVAQSYJsF78ol1Kv9LKOj1lybmp2zOomVqo=",
+  "packages/components/otp-input/otp-input.tsx": "sha256-QURn8g5HqCQXBTdeENPbVxoPlqs3ZtoAPLRlFjQDxmI=",
   "packages/components/pagination/pagination.tsx": "sha256-FBwk8tq4JcsK2D0dlWEYiDSRx3owgBmGzEIlVRaNBoE=",
   "packages/components/popover/popover.tsx": "sha256-/kTiAuFklU4IuP97XaiCUGdEpKtNyMPLPS359mfzPHw=",
   "packages/components/priority-icon/labels.ts": "sha256-zhmJIb7/gS16wU+xCJ7hkReBi9q5RI3SMwdjkJvvvKU=",
   "packages/components/priority-icon/priority-icon.tsx": "sha256-3D6hFRpht3YuWouLhakE2DFdldavmJx0B/povEDwrtQ=",
-  "packages/components/progress/progress.tsx": "sha256-3SOA1JX54msiq/pF2UolesQqQZm0zSVyZQi6W38lOOA=",
+  "packages/components/progress/progress.tsx": "sha256-9OjecRNPWn7Bfe+C5IyXaKsW1NJae6X5gco1o0X5XkE=",
   "packages/components/radio-group/radio-group.tsx": "sha256-jhnSEBLkdpe8dv5us/Q1sMsQF4sKGRgDXWGKm2JSFew=",
   "packages/components/rating/rating.tsx": "sha256-zgPOQXzAiRE4qGNPQ8qat3SP1XSI/7567kA5VaT51P0=",
   "packages/components/resizable/resizable.tsx": "sha256-40sK2UyIR9Ek72KAu5nvbr44tKEY6JhC5Ftb++Wf6cI=",
-  "packages/components/segmented-control/segmented-control.tsx": "sha256-sExMN2WHtzxcaCu7xN/1jaP+sRVwJ2OAW1WkKGhNYnU=",
-  "packages/components/select/select.tsx": "sha256-MWHL/mlAO2ob4H3EmYSBZcC1qqy+M3cF1Z4s0R+frrc=",
+  "packages/components/segmented-control/segmented-control.tsx": "sha256-MCBG5XHFWCwbACctsYKbqe8mvSSR6pf60tyRgdCDKDA=",
+  "packages/components/select/select.tsx": "sha256-m8QmKUGC4386XcklosSntal0XwUAFjKosTBQSF0dduQ=",
   "packages/components/sheet/sheet.tsx": "sha256-EIn3OeRDmXGHbYf/uihRh8aw3LmzarIFiyC9DUsL1jg=",
   "packages/components/skeleton/skeleton.tsx": "sha256-2Fk72NbLr3+CrXH7jGbHNsc3t+vskMqSyySe/UwbGCs=",
   "packages/components/slider/slider.tsx": "sha256-l+VrBqPYHIIcemiVixxwDxNDB0HEMmYRZekx/H5HroQ=",
@@ -53,15 +53,15 @@
   "packages/components/stepper/stepper.tsx": "sha256-uI/dRmkbijlixHiGUceWcpaDzpEixrzQ1UTmoPbGZAY=",
   "packages/components/table/table.tsx": "sha256-ed1Qn2sIpxRvGdPDAb5ih5AcXr5PmHTHdlrJLYDYRp8=",
   "packages/components/tabs/tabs.tsx": "sha256-kWAQjE9mshqZL7V3NJTUiurp6M5Nu3vx5O1LsIgdV5Y=",
-  "packages/components/tag-input/tag-input.tsx": "sha256-+R1f2XljDYInsfuggKkpqz5m9TqEa0g3QYKMX2TE6h0=",
-  "packages/components/textarea/textarea.tsx": "sha256-jeyvAlzFr25eWZ/Inkxo1UEOHXlCPB/QHeId124SfR8=",
-  "packages/components/time-picker/time-picker.tsx": "sha256-OyIfJN6xVv6TwUYtRirkemJe5VMcu2HXxjaJj8fvu9I=",
+  "packages/components/tag-input/tag-input.tsx": "sha256-EK7xJTe3Y/S5Kn3vS0zBQg9lC+RVoGvky6HOAt+DnAw=",
+  "packages/components/textarea/textarea.tsx": "sha256-C9jMYZ63w+m6bgdLvHjvULRuoCe26q5zbgS4+ahWzr8=",
+  "packages/components/time-picker/time-picker.tsx": "sha256-og8Cbf+e8oFYewfagUgjRzLHSIIlAZh+1OpAn9yNq70=",
   "packages/components/time-picker/times.ts": "sha256-V/4uqFZPn9gVnyx8cB9vwp/RocmTYaPmLxjfy8DPQOI=",
-  "packages/components/timeline/timeline.tsx": "sha256-FDZx+ihL5tbIY/sEl0444uj27JWHE5xl0vl8IqRUUPY=",
-  "packages/components/toast/toast.tsx": "sha256-RrqUAAfKavEkZaLjywJHc0iTNHC1DHlIGVX97kftDkg=",
-  "packages/components/toggle/toggle.tsx": "sha256-zwTbHMSs3n0eg5XIpREDnySYLXHaLly1Ew4FWlzvgJY=",
+  "packages/components/timeline/timeline.tsx": "sha256-nVg7lBcAUAzqEb0YrHagJXSaHE2aWWE9bUbQMWQY6PU=",
+  "packages/components/toast/toast.tsx": "sha256-FvZnwN6Lk/QEHmcNxo7sVlEvR3Lx54aT5cH9lwrthhE=",
+  "packages/components/toggle/toggle.tsx": "sha256-8qPHeSliHNdzQS7OLJ47BrvRR75MYyUGJlK4s21XS/U=",
   "packages/components/tooltip/tooltip.tsx": "sha256-NbaOUmlUbBlUIdovchrWwH2QqzuvXB97DjnJnrHf4Gc=",
-  "packages/components/tour/tour.tsx": "sha256-1aSh7hMVt/DM/kH3WGJzJMGNsNqYEOmnwAZwc8dwRv8=",
+  "packages/components/tour/tour.tsx": "sha256-mrAE8aVDBVIibGvQah9Gh3mzIiWDFxB6aObzqFo5xXU=",
   "packages/components/virtual-list/virtual-list.tsx": "sha256-raGEFn4HlAOIohqZcy0DgptsnUIPS/6bWLYeTe+M9E8=",
   "packages/components/virtual-list/virtual.ts": "sha256-PyDIj3C2Vwb1i4ZssxSlYjgKmZPBIFLZFNq8YCW2Z78="
 }

package/src/assets.js

@@ -0,0 +1,90 @@
+import { createHash } from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+import { targetRoot } from "./config.js";
+import { BUNDLED_REGISTRY_ROOT, readJson } from "./registry.js";
+
+/**
+ * 2D and 3D assets.
+ *
+ * Their files are not bundled with the CLI: a project wants three of them,
+ * not every model. The bundled index lists each file with its integrity; the
+ * files download from the site and are checked before anything is written.
+ *
+ * Static files (SVG, GLB, posters) land in the `assets` target, public/mlola
+ * by default, so a web app serves them as /mlola/2d/… and /mlola/3d/…. A 2D
+ * asset's React component lands beside your components, in illustrations/.
+ */
+
+export function loadAssetIndex() {
+  const filename = path.join(BUNDLED_REGISTRY_ROOT, "assets.json");
+  if (!fs.existsSync(filename)) return { items: [] };
+  return readJson(filename);
+}
+
+const integrityOf = (bytes) => `sha256-${createHash("sha256").update(bytes).digest("base64")}`;
+
+/** Where each of an asset's files goes in the project. */
+export function assetTarget(config, item, file) {
+  if (file.role === "react") return path.join(targetRoot(config, "components"), "illustrations", file.path);
+  return path.join(targetRoot(config, "assets"), item.kind, file.path);
+}
+
+export async function addAssets(cwd, config, ids, { source, fetcher, overwrite = false }) {
+  const index = loadAssetIndex();
+  const known = new Map(index.items.map((item) => [item.id, item]));
+  const unknown = ids.filter((id) => !known.has(id));
+  if (unknown.length) {
+    throw new Error(`No asset named ${unknown.map((id) => `"${id}"`).join(", ")}. See them all with "npx mlola-ui list --kind asset".`);
+  }
+
+  // Download and verify everything first, so a failure writes nothing.
+  const planned = [];
+  for (const id of ids) {
+    const item = known.get(id);
+    for (const file of item.files) {
+      const url = `${source}/${item.kind}/${item.id}/${file.path}`;
+      let response;
+      try {
+        response = await fetcher(url);
+      } catch (error) {
+        throw new Error(`Could not download ${url}: ${error.message}`);
+      }
+      if (!response.ok) throw new Error(`Could not download ${url}: the server answered ${response.status}.`);
+      const bytes = Buffer.from(await response.arrayBuffer());
+      if (integrityOf(bytes) !== file.integrity) throw new Error(`${item.id}/${file.path} failed integrity validation; nothing was written.`);
+      planned.push({ item, file, bytes, relative: assetTarget(config, item, file) });
+    }
+  }
+
+  const result = { written: [], unchanged: [], conflicts: [], items: ids.map((id) => known.get(id)) };
+  for (const { bytes, relative } of planned) {
+    const filename = path.join(cwd, relative);
+    if (fs.existsSync(filename)) {
+      if (fs.readFileSync(filename).equals(bytes)) {
+        result.unchanged.push(relative);
+        continue;
+      }
+      if (!overwrite) {
+        result.conflicts.push(relative);
+        continue;
+      }
+    }
+    fs.mkdirSync(path.dirname(filename), { recursive: true });
+    fs.writeFileSync(filename, bytes);
+    result.written.push(relative);
+  }
+  return result;
+}
+
+/** A line on how to use each added asset. */
+export function assetHint(config, item) {
+  const pascal = item.id.replace(/(^|-)([a-z0-9])/g, (_, __, letter) => letter.toUpperCase());
+  const assets = targetRoot(config, "assets");
+  const publicPath = assets.startsWith("public/") ? `/${assets.slice("public/".length)}` : `/${assets}`;
+  if (item.kind === "2d") {
+    const alias = (config.aliases?.components ?? "@/components/ui").replace(/\/$/, "");
+    return `${item.id}: import { ${pascal}Illustration } from "${alias}/illustrations/${item.id}"; it follows your theme. As a plain image: ${publicPath}/2d/${item.id}.svg`;
+  }
+  return `${item.id}: ${publicPath}/3d/${item.id}.glb, with its poster at ${publicPath}/3d/${item.id}-poster.webp. Materials are named primary, surface, accent, ink, neutral and metal, so a viewer can paint them from your theme.`;
+}

package/src/cli.js

@@ -7,6 +7,7 @@ import {
   targetRoot,
   writeDefaultConfig,
 } from "./config.js";
+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";
@@ -18,9 +19,10 @@ const HELP = `Mlola UI — source-copy components with Theme
 Usage:
   mlola-ui init [--force]
   mlola-ui add <name...> [--overwrite] [--install|--yes]
+  mlola-ui add asset <id...> [--overwrite]
   mlola-ui login <token> [--host <url>]
   mlola-ui logout
-  mlola-ui list [--kind component|block|template] [--json]
+  mlola-ui list [--kind component|block|template|asset] [--json]
   mlola-ui doctor
   mlola-ui theme pull <theme-id | url> [--host <url>] [--overwrite]
 
@@ -29,6 +31,7 @@ Examples:
   npx mlola-ui add button card
   npx mlola-ui login mlp_…          (Mlola Pro: a token from /account)
   npx mlola-ui add conversation bot
+  npx mlola-ui add asset empty-inbox orb
   npx mlola-ui list --kind block
   npx mlola-ui theme pull https://ui.mlola.com/t/th-4k2x9qf7wz3m
 `;
@@ -116,8 +119,22 @@ export async function run(argv, options = {}) {
     if (command === "list") {
       const registry = loadRegistry();
       const kind = optionValue(args, "--kind");
-      if (kind && !["component", "block", "template"].includes(kind)) {
-        throw new Error(`--kind must be component, block, or template (received "${kind}")`);
+      if (kind && !["component", "block", "template", "asset"].includes(kind)) {
+        throw new Error(`--kind must be component, block, template or asset (received "${kind}")`);
+      }
+      if (kind === "asset") {
+        const assets = loadAssetIndex().items;
+        if (hasFlag(args, "--json")) {
+          output.log(JSON.stringify(assets, null, 2));
+          return 0;
+        }
+        for (const group of ["2d", "3d"]) {
+          const grouped = assets.filter((item) => item.kind === group);
+          if (!grouped.length) continue;
+          output.log(`${group === "2d" ? "Illustrations" : "3D models"} (${grouped.length})`);
+          for (const item of grouped) output.log(`  ${item.id.padEnd(18)} ${item.summary}`);
+        }
+        return 0;
       }
       const items = kind
         ? registry.items.filter((item) => item.type === {
@@ -150,7 +167,7 @@ export async function run(argv, options = {}) {
       if (!token) throw new Error(`Usage: mlola-ui login <token>. Create a token at ${host}/account.`);
       const { licence } = await verifyToken(host, token, fetcher);
       const filename = saveCredentials(env, token, host === hostFrom(env) ? undefined : host);
-      output.log(`✓ Logged in to Mlola Pro (${licence.plan} licence). Token saved to ${filename}.`);
+      output.log(`✓ Logged in to Mlola Pro (${licence.plan} license). Token saved to ${filename}.`);
       return 0;
     }
 
@@ -159,6 +176,23 @@ export async function run(argv, options = {}) {
       return 0;
     }
 
+    if (command === "add" && args[0] === "asset") {
+      const host = optionValue(args, "--host");
+      const ids = args.slice(1).filter((argument) => !argument.startsWith("-") && argument !== host);
+      if (!ids.length) throw new Error('Usage: mlola-ui add asset <id...>. See them with "npx mlola-ui list --kind asset".');
+      const config = loadConfig(cwd);
+      const source = env.MLOLA_ASSETS_URL?.replace(/\/$/, "") ?? `${hostFrom(env, host)}/asset-files`;
+      const result = await addAssets(cwd, config, ids, { source, fetcher, overwrite: hasFlag(args, "--overwrite") });
+      for (const filename of result.written) output.log(`✓ Added ${filename}`);
+      if (result.unchanged.length) output.log(`• ${result.unchanged.length} file(s) already up to date`);
+      if (result.conflicts.length) {
+        output.error(`✗ Refused to replace ${result.conflicts.length} modified file(s):\n  ${result.conflicts.join("\n  ")}\nRun again with --overwrite to replace them.`);
+        return 1;
+      }
+      for (const item of result.items) output.log(assetHint(config, item));
+      return 0;
+    }
+
     if (command === "add") {
       const names = args.filter((argument) => !argument.startsWith("-"));
       if (!names.length) throw new Error("Usage: mlola-ui add <name...>");
@@ -178,7 +212,7 @@ export async function run(argv, options = {}) {
         if (!credentials) {
           throw new Error(
             `${proNames.map((name) => `"${name}"`).join(", ")} ${proNames.length === 1 ? "is" : "are"} part of Mlola Pro. ` +
-              `With a licence, create a token at ${host}/account and run "npx mlola-ui login <token>". See ${host}/pricing to get Pro.`,
+              `With a license, create a token at ${host}/account and run "npx mlola-ui login <token>". See ${host}/pricing to get Pro.`,
           );
         }
         const delivered = await fetchProItems(host, credentials.token, proNames, fetcher);

package/src/config.js

@@ -22,6 +22,7 @@ export const DEFAULT_CONFIG = {
     templates: "app/templates",
     lib: "lib/mlola",
     styles: "styles",
+    assets: "public/mlola",
   },
   engine: {
     engine: "@mlola-ui/engine",

package/src/pro.js

@@ -10,7 +10,7 @@ import { sha256 } from "./registry.js";
  * Pro source is never bundled. `mlola-ui login <token>` stores a token made at
  * /account (readable by the current user only); `add` sends it to the Pro
  * endpoint, which returns the items and their Pro dependencies stamped with
- * the licence. In CI, `MLOLA_PRO_TOKEN` takes the place of a login.
+ * the license. In CI, `MLOLA_PRO_TOKEN` takes the place of a login.
  */
 
 export const DEFAULT_HOST = "https://ui.mlola.com";