flet-box 1.0.7 → 1.0.9

package/README.md

@@ -23,6 +23,7 @@ Real DOM · No Virtual DOM · No build config to learn.
 <br><br>
 
 <a href="https://kuko53348.github.io/flet-box-docs/">📖 Docs</a> •
+<a href="https://kuko53348.github.io/flet-box-widgets-exemples/">🧪 Widget gallery</a> •
 <a href="#quick-start">Quick start</a> •
 <a href="https://www.youtube.com/@flet-box">▶ YouTube</a> •
 <a href="#support--sponsorship">❤️ Sponsor</a>
@@ -157,6 +158,8 @@ Read the docs online: **[The FletBox Book — kuko53348.github.io/flet-box-docs]
 
 They are **one continuous book** — the cover maps every page: [The FletBox Book source](docs/README.md).
 
+Rather than read, click: **[the live widget gallery](https://kuko53348.github.io/flet-box-widgets-exemples/)** gives every widget its own page, renders each example in the browser it was written for, and prints the exact call underneath it. The theme toggle in the corner shows the same screen in light and dark, which is the honest way to judge a default color.
+
 - [Your first app](docs/guides/first-app.md) — build a working todo app in 20 minutes
 - [The widget book](docs/widget/README.md) — every widget with property tables and examples
 - [State, Router & Services](docs/guides/state.md) — shared state, routing, storage, and HTTP

package/bin/cli.js

@@ -14,6 +14,7 @@ import fs from "fs";
 import path from "path";
 import { createProject } from "./commands/create.js";
 import { checkApi } from "./commands/checkApi.js";
+import { checkUi } from "./commands/checkUi.js";
 import { auditFix } from "./commands/auditFix.js";
 import { toPng } from "./commands/toPng.js";
 import { images } from "./commands/images.js";
@@ -86,6 +87,10 @@ ${cmd("unpack <Widget>", "Everything one widget really accepts, and what works")
 ${cmd("   └─ --example", "paste-ready call using only verified props")}
 ${cmd("   └─ --diff", "what the docs or types claim that the code ignores")}
 ${cmd("   └─ unpack --all", "every widget; --json / --md write .fletbox/api/")}
+${cmd("check-ui", "Clean-UI gate: tokens, 8-based scale, tap targets, WCAG contrast")}
+${cmd("   └─ --tokens", "print the measured contrast of every color token")}
+${cmd("   └─ --strict", "fail on contrast warnings too")}
+${cmd("   └─ alias", "ui | checkUi")}
 ${cmd("audit-fix", "Rewrite broken imports, missing imports and misspelled props")}
 ${cmd("   └─ --only imports|props", "run one repair instead of both")}
 ${cmd("   └─ alias", "fix-imports | fix-path-imports | auditFix")}
@@ -315,6 +320,14 @@ async function main() {
         break;
       }
 
+      case "check-ui":
+      case "checkUi":
+      case "ui": {
+        const { exitCode } = await checkUi(args.slice(1));
+        if (exitCode) process.exit(exitCode);
+        break;
+      }
+
       case "audit-fix":
       case "auditFix":
       case "fix-imports":

package/bin/commands/checkApi.js

@@ -234,6 +234,13 @@ export const collectSources = (projectRoot) => {
 /**
  * Read the keys of an object literal starting at its opening brace.
  *
+ * Only the object's own level is scanned: a comma inside an array, a call or a
+ * nested brace belongs to that inner expression, not to the props object.
+ * Without the group counter, `children: [slot, line]` was split on its inner
+ * commas and every widget variable in the list was reported as a shorthand prop
+ * (`Column({ line })` — UNKNOWN_PROP), which is the single most common shape in
+ * a FletBox app.
+ *
  * @param {string} code Comment/string-free source.
  * @param {number} open Index of `{`.
  * @returns {{ keys: string[], opaque: boolean }} `opaque` when a top-level
@@ -242,6 +249,7 @@ export const collectSources = (projectRoot) => {
 const literalKeys = (code, open) => {
   const keys = [];
   let depth = 0;
+  let group = 0;
   let current = "";
   let opaque = false;
   const flush = () => {
@@ -267,7 +275,11 @@ const literalKeys = (code, open) => {
         flush();
         return { keys, opaque };
       }
-    } else if (depth === 1 && ch === ",") {
+    } else if (ch === "[" || ch === "(") {
+      group++;
+    } else if (ch === "]" || ch === ")") {
+      if (group > 0) group--;
+    } else if (depth === 1 && group === 0 && ch === ",") {
       flush();
       continue;
     }