@dowel-ui/registry 0.4.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build.d.ts +32 -4
- package/dist/build.d.ts.map +1 -1
- package/dist/build.js +528 -78
- package/dist/build.js.map +1 -1
- package/dist/generate.d.ts +71 -0
- package/dist/generate.d.ts.map +1 -0
- package/dist/generate.js +324 -0
- package/dist/generate.js.map +1 -0
- package/dist/index.d.ts +184 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +648 -2
- package/dist/index.js.map +1 -0
- package/dist/{schema-ByqIpT47.js → schema-BbyNjH6Q.js} +25 -5
- package/dist/schema-BbyNjH6Q.js.map +1 -0
- package/dist/{schema-Cc32v3R-.d.ts → schema-BmYeKe9e.d.ts} +36 -2
- package/dist/schema-BmYeKe9e.d.ts.map +1 -0
- package/package.json +12 -4
- package/src/agent-docs.ts +544 -0
- package/src/build.ts +66 -4
- package/src/custom.ts +312 -0
- package/src/generate.ts +500 -0
- package/src/index.ts +41 -0
- package/src/schema.ts +23 -0
- package/dist/schema-ByqIpT47.js.map +0 -1
- package/dist/schema-Cc32v3R-.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,2 +1,648 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { blocksPathFor, planUi, renderBrief, renderPlan } from "./generate.js";
|
|
2
|
+
import { a as registryIndexEntrySchema, c as registryItemTypeSchema, i as registryFileTypeSchema, l as hashContent, n as registryAccessSchema, o as registryIndexSchema, r as registryFileSchema, s as registryItemSchema, t as REGISTRY_VERSION } from "./schema-BbyNjH6Q.js";
|
|
3
|
+
import { existsSync, readFileSync } from "node:fs";
|
|
4
|
+
import { join } from "node:path";
|
|
5
|
+
import { fileURLToPath } from "node:url";
|
|
6
|
+
import { z } from "zod";
|
|
7
|
+
//#region src/custom.ts
|
|
8
|
+
/**
|
|
9
|
+
* Building a registry of your own components.
|
|
10
|
+
*
|
|
11
|
+
* The CLI has always been able to install from any registry — `--registry`
|
|
12
|
+
* takes a URL or a directory — but producing one meant reimplementing this
|
|
13
|
+
* package. So an organisation that wanted its own components installed the same
|
|
14
|
+
* way had the consumer half and none of the producer half.
|
|
15
|
+
*
|
|
16
|
+
* The authoring shape is declared here rather than imported from the component
|
|
17
|
+
* package, because the registry *is* the contract. A team publishing their own
|
|
18
|
+
* components should not have to depend on somebody else's component library to
|
|
19
|
+
* describe their own.
|
|
20
|
+
*/
|
|
21
|
+
/** Where an item's files are written in the consuming project. */
|
|
22
|
+
const itemGroupSchema = z.enum([
|
|
23
|
+
"ui",
|
|
24
|
+
"blocks",
|
|
25
|
+
"lib",
|
|
26
|
+
"hooks"
|
|
27
|
+
]);
|
|
28
|
+
const GROUP_FILE_TYPE = {
|
|
29
|
+
ui: "registry:ui",
|
|
30
|
+
blocks: "registry:block",
|
|
31
|
+
lib: "registry:lib",
|
|
32
|
+
hooks: "registry:hook"
|
|
33
|
+
};
|
|
34
|
+
const itemSourceSchema = z.object({
|
|
35
|
+
name: z.string().regex(/^[a-z][a-z0-9-]*$/),
|
|
36
|
+
title: z.string().min(1),
|
|
37
|
+
description: z.string().min(10),
|
|
38
|
+
category: z.string().min(1),
|
|
39
|
+
status: z.enum([
|
|
40
|
+
"stable",
|
|
41
|
+
"beta",
|
|
42
|
+
"experimental"
|
|
43
|
+
]).default("stable"),
|
|
44
|
+
/** Where the files land. Defaults to `ui`. */
|
|
45
|
+
group: itemGroupSchema.default("ui"),
|
|
46
|
+
/** npm packages the source imports. */
|
|
47
|
+
dependencies: z.array(z.string()).default([]),
|
|
48
|
+
/** Other registry items this one imports, upstream ones included. */
|
|
49
|
+
registryDependencies: z.array(z.string()).default([]),
|
|
50
|
+
/** Files to publish, relative to the item's own directory. */
|
|
51
|
+
files: z.array(z.string().min(1)).min(1),
|
|
52
|
+
a11y: z.string().optional(),
|
|
53
|
+
access: registryAccessSchema,
|
|
54
|
+
/**
|
|
55
|
+
* Overrides where the item's directory is, relative to the registry root.
|
|
56
|
+
* Defaults to `<group>/<name>`, which is the layout this repository uses.
|
|
57
|
+
*/
|
|
58
|
+
directory: z.string().optional()
|
|
59
|
+
});
|
|
60
|
+
const registryConfigSchema = z.object({
|
|
61
|
+
/** Absolute path the item directories are resolved against. */
|
|
62
|
+
root: z.string().min(1),
|
|
63
|
+
items: z.array(itemSourceSchema).min(1),
|
|
64
|
+
/**
|
|
65
|
+
* A registry to layer on top of — a URL, or a directory on disk.
|
|
66
|
+
*
|
|
67
|
+
* The reason a private registry is worth having at all: one URL that serves
|
|
68
|
+
* both the upstream components and yours, so a consumer configures one place
|
|
69
|
+
* and `add` resolves across both.
|
|
70
|
+
*/
|
|
71
|
+
extends: z.string().min(1).optional(),
|
|
72
|
+
/** Written into the index, so a consumer can see what produced it. */
|
|
73
|
+
generatedFrom: z.string().min(1).default("custom-registry")
|
|
74
|
+
});
|
|
75
|
+
/** Identity helper, for editor autocomplete inside a config file. */
|
|
76
|
+
function defineRegistryConfig(config) {
|
|
77
|
+
return config;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Every `@/...` import a source file makes, as `[group, rest]`.
|
|
81
|
+
*
|
|
82
|
+
* Published source is authored against the library's own aliases and rewritten
|
|
83
|
+
* at install time to wherever the consuming project keeps things. Both checks
|
|
84
|
+
* below depend on reading those imports.
|
|
85
|
+
*/
|
|
86
|
+
function authoredImports(content) {
|
|
87
|
+
const found = [];
|
|
88
|
+
for (const match of content.matchAll(/["']@\/(components|lib|hooks|blocks)\/([^"']+)["']/g)) if (match[1] && match[2]) found.push({
|
|
89
|
+
group: match[1],
|
|
90
|
+
rest: match[2]
|
|
91
|
+
});
|
|
92
|
+
return found;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Catches source written against the *installed* paths instead of the authored
|
|
96
|
+
* ones.
|
|
97
|
+
*
|
|
98
|
+
* `@/components/ui/badge` looks right — it is where the file ends up — and
|
|
99
|
+
* rewrites to `@/components/ui/ui/badge`, because the rewriter maps
|
|
100
|
+
* `@/components/` to wherever the project keeps its components. The result
|
|
101
|
+
* compiles nowhere and the doubled segment is easy to stare past. The authored
|
|
102
|
+
* form is `@/components/badge`.
|
|
103
|
+
*/
|
|
104
|
+
function assertAuthoredPaths(name, content) {
|
|
105
|
+
const groups = /* @__PURE__ */ new Set([
|
|
106
|
+
"ui",
|
|
107
|
+
"blocks",
|
|
108
|
+
"lib",
|
|
109
|
+
"hooks"
|
|
110
|
+
]);
|
|
111
|
+
const mistaken = authoredImports(content).filter((entry) => groups.has(entry.rest.split("/")[0] ?? "")).map((entry) => `@/${entry.group}/${entry.rest}`);
|
|
112
|
+
if (mistaken.length > 0) throw new Error(`Item "${name}" imports from an installed path rather than an authored one:\n ${[...new Set(mistaken)].join("\n ")}\nWrite \`@/components/badge\`, not \`@/components/ui/badge\` — the leading group is rewritten to wherever the consuming project keeps its components, so naming it twice produces a path that resolves nowhere.`);
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Catches a component importing something it never declared.
|
|
116
|
+
*
|
|
117
|
+
* The undeclared dependency is not installed alongside it, so the install
|
|
118
|
+
* succeeds and the project fails to build — in someone else's repository, where
|
|
119
|
+
* it is hardest to trace back to here.
|
|
120
|
+
*/
|
|
121
|
+
function assertDeclaredDependencies(source, content) {
|
|
122
|
+
const declared = /* @__PURE__ */ new Set([...source.registryDependencies, source.name]);
|
|
123
|
+
const undeclared = authoredImports(content).filter((entry) => entry.group === "components" || entry.group === "blocks").map((entry) => entry.rest.split("/")[0] ?? "").filter((imported) => imported.length > 0 && !declared.has(imported));
|
|
124
|
+
if (undeclared.length > 0) throw new Error(`Item "${source.name}" imports ${[...new Set(undeclared)].join(", ")} but does not list them in registryDependencies. They would not be installed alongside it, and the failure would surface as a build error in the consuming project.`);
|
|
125
|
+
}
|
|
126
|
+
function toItem(root, source) {
|
|
127
|
+
const directory = source.directory ?? join(source.group, source.name);
|
|
128
|
+
const itemDir = join(root, directory);
|
|
129
|
+
const files = source.files.map((file) => {
|
|
130
|
+
const path = join(itemDir, file);
|
|
131
|
+
if (!existsSync(path)) throw new Error(`Item "${source.name}" lists ${file}, but ${path} does not exist. A registry that names a file it cannot read produces a broken install in someone else's project, where it is hardest to diagnose.`);
|
|
132
|
+
const content = readFileSync(path, "utf8");
|
|
133
|
+
assertAuthoredPaths(source.name, content);
|
|
134
|
+
assertDeclaredDependencies(source, content);
|
|
135
|
+
return {
|
|
136
|
+
path: `${source.group}/${file}`,
|
|
137
|
+
type: GROUP_FILE_TYPE[source.group],
|
|
138
|
+
content,
|
|
139
|
+
hash: hashContent(content)
|
|
140
|
+
};
|
|
141
|
+
});
|
|
142
|
+
return registryItemSchema.parse({
|
|
143
|
+
registryVersion: 1,
|
|
144
|
+
name: source.name,
|
|
145
|
+
type: registryItemTypeSchema.parse(GROUP_FILE_TYPE[source.group]),
|
|
146
|
+
title: source.title,
|
|
147
|
+
description: source.description,
|
|
148
|
+
category: source.category,
|
|
149
|
+
status: source.status,
|
|
150
|
+
dependencies: source.dependencies,
|
|
151
|
+
registryDependencies: source.registryDependencies,
|
|
152
|
+
files,
|
|
153
|
+
a11y: source.a11y,
|
|
154
|
+
access: source.access
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
async function readUpstream(base) {
|
|
158
|
+
const isHttp = base.startsWith("http://") || base.startsWith("https://");
|
|
159
|
+
const load = async (file) => {
|
|
160
|
+
if (!isHttp) {
|
|
161
|
+
const root = base.startsWith("file:") ? fileURLToPath(base) : base;
|
|
162
|
+
const path = join(root, file);
|
|
163
|
+
if (!existsSync(path)) throw new Error(`Upstream registry has no ${file} at ${path}.`);
|
|
164
|
+
return JSON.parse(readFileSync(path, "utf8"));
|
|
165
|
+
}
|
|
166
|
+
const url = `${base.replace(/\/$/, "")}/${file}`;
|
|
167
|
+
const response = await fetch(url);
|
|
168
|
+
if (!response.ok) throw new Error(`Upstream registry returned ${String(response.status)} for ${url}.`);
|
|
169
|
+
return await response.json();
|
|
170
|
+
};
|
|
171
|
+
const index = registryIndexSchema.parse(await load("index.json"));
|
|
172
|
+
const items = [];
|
|
173
|
+
for (const entry of index.items) {
|
|
174
|
+
if (entry.access === "pro") continue;
|
|
175
|
+
items.push(registryItemSchema.parse(await load(`${entry.name}.json`)));
|
|
176
|
+
}
|
|
177
|
+
return items;
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Every `registryDependencies` name must exist in the finished registry.
|
|
181
|
+
*
|
|
182
|
+
* Checked here, once, rather than discovered by a consumer whose `add` walks
|
|
183
|
+
* into a name nothing serves. This is the single most common way a
|
|
184
|
+
* hand-assembled registry is broken, and it is invisible until someone installs.
|
|
185
|
+
*/
|
|
186
|
+
function assertResolvable(items) {
|
|
187
|
+
const known = new Set(items.map((item) => item.name));
|
|
188
|
+
const missing = [];
|
|
189
|
+
for (const item of items) for (const dependency of item.registryDependencies) if (!known.has(dependency)) missing.push(`${item.name} → ${dependency}`);
|
|
190
|
+
if (missing.length > 0) throw new Error(`These registry dependencies are not in the registry:\n ${missing.join("\n ")}\nAdd them, or extend a registry that has them.`);
|
|
191
|
+
}
|
|
192
|
+
async function buildCustomRegistry(config) {
|
|
193
|
+
const parsed = registryConfigSchema.parse(config);
|
|
194
|
+
const local = parsed.items.map((item) => toItem(parsed.root, item));
|
|
195
|
+
const duplicates = local.map((item) => item.name).filter((name, index, all) => all.indexOf(name) !== index);
|
|
196
|
+
if (duplicates.length > 0) throw new Error(`Declared more than once: ${[...new Set(duplicates)].join(", ")}.`);
|
|
197
|
+
if (!parsed.extends) {
|
|
198
|
+
assertResolvable(local);
|
|
199
|
+
return {
|
|
200
|
+
items: local,
|
|
201
|
+
overridden: [],
|
|
202
|
+
inherited: 0
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
const upstream = await readUpstream(parsed.extends);
|
|
206
|
+
const localNames = new Set(local.map((item) => item.name));
|
|
207
|
+
const overridden = upstream.filter((item) => localNames.has(item.name)).map((item) => item.name);
|
|
208
|
+
const inherited = upstream.filter((item) => !localNames.has(item.name));
|
|
209
|
+
const items = [...inherited, ...local].sort((a, b) => a.name.localeCompare(b.name));
|
|
210
|
+
assertResolvable(items);
|
|
211
|
+
return {
|
|
212
|
+
items,
|
|
213
|
+
overridden,
|
|
214
|
+
inherited: inherited.length
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region src/agent-docs.ts
|
|
219
|
+
const CATEGORY_LABELS = {
|
|
220
|
+
foundation: "Foundation",
|
|
221
|
+
form: "Forms",
|
|
222
|
+
overlay: "Overlays",
|
|
223
|
+
navigation: "Navigation",
|
|
224
|
+
display: "Display",
|
|
225
|
+
data: "Data",
|
|
226
|
+
feedback: "Feedback",
|
|
227
|
+
layout: "Layout",
|
|
228
|
+
ai: "AI"
|
|
229
|
+
};
|
|
230
|
+
const CATEGORY_ORDER = [
|
|
231
|
+
"foundation",
|
|
232
|
+
"form",
|
|
233
|
+
"overlay",
|
|
234
|
+
"navigation",
|
|
235
|
+
"display",
|
|
236
|
+
"data",
|
|
237
|
+
"feedback",
|
|
238
|
+
"layout",
|
|
239
|
+
"ai"
|
|
240
|
+
];
|
|
241
|
+
function label(category) {
|
|
242
|
+
return CATEGORY_LABELS[category] ?? category;
|
|
243
|
+
}
|
|
244
|
+
/** Ordered by curation where curated, alphabetical for anything new. */
|
|
245
|
+
function categoriesOf(entries) {
|
|
246
|
+
const present = new Set(entries.map((entry) => entry.category));
|
|
247
|
+
const known = CATEGORY_ORDER.filter((category) => present.has(category));
|
|
248
|
+
const rest = [...present].filter((category) => !CATEGORY_ORDER.includes(category)).sort();
|
|
249
|
+
return [...known, ...rest];
|
|
250
|
+
}
|
|
251
|
+
function byType(index, type) {
|
|
252
|
+
return index.items.filter((entry) => entry.type === type).sort((a, b) => a.name.localeCompare(b.name));
|
|
253
|
+
}
|
|
254
|
+
function components(index) {
|
|
255
|
+
return byType(index, "registry:ui");
|
|
256
|
+
}
|
|
257
|
+
function blocks(index) {
|
|
258
|
+
return byType(index, "registry:block");
|
|
259
|
+
}
|
|
260
|
+
/**
|
|
261
|
+
* Accessibility rules that differ from what a model has seen elsewhere.
|
|
262
|
+
*
|
|
263
|
+
* An agent trained on every other React library will reach for `disabled` on a
|
|
264
|
+
* loading button and a live region on every alert. Stating only the deltas is
|
|
265
|
+
* deliberate: a general accessibility lecture is ignored, a short list of
|
|
266
|
+
* "here this is different" is followed.
|
|
267
|
+
*/
|
|
268
|
+
const ACCESSIBILITY_DELTAS = [
|
|
269
|
+
"A loading `Button` uses `aria-disabled` + `aria-busy` and guards its own click handler. Never add `disabled` to it — disabling a control mid-action strands keyboard focus.",
|
|
270
|
+
"`Alert` is not a live region by default. One that exists on first paint announces for no reason. Opt in with `live=\"polite\"` or `live=\"assertive\"` only when the alert appears in response to something.",
|
|
271
|
+
"`Separator`, `Skeleton` and `Spinner` are decorative and stay out of the accessibility tree unless given a label. Do not add `role` or `aria-label` to them by reflex.",
|
|
272
|
+
"`PopoverContent` carries `role=\"dialog\"` and warns in development without an accessible name. Always give it `aria-label` or `aria-labelledby`.",
|
|
273
|
+
"Never use colour as the only signal. The `monochrome` preset exists as a standing check on exactly this — if a state is unreadable under it, the component is wrong."
|
|
274
|
+
];
|
|
275
|
+
const TOKEN_RULES = [
|
|
276
|
+
"Use semantic tokens (`bg-background`, `text-foreground`, `border-border`, `ring-ring`, `bg-primary`, `text-muted-foreground`). Never raw hex, and never Tailwind's own palette (`bg-slate-900`, `text-gray-500`) — those do not follow the theme and break every preset and dark mode.",
|
|
277
|
+
"Spacing, radius and type come from the scale. `rounded-md` and `rounded-lg` re-proportion with `--radius-scale`; an arbitrary `rounded-[7px]` does not.",
|
|
278
|
+
"Durations derive from `--motion-scale`. Do not hardcode transition timings.",
|
|
279
|
+
"Compose class names with `cn()` from the project's utils, so consumer overrides win over defaults."
|
|
280
|
+
];
|
|
281
|
+
function conventionsDoc(context) {
|
|
282
|
+
const { libraryName, cliPackage, importFrom, docsUrl } = context;
|
|
283
|
+
return `# ${libraryName} — conventions
|
|
284
|
+
|
|
285
|
+
Rules for writing code in this project. ${libraryName} is **source-first**: its
|
|
286
|
+
components are files in this repository, not a dependency you can reason about
|
|
287
|
+
from its README. They are yours to edit, and edits are preserved across updates.
|
|
288
|
+
|
|
289
|
+
## The rule that matters most
|
|
290
|
+
|
|
291
|
+
**Do not hand-write a component that ${libraryName} already has.** Check the
|
|
292
|
+
catalogue in \`components.md\` first. Writing a second Button — with different
|
|
293
|
+
focus rings, different disabled semantics, different tokens — is the single
|
|
294
|
+
most common and most damaging thing to do here.
|
|
295
|
+
|
|
296
|
+
## Adding a component
|
|
297
|
+
|
|
298
|
+
\`\`\`bash
|
|
299
|
+
npx ${cliPackage} add <name>
|
|
300
|
+
\`\`\`
|
|
301
|
+
|
|
302
|
+
This writes the source into the project and installs whatever it depends on.
|
|
303
|
+
\`add\` is safe to re-run: an untouched file is left alone, an edited one is
|
|
304
|
+
never overwritten without \`--overwrite\`.
|
|
305
|
+
|
|
306
|
+
Do not \`npm install\` a component. Do not copy source out of the documentation
|
|
307
|
+
by hand — the CLI resolves the dependency graph and rewrites imports to this
|
|
308
|
+
project's path alias, and doing it manually gets both wrong.
|
|
309
|
+
|
|
310
|
+
## Importing
|
|
311
|
+
|
|
312
|
+
\`\`\`tsx
|
|
313
|
+
import { Button, Card, CardContent } from "${importFrom}";
|
|
314
|
+
\`\`\`
|
|
315
|
+
|
|
316
|
+
## Styling
|
|
317
|
+
|
|
318
|
+
${TOKEN_RULES.map((rule) => `- ${rule}`).join("\n")}
|
|
319
|
+
|
|
320
|
+
## Accessibility
|
|
321
|
+
|
|
322
|
+
Targeted at WCAG 2.2 AA, verified with axe per component. Where ${libraryName}
|
|
323
|
+
differs from what you have seen in other libraries:
|
|
324
|
+
|
|
325
|
+
${ACCESSIBILITY_DELTAS.map((rule) => `- ${rule}`).join("\n")}
|
|
326
|
+
|
|
327
|
+
## Before you build a page
|
|
328
|
+
|
|
329
|
+
Check \`components.md\` for a **block** that already covers it. A block is a
|
|
330
|
+
whole section — a login form, a settings page, a chat surface — and installing
|
|
331
|
+
one brings every component it is assembled from. Building a dashboard out of
|
|
332
|
+
individual primitives when \`add dashboard\` exists is wasted work.
|
|
333
|
+
|
|
334
|
+
## Reference
|
|
335
|
+
|
|
336
|
+
- Documentation: ${docsUrl}
|
|
337
|
+
- Full text for models: ${docsUrl}/llms-full.txt
|
|
338
|
+
`;
|
|
339
|
+
}
|
|
340
|
+
function componentsDoc(context) {
|
|
341
|
+
const { index, libraryName, cliPackage, installed } = context;
|
|
342
|
+
const have = new Set(installed ?? []);
|
|
343
|
+
const known = installed !== void 0;
|
|
344
|
+
const ui = components(index);
|
|
345
|
+
const blk = blocks(index);
|
|
346
|
+
const lines = [
|
|
347
|
+
`# ${libraryName} — catalogue`,
|
|
348
|
+
"",
|
|
349
|
+
`${String(ui.length)} components and ${String(blk.length)} blocks, generated from \`${index.generatedFrom}\`. This is the complete list — anything not here does not exist.`,
|
|
350
|
+
""
|
|
351
|
+
];
|
|
352
|
+
if (known) lines.push("`✓` marks what is already installed in this project. Everything else needs", `\`npx ${cliPackage} add <name>\` before it can be imported.`, "");
|
|
353
|
+
const mark = (entry) => known ? have.has(entry.name) ? "✓ " : " " : "";
|
|
354
|
+
for (const category of categoriesOf(ui)) {
|
|
355
|
+
lines.push(`## ${label(category)}`, "");
|
|
356
|
+
for (const entry of ui.filter((item) => item.category === category)) {
|
|
357
|
+
const status = entry.status === "stable" ? "" : ` _(${entry.status})_`;
|
|
358
|
+
lines.push(`- ${mark(entry)}**${entry.name}** — ${entry.description}${status}`);
|
|
359
|
+
}
|
|
360
|
+
lines.push("");
|
|
361
|
+
}
|
|
362
|
+
lines.push("## Blocks", "", "Whole sections. Installing one installs every component it is built from.", "");
|
|
363
|
+
for (const entry of blk) {
|
|
364
|
+
const deps = entry.registryDependencies.length;
|
|
365
|
+
const resolves = deps > 0 ? ` _(resolves ${String(deps)} components)_` : "";
|
|
366
|
+
lines.push(`- ${mark(entry)}**${entry.name}** — ${entry.description}${resolves}`);
|
|
367
|
+
}
|
|
368
|
+
lines.push("");
|
|
369
|
+
return lines.join("\n");
|
|
370
|
+
}
|
|
371
|
+
function aiDoc(context) {
|
|
372
|
+
const { index, libraryName, cliPackage } = context;
|
|
373
|
+
const ai = components(index).filter((entry) => entry.category === "ai");
|
|
374
|
+
return `# ${libraryName} — AI components
|
|
375
|
+
|
|
376
|
+
${String(ai.length)} surfaces for AI features. Reach for these before building
|
|
377
|
+
anything custom for a model-facing interface.
|
|
378
|
+
|
|
379
|
+
Most component sets ship a chat transcript and stop. Real AI features are
|
|
380
|
+
extraction, enrichment, autofill and agents that *change things* — so the parts
|
|
381
|
+
that matter are the ones around the transcript, not the transcript itself.
|
|
382
|
+
|
|
383
|
+
${ai.map((entry) => `- **${entry.name}** — ${entry.description}`).join("\n")}
|
|
384
|
+
|
|
385
|
+
## Choosing between them
|
|
386
|
+
|
|
387
|
+
- Rendering a conversation → \`ai-conversation\` with \`ai-message\` and \`ai-response\`.
|
|
388
|
+
- The composer → \`ai-prompt-input\`, with \`ai-model-selector\` if the model is switchable.
|
|
389
|
+
- A tool the model called → \`ai-tool\`. Its arguments and result belong there, not in prose.
|
|
390
|
+
- Asking permission *before* a tool runs → \`ai-approval-request\`.
|
|
391
|
+
- Reporting what it did *after* → \`ai-action-ledger\`, which is also where reversibility belongs. A deletion can be undone, a refund can only be offset, a sent email cannot be taken back — the ledger is where that distinction is shown.
|
|
392
|
+
- An object streaming in field by field → \`ai-structured-output\`, which reserves layout up front so nothing jumps.
|
|
393
|
+
- Ghost text in a real textarea → \`ai-inline-completion\`. Escape always returns Tab to focus management, so a keyboard user is never trapped.
|
|
394
|
+
- A value the model proposes for a form field → \`ai-suggested-value\`.
|
|
395
|
+
- Reviewing what was pulled out of a document → \`ai-extraction-review\`.
|
|
396
|
+
- Long-running work → \`ai-agent-status\` and \`ai-agent-plan\`.
|
|
397
|
+
- Where an answer came from → \`ai-sources\`. Cost → \`ai-token-usage\`. Chain of thought → \`ai-reasoning\`.
|
|
398
|
+
|
|
399
|
+
## Whole surface at once
|
|
400
|
+
|
|
401
|
+
\`\`\`bash
|
|
402
|
+
npx ${cliPackage} add ai-chat
|
|
403
|
+
\`\`\`
|
|
404
|
+
`;
|
|
405
|
+
}
|
|
406
|
+
function themesDoc(context) {
|
|
407
|
+
const { libraryName } = context;
|
|
408
|
+
return `# ${libraryName} — theming
|
|
409
|
+
|
|
410
|
+
Tokens are two-tier. **Tier 1** is raw scales: an OKLCH neutral ramp, a radius
|
|
411
|
+
ladder, a 15px-base type scale, elevation, motion. **Tier 2** is semantic
|
|
412
|
+
aliases — \`--primary\`, \`--background\`, \`--border\`, \`--ring\` — and components
|
|
413
|
+
consume Tier 2 *exclusively*.
|
|
414
|
+
|
|
415
|
+
Re-skinning the system means reassigning Tier 2. It never means editing a
|
|
416
|
+
component file. If you find yourself changing a colour inside a component, the
|
|
417
|
+
change belongs in the token layer instead.
|
|
418
|
+
|
|
419
|
+
## Presets
|
|
420
|
+
|
|
421
|
+
\`default\`, \`ocean\`, \`emerald\`, \`violet\`, \`rose\`, \`amber\`, \`monochrome\`.
|
|
422
|
+
|
|
423
|
+
\`\`\`html
|
|
424
|
+
<html data-theme="ocean" class="dark">
|
|
425
|
+
\`\`\`
|
|
426
|
+
|
|
427
|
+
\`data-theme\` selects the preset; the \`dark\` class selects the mode. They are
|
|
428
|
+
independent — every preset works in both.
|
|
429
|
+
|
|
430
|
+
\`monochrome\` is not only a style. It is a standing check that no component uses
|
|
431
|
+
colour as its only signal, so verify new work under it.
|
|
432
|
+
|
|
433
|
+
## Two properties that re-proportion everything
|
|
434
|
+
|
|
435
|
+
- \`--radius-scale\` — one multiplier behind every corner in the system. \`1\` is the designed default, \`0\` is fully square.
|
|
436
|
+
- \`--motion-scale\` — one multiplier every duration derives from. Under \`prefers-reduced-motion\` it collapses, but indicators that report ongoing state are *slowed* rather than stopped via \`--motion-scale-indicator\`, because a frozen spinner reads as a hung application.
|
|
437
|
+
|
|
438
|
+
## Contrast
|
|
439
|
+
|
|
440
|
+
All semantic pairs are verified against WCAG 2.2 AA across both modes and every
|
|
441
|
+
preset, in CI. A new token pair has to pass the same check — do not introduce
|
|
442
|
+
one without running \`audit:contrast\`.
|
|
443
|
+
`;
|
|
444
|
+
}
|
|
445
|
+
/** Frontmatter-carrying skill file for Claude Code. */
|
|
446
|
+
function skillDoc(context) {
|
|
447
|
+
const { index, libraryName, cliPackage, importFrom } = context;
|
|
448
|
+
const ui = components(index);
|
|
449
|
+
const blk = blocks(index);
|
|
450
|
+
const names = ui.map((entry) => entry.name).join(", ");
|
|
451
|
+
return `---
|
|
452
|
+
name: ${libraryName.toLowerCase()}-ui
|
|
453
|
+
description: >-
|
|
454
|
+
Build React interfaces with ${libraryName}, the source-first component system
|
|
455
|
+
installed in this project. Use whenever writing or editing React UI here —
|
|
456
|
+
any button, form, dialog, table, dashboard or AI surface. Covers the
|
|
457
|
+
${String(ui.length)}-component catalogue, the ${String(blk.length)} blocks, design tokens, theming
|
|
458
|
+
and the accessibility rules that differ from other libraries.
|
|
459
|
+
---
|
|
460
|
+
|
|
461
|
+
# ${libraryName}
|
|
462
|
+
|
|
463
|
+
Source-first React components. They are **files in this repository**, not a
|
|
464
|
+
dependency — installed with a CLI, then owned and edited like any other code.
|
|
465
|
+
|
|
466
|
+
## Do this first
|
|
467
|
+
|
|
468
|
+
Never hand-write a component ${libraryName} already has. The catalogue:
|
|
469
|
+
|
|
470
|
+
${names}
|
|
471
|
+
|
|
472
|
+
Blocks (whole sections, each resolving its own components):
|
|
473
|
+
${blk.map((entry) => entry.name).join(", ")}
|
|
474
|
+
|
|
475
|
+
## Adding one
|
|
476
|
+
|
|
477
|
+
\`\`\`bash
|
|
478
|
+
npx ${cliPackage} add button card dialog
|
|
479
|
+
\`\`\`
|
|
480
|
+
|
|
481
|
+
Resolves dependencies, installs npm packages, rewrites imports to this
|
|
482
|
+
project's alias. Safe to re-run — it will not overwrite a file you have edited
|
|
483
|
+
without \`--overwrite\`.
|
|
484
|
+
|
|
485
|
+
## Importing
|
|
486
|
+
|
|
487
|
+
\`\`\`tsx
|
|
488
|
+
import { Button, Card, CardContent } from "${importFrom}";
|
|
489
|
+
\`\`\`
|
|
490
|
+
|
|
491
|
+
## Styling rules
|
|
492
|
+
|
|
493
|
+
${TOKEN_RULES.map((rule) => `- ${rule}`).join("\n")}
|
|
494
|
+
|
|
495
|
+
## Accessibility rules that differ here
|
|
496
|
+
|
|
497
|
+
${ACCESSIBILITY_DELTAS.map((rule) => `- ${rule}`).join("\n")}
|
|
498
|
+
|
|
499
|
+
## Reference files
|
|
500
|
+
|
|
501
|
+
- \`.dowel/components.md\` — the full catalogue with descriptions
|
|
502
|
+
- \`.dowel/ai.md\` — the AI components and when to use each
|
|
503
|
+
- \`.dowel/themes.md\` — tokens, presets, radius and motion scales
|
|
504
|
+
- \`.dowel/conventions.md\` — the rules above, in full
|
|
505
|
+
`;
|
|
506
|
+
}
|
|
507
|
+
/** Cursor project rule (`.cursor/rules/*.mdc`). */
|
|
508
|
+
function cursorRule(context) {
|
|
509
|
+
const { index, libraryName, cliPackage, importFrom } = context;
|
|
510
|
+
const ui = components(index);
|
|
511
|
+
return `---
|
|
512
|
+
description: ${libraryName} component system — use for all React UI in this project
|
|
513
|
+
globs: ["**/*.tsx", "**/*.jsx"]
|
|
514
|
+
alwaysApply: false
|
|
515
|
+
---
|
|
516
|
+
|
|
517
|
+
${libraryName} is source-first: its ${String(ui.length)} components are files in this
|
|
518
|
+
repository. Never hand-write one that already exists.
|
|
519
|
+
|
|
520
|
+
Add: \`npx ${cliPackage} add <name>\`
|
|
521
|
+
Import: \`import { Button } from "${importFrom}"\`
|
|
522
|
+
|
|
523
|
+
Available: ${ui.map((entry) => entry.name).join(", ")}
|
|
524
|
+
|
|
525
|
+
${TOKEN_RULES.map((rule) => `- ${rule}`).join("\n")}
|
|
526
|
+
${ACCESSIBILITY_DELTAS.map((rule) => `- ${rule}`).join("\n")}
|
|
527
|
+
|
|
528
|
+
Full catalogue and reasoning: \`.dowel/\`
|
|
529
|
+
`;
|
|
530
|
+
}
|
|
531
|
+
const AGENTS_MARKER_START = "<!-- dowel:start -->";
|
|
532
|
+
const AGENTS_MARKER_END = "<!-- dowel:end -->";
|
|
533
|
+
/**
|
|
534
|
+
* The block written into a project's AGENTS.md.
|
|
535
|
+
*
|
|
536
|
+
* Marker-wrapped rather than written as a whole file: AGENTS.md belongs to the
|
|
537
|
+
* project and usually already says things about the project. Replacing it would
|
|
538
|
+
* destroy that; appending without markers would duplicate the section on every
|
|
539
|
+
* regeneration.
|
|
540
|
+
*/
|
|
541
|
+
function agentsSection(context) {
|
|
542
|
+
const { index, libraryName, cliPackage, importFrom } = context;
|
|
543
|
+
const ui = components(index);
|
|
544
|
+
return `${AGENTS_MARKER_START}
|
|
545
|
+
|
|
546
|
+
## UI components — ${libraryName}
|
|
547
|
+
|
|
548
|
+
This project uses ${libraryName}, a **source-first** component system: its
|
|
549
|
+
${String(ui.length)} components live in this repository as editable files.
|
|
550
|
+
|
|
551
|
+
- **Never hand-write a component that already exists.** The full catalogue is in \`.dowel/components.md\`.
|
|
552
|
+
- Add one with \`npx ${cliPackage} add <name>\` — never \`npm install\`, never copy source by hand.
|
|
553
|
+
- Import from \`${importFrom}\`.
|
|
554
|
+
- Style with semantic tokens only (\`bg-background\`, \`text-muted-foreground\`), never raw hex and never Tailwind's own palette.
|
|
555
|
+
- Building a page? Check \`.dowel/components.md\` for a **block** first.
|
|
556
|
+
- Building an AI feature? \`.dowel/ai.md\` lists surfaces you will not find elsewhere.
|
|
557
|
+
- Accessibility deltas from other libraries are in \`.dowel/conventions.md\`. Read them before adding ARIA by reflex.
|
|
558
|
+
|
|
559
|
+
${AGENTS_MARKER_END}`;
|
|
560
|
+
}
|
|
561
|
+
/** Replaces the marked block, or appends it if there is none. */
|
|
562
|
+
function upsertAgentsSection(existing, section) {
|
|
563
|
+
const start = existing.indexOf(AGENTS_MARKER_START);
|
|
564
|
+
const end = existing.indexOf(AGENTS_MARKER_END);
|
|
565
|
+
if (start !== -1 && end !== -1 && end > start) return existing.slice(0, start) + section + existing.slice(end + 18);
|
|
566
|
+
const base = existing.trimEnd();
|
|
567
|
+
return base.length > 0 ? `${base}\n\n${section}\n` : `${section}\n`;
|
|
568
|
+
}
|
|
569
|
+
/**
|
|
570
|
+
* The llms.txt index.
|
|
571
|
+
*
|
|
572
|
+
* Deliberately a map rather than a dump: it names every component and points at
|
|
573
|
+
* the one URL that carries everything, so a model with a small budget can find
|
|
574
|
+
* the right page and one with a large budget can take the lot.
|
|
575
|
+
*/
|
|
576
|
+
function llmsTxt(context) {
|
|
577
|
+
const { index, libraryName, docsUrl, cliPackage } = context;
|
|
578
|
+
const ui = components(index);
|
|
579
|
+
const blk = blocks(index);
|
|
580
|
+
const lines = [
|
|
581
|
+
`# ${libraryName}`,
|
|
582
|
+
"",
|
|
583
|
+
`> Source-first React components for SaaS and AI products. ${String(ui.length)} components and ${String(blk.length)} blocks, installed as code you own rather than imported from a dependency. Built on Tailwind v4 and OKLCH design tokens, targeted at WCAG 2.2 AA.`,
|
|
584
|
+
"",
|
|
585
|
+
`Install: \`npx ${cliPackage} add <name>\` writes the component's source into your project.`,
|
|
586
|
+
"Re-running is safe — files you have edited are never overwritten without `--overwrite`.",
|
|
587
|
+
"",
|
|
588
|
+
`Generated from ${index.generatedFrom}.`,
|
|
589
|
+
"",
|
|
590
|
+
"## Start here",
|
|
591
|
+
"",
|
|
592
|
+
`- [Everything, in one file](${docsUrl}/llms-full.txt): the complete catalogue with descriptions, accessibility notes and conventions`,
|
|
593
|
+
`- [Installation](${docsUrl}/docs/installation)`,
|
|
594
|
+
`- [CLI](${docsUrl}/docs/cli)`,
|
|
595
|
+
`- [Theming](${docsUrl}/docs/themes)`,
|
|
596
|
+
`- [Accessibility](${docsUrl}/docs/accessibility)`,
|
|
597
|
+
""
|
|
598
|
+
];
|
|
599
|
+
for (const category of categoriesOf(ui)) {
|
|
600
|
+
lines.push(`## ${label(category)}`, "");
|
|
601
|
+
for (const entry of ui.filter((item) => item.category === category)) lines.push(`- [${entry.name}](${docsUrl}/docs/components/${entry.name}): ${entry.description}`);
|
|
602
|
+
lines.push("");
|
|
603
|
+
}
|
|
604
|
+
lines.push("## Blocks", "");
|
|
605
|
+
for (const entry of blk) lines.push(`- [${entry.name}](${docsUrl}/docs/blocks/${entry.name}): ${entry.description}`);
|
|
606
|
+
lines.push("");
|
|
607
|
+
return lines.join("\n");
|
|
608
|
+
}
|
|
609
|
+
/** Everything an agent needs, in one request. */
|
|
610
|
+
function llmsFullTxt(context) {
|
|
611
|
+
const { index, items, libraryName, docsUrl } = context;
|
|
612
|
+
const detail = new Map((items ?? []).map((item) => [item.name, item]));
|
|
613
|
+
const parts = [
|
|
614
|
+
conventionsDoc(context),
|
|
615
|
+
componentsDoc({
|
|
616
|
+
...context,
|
|
617
|
+
installed: void 0
|
|
618
|
+
}),
|
|
619
|
+
aiDoc(context),
|
|
620
|
+
themesDoc(context)
|
|
621
|
+
];
|
|
622
|
+
const lines = [
|
|
623
|
+
`# ${libraryName} — full reference`,
|
|
624
|
+
"",
|
|
625
|
+
`Generated from ${index.generatedFrom}. Canonical source: ${docsUrl}`,
|
|
626
|
+
"",
|
|
627
|
+
"---",
|
|
628
|
+
"",
|
|
629
|
+
parts.join("\n---\n\n")
|
|
630
|
+
];
|
|
631
|
+
if (detail.size > 0) {
|
|
632
|
+
lines.push("---", "", "# Per-component detail", "");
|
|
633
|
+
for (const entry of components(index)) {
|
|
634
|
+
const item = detail.get(entry.name);
|
|
635
|
+
lines.push(`## ${entry.title} \`${entry.name}\``, "", entry.description, "");
|
|
636
|
+
lines.push(`- Category: ${label(entry.category)} · Status: ${entry.status}`, `- Install: \`add ${entry.name}\``);
|
|
637
|
+
if (entry.registryDependencies.length > 0) lines.push(`- Also installs: ${entry.registryDependencies.join(", ")}`);
|
|
638
|
+
if (entry.dependencies.length > 0) lines.push(`- npm: ${entry.dependencies.join(", ")}`);
|
|
639
|
+
if (item?.a11y) lines.push(`- Accessibility: ${item.a11y}`);
|
|
640
|
+
lines.push("");
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
return lines.join("\n");
|
|
644
|
+
}
|
|
645
|
+
//#endregion
|
|
646
|
+
export { AGENTS_MARKER_END, AGENTS_MARKER_START, REGISTRY_VERSION, agentsSection, aiDoc, assertResolvable, blocksPathFor, buildCustomRegistry, componentsDoc, conventionsDoc, cursorRule, defineRegistryConfig, hashContent, itemGroupSchema, itemSourceSchema, llmsFullTxt, llmsTxt, planUi, registryAccessSchema, registryConfigSchema, registryFileSchema, registryFileTypeSchema, registryIndexEntrySchema, registryIndexSchema, registryItemSchema, registryItemTypeSchema, renderBrief, renderPlan, skillDoc, themesDoc, upsertAgentsSection };
|
|
647
|
+
|
|
648
|
+
//# sourceMappingURL=index.js.map
|