dithercharts 0.1.3 → 0.1.5

package/README.md

@@ -2,7 +2,7 @@
 
 # dithercharts
 
-The CLI for [DitherCharts](https://dithercharts.com), dithered chart components for React. It copies chart source into your React app, so you own and can edit every line.
+The CLI for [DitherCharts](https://dithercharts.com), dithered chart and form control components for React. It copies their source into your React app, so you own and can edit every line.
 
 You need a DitherCharts Pro subscription, Node 20 or later, and a React 19 app with TypeScript. Tailwind and shadcn/ui are optional.
 
@@ -14,13 +14,13 @@ Log in once per machine. Your browser opens to confirm a code.
 npx dithercharts login
 ```
 
-Then add charts from your app's folder:
+Then add charts and controls from your app's folder:
 
 ```sh
-npx dithercharts add area-chart
+npx dithercharts add area-chart select
 ```
 
-Files land in `src/components/dithercharts/` (or `components/dithercharts/` without a `src` folder), and the CLI installs the chart's npm dependencies with your package manager.
+Files land in `src/components/dithercharts/` (or `components/dithercharts/` without a `src` folder), and the CLI installs any npm dependencies with your package manager. Run `npx dithercharts list` for every name.
 
 ## Commands
 
@@ -29,10 +29,10 @@ Files land in `src/components/dithercharts/` (or `components/dithercharts/` with
 | `login` | Sign in through the browser and save a key |
 | `logout` | Revoke this machine's key and forget it |
 | `whoami` | Show the signed-in account and plan |
-| `list` | List the charts and what's installed here |
-| `add <names...>` | Install charts into this project |
+| `list` | List the charts and controls, and what's installed here |
+| `add <names...>` | Install charts and controls into this project |
 
-`add` options: `--all`, `--dir <path>`, `--yes`, `--overwrite`, `--no-install`.
+`add` options: `--all`, `--dir <path>`, `--yes`, `--overwrite`, `--no-install`. `--yes` asks nothing, so AI agents should pass it: it takes the default folder and keeps files you changed.
 
 In CI, set `DITHERCHARTS_API_KEY` instead of running `login`.
 

package/dist/cli.js

@@ -18,11 +18,11 @@ Commands:
   login                 Sign in through the browser and save a key
   logout                Revoke this machine's key and forget it
   whoami                Show the signed-in account and plan
-  list                  List the charts and what's installed here
-  add <names...>        Install charts into this project
-    --all               Install every chart
+  list                  List the charts and controls, and what's installed here
+  add <names...>        Install charts and controls into this project
+    --all               Install every chart and control
     --dir <path>        Folder to install into
-    --yes, -y           Accept the default folder
+    --yes, -y           Ask nothing: use the default folder, keep local changes
     --overwrite         Replace files you changed locally
     --no-install        Print the dependency install command instead of running it
 
@@ -31,7 +31,7 @@ Environment:
   DITHERCHARTS_URL      Server to use (default ${DEFAULT_BASE_URL})`;
 const version = () => JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version;
 function welcome() {
-    const side = { 4: "Welcome to DitherCharts", 5: `v${version()} · dithered charts for React` };
+    const side = { 4: "Welcome to DitherCharts", 5: `v${version()} · dithered charts and controls for React` };
     return LOGO.split("\n").map((line, i) => (side[i] ? `${line.padEnd(20)}${side[i]}` : line)).join("\n");
 }
 function runCommand(cmd, cwd) {

package/dist/commands/add.js

@@ -32,7 +32,7 @@ export async function add(opts, deps) {
     const items = await Promise.all(resolveOrder(index, names).map((name) => deps.api.item(name)));
     const results = await applyFiles(planFiles(join(root, dir), items), {
         overwrite: opts.overwrite,
-        ask: deps.interactive ? deps.askOverwrite : null,
+        ask: deps.interactive && !opts.yes ? deps.askOverwrite : null,
     });
     for (const r of results) {
         deps.log(`${MARK[r.result]} ${relative(root, r.path)}${r.result === "skipped" ? " (local changes kept; --overwrite replaces)" : ""}`);
@@ -55,7 +55,7 @@ export async function add(opts, deps) {
         deps.log(`$ ${cmd.join(" ")}`);
         deps.run(cmd, root);
     }
-    const base = importBase(dir);
+    const base = importBase(root, dir);
     deps.log("");
     for (const [owner, sheet] of STYLESHEETS) {
         if (items.some((i) => i.name === owner))

package/dist/commands/list.js

@@ -3,10 +3,24 @@ export async function list(deps) {
     const index = await deps.api.index();
     const root = findProjectRoot(deps.cwd);
     const installed = (root && readConfig(root)?.items) || {};
-    for (const item of index.items) {
-        const have = installed[item.name];
-        const note = !have ? "" : have === index.version ? `  [installed ${have}]` : `  [installed ${have}, update: ${index.version}]`;
-        deps.log(`${item.name.padEnd(14)} ${item.description}${note}`);
-    }
+    // Items others depend on (engine, core, controls) come along with them, so they're listed apart.
+    const shared = new Set(index.items.flatMap((item) => item.registryDependencies));
+    const mine = index.items.filter((item) => !shared.has(item.name));
+    const isControl = (item) => item.registryDependencies.includes("controls");
+    const groups = [
+        ["Charts", mine.filter((item) => !isControl(item))],
+        ["Form controls", mine.filter(isControl)],
+        ["Shared (add installs these for you)", index.items.filter((item) => shared.has(item.name))],
+    ];
+    groups.forEach(([heading, items], i) => {
+        if (i > 0)
+            deps.log("");
+        deps.log(heading);
+        for (const item of items) {
+            const have = installed[item.name];
+            const note = !have ? "" : have === index.version ? `  [installed ${have}]` : `  [installed ${have}, update: ${index.version}]`;
+            deps.log(`  ${item.name.padEnd(14)} ${item.description}${note}`);
+        }
+    });
     return 0;
 }

package/dist/errors.js

@@ -25,6 +25,6 @@ export function messageFor(status, body, base, name) {
     if (status === 403)
         return "This key can't install charts. Log in with `npx dithercharts login` to get a personal key.";
     if (status === 404)
-        return name ? `No chart named "${name}". Run \`npx dithercharts list\`.` : "Not found on the server.";
+        return name ? `No chart or control named "${name}". Run \`npx dithercharts list\`.` : "Not found on the server.";
     return `The server answered ${status}. Nothing was written; try again.`;
 }

package/dist/install.js

@@ -8,7 +8,7 @@ export function resolveOrder(index, names) {
     const visit = (name) => {
         const item = byName.get(name);
         if (!item)
-            throw new CliError(`No chart named "${name}". Run \`npx dithercharts list\`.`);
+            throw new CliError(`No chart or control named "${name}". Run \`npx dithercharts list\`.`);
         if (order.includes(name))
             return;
         item.registryDependencies.forEach(visit);

package/dist/project.js

@@ -1,5 +1,5 @@
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { dirname, join, posix } from "node:path";
 export const CONFIG_FILE = "dithercharts.json";
 /** The nearest folder at or above `cwd` with a package.json. */
 export function findProjectRoot(cwd) {
@@ -46,8 +46,36 @@ export function reactMajor(pkg) {
     const major = range?.match(/\d+/)?.[0];
     return major ? Number(major) : null;
 }
-/** How app code imports the folder, assuming the common `@/` alias. */
-export const importBase = (dir) => `@/${dir.replace(/^src\//, "")}`;
+// tsconfig files allow comments and trailing commas. Strings are matched first and kept, since "@/*" holds "/*".
+const COMMENT = /("(?:\\.|[^"\\])*")|\/\/[^\n]*|\/\*[\s\S]*?\*\//g;
+const TRAILING_COMMA = /("(?:\\.|[^"\\])*")|,(?=\s*[}\]])/g;
+function readTsconfig(path) {
+    try {
+        const text = readFileSync(path, "utf8").replace(COMMENT, (_, str) => str ?? "").replace(TRAILING_COMMA, (_, str) => str ?? "");
+        return JSON.parse(text).compilerOptions;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** How app code imports the folder: through the tsconfig alias that reaches it ("~/" in T3 apps), else `@/`. */
+export function importBase(root, dir) {
+    const folder = posix.normalize(dir);
+    // Vite apps keep their compiler options in tsconfig.app.json.
+    for (const file of ["tsconfig.json", "tsconfig.app.json"]) {
+        const options = readTsconfig(join(root, file));
+        for (const [alias, [target] = []] of Object.entries(options?.paths ?? {})) {
+            if (!alias.endsWith("/*") || (!target?.endsWith("/*") && target !== "*"))
+                continue;
+            const base = posix.normalize(posix.join(options?.baseUrl ?? ".", target.slice(0, -1))).replace(/\/$/, "");
+            if (base === ".")
+                return alias.slice(0, -1) + folder;
+            if (folder.startsWith(`${base}/`))
+                return alias.slice(0, -1) + folder.slice(base.length + 1);
+        }
+    }
+    return `@/${folder.replace(/^src\//, "")}`;
+}
 /** "area-chart" → "AreaChart". */
 export const componentName = (item) => item
     .split("-")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dithercharts",
-  "version": "0.1.3",
-  "description": "Install DitherCharts Pro charts into your React app.",
+  "version": "0.1.5",
+  "description": "Install DitherCharts Pro charts and form controls into your React app.",
   "keywords": [
     "dithercharts",
     "charts",