@loadbare/widgets 0.10.0 → 0.11.0

package/README.md

@@ -19,6 +19,8 @@ Inventory:
 | [`lb-checkbox`](docs/lb-checkbox.md) | a checkbox and its label, as markup to style |
 | [`lb-number`](docs/lb-number.md) | a number shown by `Intl.NumberFormat` |
 | [`lb-date`](docs/lb-date.md) | a date or time shown by `Intl.DateTimeFormat` |
+| [`lb-tel`](docs/lb-tel.md) | a phone number shown as a `tel:` link |
+| [`lb-mailto`](docs/lb-mailto.md) | an email address shown as a `mailto:` link |
 
 ## Installing
 
@@ -39,3 +41,20 @@ Apart from the line in `src/imports.ts`, no other import statements
 are required.  The loadbare builder automatically bundles the HTML and
 JS for any widget in the library that is actually used in the app.
 
+## Agent skills
+
+The package ships an agent skill, `loadbare-widgets`, written for a coding agent working
+in a project that depends on `@loadbare/widgets`.  Install it with:
+
+```bash
+npx loadbare-widgets skills install
+```
+
+It links the skill into `.agents/skills/` and `.claude/skills/`, where agents
+look for skills.  `--copy` writes copies instead of links, and `--dir <path>`
+installs into one directory of your choosing.  The command prints the paths to
+add to `.gitignore` and writes nothing there itself.
+
+`npx loadbare-app skills install`, `npx loadbare-widgets skills install` and
+`npx loadbare-db skills install` install the three loadbare skills, one per
+package.

package/dist/index.d.ts

@@ -7,4 +7,6 @@ import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
 import "./lb-number.browser.js";
 import "./lb-date.browser.js";
+import "./lb-tel.browser.js";
+import "./lb-mailto.browser.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC"}

package/dist/index.js

@@ -7,4 +7,6 @@ import "./lb-confirm.browser.js";
 import "./lb-insert-dialog.browser.js";
 import "./lb-number.browser.js";
 import "./lb-date.browser.js";
+import "./lb-tel.browser.js";
+import "./lb-mailto.browser.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\nimport \"./lb-number.browser.js\";\nimport \"./lb-date.browser.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\nimport \"./lb-number.browser.js\";\nimport \"./lb-date.browser.js\";\nimport \"./lb-tel.browser.js\";\nimport \"./lb-mailto.browser.js\";\n"]}

package/dist/lb-mailto.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-mailto.browser.d.ts.map

package/dist/lb-mailto.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-mailto.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-mailto.browser.ts"],"names":[],"mappings":""}

package/dist/lb-mailto.browser.js

@@ -0,0 +1,29 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it as written, in the `<a>` its definition
+ * holds, with a `mailto:` `href` that writes to it. Not a control: the hub
+ * stamps `lb-column-value` on the tag and never gathers it.
+ *
+ * The address is encoded into the `href`, so a value carrying `?` or `&`
+ * cannot add a subject, a body or another recipient to the message. A value
+ * with no `@` shows as it arrived, with no `href`.
+ */
+class LbMailto extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+        const a = this.querySelector("a");
+        if (!a)
+            return;
+        a.textContent = value ?? "";
+        const address = value?.trim();
+        if (address?.includes("@")) {
+            a.setAttribute("href", `mailto:${encodeURIComponent(address).replace(/%40/g, "@")}`);
+        }
+        else {
+            a.removeAttribute("href");
+        }
+    }
+}
+customElements.define("lb-mailto", LbMailto);
+//# sourceMappingURL=lb-mailto.browser.js.map

package/dist/lb-mailto.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-mailto.browser.js","sourceRoot":"","sources":["../widgets/lb-mailto.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;GAQG;AACH,MAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEhD,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,CAAC,CAAC,WAAW,GAAG,KAAK,IAAI,EAAE,CAAC;QAC5B,MAAM,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;QAC9B,IAAI,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B,CAAC,CAAC,YAAY,CACZ,MAAM,EACN,UAAU,kBAAkB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAC7D,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * Shows the value that landed on it as written, in the `<a>` its definition\n * holds, with a `mailto:` `href` that writes to it. Not a control: the hub\n * stamps `lb-column-value` on the tag and never gathers it.\n *\n * The address is encoded into the `href`, so a value carrying `?` or `&`\n * cannot add a subject, a body or another recipient to the message. A value\n * with no `@` shows as it arrived, with no `href`.\n */\nclass LbMailto extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const a = this.querySelector(\"a\");\n    if (!a) return;\n    a.textContent = value ?? \"\";\n    const address = value?.trim();\n    if (address?.includes(\"@\")) {\n      a.setAttribute(\n        \"href\",\n        `mailto:${encodeURIComponent(address).replace(/%40/g, \"@\")}`,\n      );\n    } else {\n      a.removeAttribute(\"href\");\n    }\n  }\n}\n\ncustomElements.define(\"lb-mailto\", LbMailto);\n"]}

package/dist/lb-mailto.html

@@ -0,0 +1,6 @@
+<!--
+  An email address as a mailto: link. The script writes the href from the
+  value, so the definition is an <a> with none: until a value lands it is
+  not a link.
+-->
+<a></a>

package/dist/lb-tel.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-tel.browser.d.ts.map

package/dist/lb-tel.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-tel.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-tel.browser.ts"],"names":[],"mappings":""}

package/dist/lb-tel.browser.js

@@ -0,0 +1,40 @@
+/// <reference lib="dom" />
+import { ATTR_COLUMN_VALUE } from "@loadbare/app/constants";
+/**
+ * Shows the value that landed on it as written, in the `<a>` its definition
+ * holds, with a `tel:` `href` that dials it. Not a control: the hub stamps
+ * `lb-column-value` on the tag and never gathers it.
+ *
+ * The `href` keeps a leading `+` and the digits, and drops the rest, so
+ * `(555) 123-4567` dials as `5551234567`. An extension written after `x`,
+ * `ext` or `extension` becomes `;ext=`, rather than digits dialed on the end
+ * of the number. A value with no digits shows as it arrived, with no `href`.
+ */
+class LbTel extends HTMLElement {
+    static observedAttributes = [ATTR_COLUMN_VALUE];
+    attributeChangedCallback(_name, _old, value) {
+        const a = this.querySelector("a");
+        if (!a)
+            return;
+        a.textContent = value ?? "";
+        const href = value === null ? null : tel(value);
+        if (href)
+            a.setAttribute("href", href);
+        else
+            a.removeAttribute("href");
+    }
+}
+/** The `tel:` URI for a number as a person writes it, null for no number. */
+function tel(value) {
+    const [number, ext] = value.split(EXTENSION, 2);
+    const digits = number.replace(/\D/g, "");
+    if (!digits)
+        return null;
+    const plus = number.trim().startsWith("+") ? "+" : "";
+    const extDigits = ext?.replace(/\D/g, "");
+    return `tel:${plus}${digits}${extDigits ? `;ext=${extDigits}` : ""}`;
+}
+/** Where a number ends and its extension begins. */
+const EXTENSION = /\s*(?:extension|ext\.?|x)\s*(?=\d)/i;
+customElements.define("lb-tel", LbTel);
+//# sourceMappingURL=lb-tel.browser.js.map

package/dist/lb-tel.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-tel.browser.js","sourceRoot":"","sources":["../widgets/lb-tel.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,KAAM,SAAQ,WAAW;IAC7B,MAAM,CAAC,kBAAkB,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEhD,wBAAwB,CACtB,KAAa,EACb,IAAmB,EACnB,KAAoB;QAEpB,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,CAAC,CAAC,WAAW,GAAG,KAAK,IAAI,EAAE,CAAC;QAC5B,MAAM,IAAI,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,IAAI;YAAE,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;YAClC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;;AAGH,6EAA6E;AAC7E,SAAS,GAAG,CAAC,KAAa;IACxB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,SAAS,GAAG,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC1C,OAAO,OAAO,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AACvE,CAAC;AAED,oDAAoD;AACpD,MAAM,SAAS,GAAG,qCAAqC,CAAC;AAExD,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * Shows the value that landed on it as written, in the `<a>` its definition\n * holds, with a `tel:` `href` that dials it. Not a control: the hub stamps\n * `lb-column-value` on the tag and never gathers it.\n *\n * The `href` keeps a leading `+` and the digits, and drops the rest, so\n * `(555) 123-4567` dials as `5551234567`. An extension written after `x`,\n * `ext` or `extension` becomes `;ext=`, rather than digits dialed on the end\n * of the number. A value with no digits shows as it arrived, with no `href`.\n */\nclass LbTel extends HTMLElement {\n  static observedAttributes = [ATTR_COLUMN_VALUE];\n\n  attributeChangedCallback(\n    _name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const a = this.querySelector(\"a\");\n    if (!a) return;\n    a.textContent = value ?? \"\";\n    const href = value === null ? null : tel(value);\n    if (href) a.setAttribute(\"href\", href);\n    else a.removeAttribute(\"href\");\n  }\n}\n\n/** The `tel:` URI for a number as a person writes it, null for no number. */\nfunction tel(value: string): string | null {\n  const [number, ext] = value.split(EXTENSION, 2);\n  const digits = number.replace(/\\D/g, \"\");\n  if (!digits) return null;\n  const plus = number.trim().startsWith(\"+\") ? \"+\" : \"\";\n  const extDigits = ext?.replace(/\\D/g, \"\");\n  return `tel:${plus}${digits}${extDigits ? `;ext=${extDigits}` : \"\"}`;\n}\n\n/** Where a number ends and its extension begins. */\nconst EXTENSION = /\\s*(?:extension|ext\\.?|x)\\s*(?=\\d)/i;\n\ncustomElements.define(\"lb-tel\", LbTel);\n"]}

package/dist/lb-tel.html

@@ -0,0 +1,6 @@
+<!--
+  A phone number as a tel: link. The script writes the href from the value,
+  so the definition is an <a> with none: until a value lands it is not a
+  link.
+-->
+<a></a>

package/dist-cli/package-root.js

@@ -0,0 +1,24 @@
+/**
+ * Walk up from `dir` to the nearest ancestor holding a package.json.
+ *
+ * Needed because a caller may run from source (cli/*.ts) or compiled
+ * (dist-cli/*.js) — both are the same distance from the package root, but
+ * nothing here should assume that stays true.
+ */
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+export async function findPackageRoot(dir) {
+    for (;;) {
+        try {
+            await readFile(path.join(dir, "package.json"), "utf-8");
+            return dir;
+        }
+        catch {
+            const parent = path.dirname(dir);
+            if (parent === dir) {
+                throw new Error(`could not find a package.json above '${dir}'`);
+            }
+            dir = parent;
+        }
+    }
+}

package/dist-cli/skills-cli.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+/**
+ * loadbare-widgets — the package's one command.
+ *
+ *   loadbare-widgets skills install [--copy] [--dir <path>]
+ *
+ * Installs the agent skills that ship in this package into `.agents/skills`
+ * and `.claude/skills`, or into `--dir` alone — see cli/skills.ts.  Nothing
+ * goes to stdout but the usage `--help` asks for; every other line is
+ * progress, on stderr.
+ */
+import { parseArgs } from "node:util";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { findPackageRoot } from "./package-root.js";
+import { installSkills, SKILL_DESTINATIONS } from "./skills.js";
+const USAGE = "usage: loadbare-widgets skills install [--copy] [--dir <path>]";
+async function main() {
+    let parsed;
+    try {
+        parsed = parseArgs({
+            allowPositionals: true,
+            options: {
+                copy: { type: "boolean", default: false },
+                dir: { type: "string" },
+                help: { type: "boolean", short: "h", default: false },
+            },
+        });
+    }
+    catch (err) {
+        console.error(`loadbare-widgets: ${err.message}`);
+        console.error(USAGE);
+        return 1;
+    }
+    const { values, positionals } = parsed;
+    // Asked for, the usage is the product, so it alone goes to stdout.
+    if (values.help) {
+        console.log(USAGE);
+        return 0;
+    }
+    if (positionals.join(" ") !== "skills install") {
+        console.error(USAGE);
+        return 1;
+    }
+    // Source and compiled output sit at different depths, so the package is
+    // found by walking up rather than by counting.
+    const packageRoot = await findPackageRoot(path.dirname(fileURLToPath(import.meta.url)));
+    const source = path.join(packageRoot, "skills");
+    const destinations = values.dir ? [values.dir] : SKILL_DESTINATIONS;
+    const result = installSkills({
+        source,
+        destinations,
+        copy: values.copy,
+        cwd: process.cwd(),
+        log: (line) => console.error(line),
+    });
+    // An install with no skills in it is a packaging fault, not a user error,
+    // and saying where it looked is what makes that diagnosable.
+    if (result.names.length === 0) {
+        console.error(`loadbare-widgets: this install of @loadbare/widgets carries no skills (looked in ${source})`);
+        return 1;
+    }
+    console.error("");
+    if (result.copiedInstead) {
+        console.error("Some links could not be created and those skills were copied instead.");
+        console.error("A copy does not follow the package when it is upgraded — rerun this");
+        console.error("command after an upgrade, or use --copy everywhere and commit the result.");
+        console.error("");
+    }
+    if (values.copy) {
+        console.error("These are copies.  Commit them, and rerun this command after upgrading");
+        console.error("@loadbare/widgets so the skill matches the widgets.");
+    }
+    else {
+        console.error("These are links into node_modules.  To keep them out of git:");
+        console.error("");
+        for (const destination of destinations) {
+            for (const name of result.names) {
+                console.error(`    ${path.join(destination, name)}`);
+            }
+        }
+    }
+    console.error("");
+    console.error("Start your agent from this directory and it will find them.");
+    return result.refused > 0 ? 1 : 0;
+}
+process.exitCode = await main();

package/dist-cli/skills.js

@@ -0,0 +1,125 @@
+/**
+ * Put the agent skills that ship in this package where a coding agent will
+ * find them.
+ *
+ * The same command as `loadbare-db skills install` and `loadbare-app skills
+ * install`, and deliberately a copy of them rather than a shared module:
+ * this package reaches `@loadbare/app` only through `constants` and `types`,
+ * and a skill installer is neither.  The copies are kept identical, so a
+ * change to one belongs in all three.
+ *
+ * A symlink by default, because the point is that the skill tracks the
+ * dependency: `npm install @loadbare/widgets@next` and the skill moves with it.
+ * `copy` is for a team that would rather commit the text than have every
+ * clone depend on `node_modules` being populated.
+ *
+ * Nothing is done to `.gitignore`.  Whether these paths are committed is a
+ * decision about the project, and the command that installs a file is not the
+ * one to make it.
+ */
+import { cpSync, existsSync, lstatSync, mkdirSync, readdirSync, readFileSync, rmSync, symlinkSync, } from "node:fs";
+import path from "node:path";
+/**
+ * Where a coding agent looks for skills.
+ *
+ * `.agents/skills` is the vendor-neutral location, read by Codex, Cursor and
+ * Copilot; `.claude/skills` is Claude Code's, and Cursor reads it too.  Both
+ * are written rather than guessing from what happens to be configured.
+ */
+export const SKILL_DESTINATIONS = [".agents/skills", ".claude/skills"];
+/** `absent` covers a dangling symlink, which `existsSync` reports as missing. */
+function entryKind(p) {
+    let stat;
+    try {
+        stat = lstatSync(p);
+    }
+    catch {
+        return "absent";
+    }
+    if (stat.isSymbolicLink())
+        return "symlink";
+    if (stat.isDirectory())
+        return "directory";
+    return "other";
+}
+/** The `name:` a skill directory declares, or null if there is no skill there. */
+function declaredSkillName(dir) {
+    try {
+        const match = /^name:\s*(\S+)\s*$/m.exec(readFileSync(path.join(dir, "SKILL.md"), "utf-8"));
+        return match?.[1] ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * A link into `node_modules` is relative, so the project stays movable and the
+ * link means the same thing to everyone who checks it out.  A globally
+ * installed package gets an absolute path, since a relative one breaks the
+ * moment the project moves.
+ */
+function linkTarget(from, to, cwd) {
+    const inside = path.resolve(from).startsWith(path.resolve(cwd) + path.sep);
+    return inside
+        ? path.relative(path.dirname(path.resolve(cwd, to)), path.resolve(from))
+        : path.resolve(from);
+}
+/** The skills under `source`: each directory holding a `SKILL.md`. */
+export function shippedSkills(source) {
+    if (!existsSync(source))
+        return [];
+    return readdirSync(source, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory() &&
+        existsSync(path.join(source, entry.name, "SKILL.md")))
+        .map((entry) => entry.name)
+        .sort();
+}
+export function installSkills(options) {
+    const { source, destinations, copy, cwd, log } = options;
+    const names = shippedSkills(source);
+    let refused = 0;
+    let copiedInstead = false;
+    for (const destination of destinations) {
+        for (const name of names) {
+            const from = path.join(source, name);
+            const to = path.join(destination, name);
+            const at = path.resolve(cwd, to);
+            const kind = entryKind(at);
+            // A directory this command wrote says so on its own front matter, and
+            // is replaced.  Anything else at that path belongs to someone, and a
+            // skill install is not permitted to be the thing that lost it.
+            if (kind === "directory" && declaredSkillName(at) !== name) {
+                log(`  refused ${to} — a directory is already there and is not the ${name} skill`);
+                refused++;
+                continue;
+            }
+            if (kind === "other") {
+                log(`  refused ${to} — a file is already there`);
+                refused++;
+                continue;
+            }
+            mkdirSync(path.resolve(cwd, destination), { recursive: true });
+            rmSync(at, { recursive: true, force: true });
+            if (copy) {
+                cpSync(from, at, { recursive: true });
+                log(`  copied  ${to}`);
+                continue;
+            }
+            try {
+                symlinkSync(linkTarget(from, to, cwd), at, "dir");
+                log(`  linked  ${to}`);
+            }
+            catch (error) {
+                // Windows refuses a symlink to an unprivileged process unless
+                // developer mode is on.  A copy is the same skill, so the install
+                // succeeds and the difference is reported rather than raised.
+                if (error.code !== "EPERM")
+                    throw error;
+                cpSync(from, at, { recursive: true });
+                copiedInstead = true;
+                log(`  copied  ${to}`);
+            }
+        }
+    }
+    return { names, refused, copiedInstead };
+}

package/docs/lb-checkbox.md

@@ -46,8 +46,8 @@ for now.
 ## The control
 
 The checkbox is checked when its column is anything but `false` or null, and
-sends `"true"` or `"false"`.  See
-[checkboxes](../../app/docs/reference/data-binding.md#checkboxes).
+sends `"true"` or `"false"`.  See "Checkboxes" in the data-binding reference
+of the loadbare-app skill.
 
 ## Styling
 

package/docs/lb-form.md

@@ -26,8 +26,8 @@ Requires `exp-id`.
 A row with a key is on record, and each control saves its own column on
 `change` with `lb-request="lb-row-update"`.  A row whose key is empty is a new
 one not yet entered: the hub sends no update for it, so the controls only
-hold what a submit will gather.  See
-[a row not yet entered](../../app/docs/reference/data-binding.md#a-row-not-yet-entered).
+hold what a submit will gather.  See "A row not yet entered" in the
+data-binding reference of the loadbare-app skill.
 
 A definition only, with no script of its own.
 

package/docs/lb-input.md

@@ -43,13 +43,15 @@ off drops the attribute.
 `lb-input` is a form-associated custom element.  Its `value` property gets and
 sets the value of the `<input>` inside it, and it fires `change` on itself when
 that `<input>` fires `change`.  A form reset returns the `<input>` to its
-default.
+default.  A refusal's message for its column goes to the `<input>`, as HTML's
+own validity.
 
 ## Inside a form
 
 An `lb-input` inside an `lb-row-insert` or `lb-row-update` form carries no
 `lb-request`.  The hub gathers every `lb-column` whose form owner is the form
-on submit and sends one request for all of them.
+on submit and sends one request for all of them, so a widget that also sent
+its own would write the same edit twice.
 
 ```html
 <form lb-query="people" lb-request="lb-row-insert">

package/docs/lb-mailto.md

@@ -0,0 +1,29 @@
+# `lb-mailto`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+An email address shown as written, as a `mailto:` link.  Not a control:
+write `lb-column` on the tag, and the hub lands the column on it and never
+gathers it.
+
+```html
+<lb-mailto lb-column="email"></lb-mailto>
+```
+
+It takes no parameters.  To edit the address, use
+`<lb-input exp-type="email">`.
+
+## The value
+
+The link's text is the value as it arrived.  Its `href` is `mailto:` and the
+address, encoded, so a value carrying `?` or `&` cannot add a subject, a body
+or another recipient to the message.
+
+A value with no `@` shows as it arrived, with no `href`.  Null shows
+nothing.
+
+## Styling
+
+The definition is an `<a>`, with no `href` while there is no address, so
+`lb-mailto a:not([href])` selects a value that is no link.  The hub stamps
+the tag with `lb-column-value`, the value as it arrived.

package/docs/lb-master.md

@@ -46,8 +46,8 @@ Requires `exp-row`.
 | Cancel   | A new row         | Resets the form                               |
 
 Each carries `data-mode`, `on-record` or `new`, and the stylesheet shows each
-only in its mode.  A new row is one whose key is empty, a
-[row not yet entered](../../app/docs/reference/data-binding.md#a-row-not-yet-entered).
+only in its mode.  A new row is one whose key is empty, a row not yet entered
+(see that section in the data-binding reference of the loadbare-app skill).
 
 Which row shows is a query parm, and only the page knows its name, so New is
 a request the page declares.  Its handler empties the parm, and the row

package/docs/lb-options.md

@@ -80,6 +80,8 @@ and `disabled` so it is never a choice.
 `lb-options` is a form-associated custom element.  Its `value` property gets
 and sets the value of the `<select>` inside it, and it fires `change` on itself
 when that `<select>` fires `change`.  A form reset selects the first option.
+A refusal's message for its column goes to the `<select>`, as HTML's own
+validity.
 
 The hub reads the element's own `lb-column` from the row around it, and lands
 the rows of its `lb-query` inside it.  A value set before the option it names

package/docs/lb-select.md

@@ -37,7 +37,8 @@ improvements through iterative use.
 `lb-select` is a form-associated custom element.  Its `value` property gets
 and sets the value of the `<select>` inside it, and it fires `change` on itself
 when that `<select>` fires `change`.  A form reset selects the option marked
-`selected`, or the first option.
+`selected`, or the first option.  A refusal's message for its column goes to
+the `<select>`, as HTML's own validity.
 
 ## Choosing
 

package/docs/lb-table.md

@@ -72,8 +72,9 @@ filter does not pass is hidden.
 ## The order on the heading
 
 The heading of the column the rows are sorted by carries a triangle, up for
-ascending and down for descending, and `aria-sort`.  Only the order's
-leading term is shown.  A heading's column is the `lb-column` in the cell
+ascending and down for descending, and `aria-sort`, read from the
+`lb-query-order` the hub stamps on the table.  Only the order's leading term
+is shown.  A heading's column is the `lb-column` in the cell
 at the same position in the row template, on the cell or inside it.  A cell
 naming no column, or several, gives its heading none.
 
@@ -160,7 +161,7 @@ created, or moved by changing a column the order reads.
 
 The footer is an ordinary part of the page, not a row from the table's query.
 An aggregate there covers every row showing.  A figure that is not a sum of the rows,
-such as a budget, is an element with its own `lb-query`, a query of kind
+such as a budget, is a `<tr>` with its own `lb-query`, a query of kind
 `row` declared on the server like any other.
 
 ## Styling an empty table

package/docs/lb-tel.md

@@ -0,0 +1,32 @@
+# `lb-tel`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A phone number shown as written, as a `tel:` link.  Not a control: write
+`lb-column` on the tag, and the hub lands the column on it and never gathers
+it.
+
+```html
+<lb-tel lb-column="phone"></lb-tel>
+```
+
+It takes no parameters.  To edit the number, use
+`<lb-input exp-type="tel">`.
+
+## The value
+
+The link's text is the value as it arrived.  Its `href` keeps a leading `+`
+and the digits, and drops everything else, so `(555) 123-4567` dials
+`tel:5551234567`.
+
+An extension written after `x`, `ext`, `ext.` or `extension` goes in the
+`href` as `;ext=`, so `555-123-4567 x89` dials `tel:5551234567;ext=89`.
+
+A value with no digits shows as it arrived, with no `href`.  Null shows
+nothing.
+
+## Styling
+
+The definition is an `<a>`, with no `href` while there is nothing to dial,
+so `lb-tel a:not([href])` selects a number that is no link.  The hub stamps
+the tag with `lb-column-value`, the value as it arrived.

package/docs/lb-unknown-page.md

@@ -39,5 +39,5 @@ there is no page label to show.
 ## Inside the hub
 
 The hub finds the dialog inside its own subtree and nowhere else, so the tag
-goes inside `<lb-hub>`.  See [`chrome.html`](../../app/docs/reference/chrome.md)
-for the same dialog written by hand.
+goes inside `<lb-hub>`.  The chrome reference of the loadbare-app skill shows
+the same dialog written by hand in `chrome.html`.

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@loadbare/widgets",
-  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox, number, date",
-  "version": "0.10.0",
+  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox, number, date, tel, mailto",
+  "version": "0.11.0",
   "type": "module",
   "files": [
     "dist",
+    "dist-cli",
     "docs",
+    "skills/loadbare-widgets/SKILL.md",
+    "skills/loadbare-widgets/references",
     "README.md"
   ],
   "publishConfig": {
@@ -17,12 +20,17 @@
       "default": "./dist/index.js"
     }
   },
+  "bin": {
+    "loadbare-widgets": "dist-cli/skills-cli.js"
+  },
   "loadbare": {
     "widgets": "./dist"
   },
   "scripts": {
-    "build": "node scripts/build.mjs",
-    "postbuild": "node ../../scripts/check-dist-imports.mjs",
+    "build": "node scripts/build.mjs && npm run build:cli && npm run build:skills",
+    "build:cli": "rm -rf dist-cli && tsc --project tsconfig.cli.json",
+    "build:skills": "node scripts/build-skills.mjs",
+    "postbuild": "node --eval \"fs.chmodSync('dist-cli/skills-cli.js', 0o755)\" --input-type=module && node ../../scripts/check-dist-imports.mjs",
     "test": "tsx --test \"tests/**/*.test.ts\"",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write .",