mlola-ui 1.0.3 → 1.0.4
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/README.md +29 -2
- package/package.json +1 -1
- package/registry/agents.json +419 -0
- package/registry/agents.md +453 -0
- package/registry/assets.json +734 -110
- package/registry/catalog.json +1187 -0
- package/registry/contract.json +1064 -0
- package/registry/index.json +37 -37
- package/src/agents.js +119 -0
- package/src/cli.js +27 -2
- package/src/knowledge.js +235 -0
- package/src/mcp.js +241 -0
package/README.md
CHANGED
|
@@ -16,7 +16,8 @@ npx mlola-ui add button sheet hero-split landing
|
|
|
16
16
|
npx mlola-ui doctor
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
`init` writes `mlola.config.json
|
|
19
|
+
`init` writes `mlola.config.json`, the engine stylesheet, and the instructions
|
|
20
|
+
your coding agents read (see below). `add` resolves the
|
|
20
21
|
dependency graph (a page pulls its blocks, a block pulls its components) and
|
|
21
22
|
copies only what you asked for. `doctor` checks the project against the registry:
|
|
22
23
|
missing engine imports, legacy attributes, modified generated files, and
|
|
@@ -26,13 +27,39 @@ forbidden dependencies.
|
|
|
26
27
|
|
|
27
28
|
| Command | What it does |
|
|
28
29
|
| --- | --- |
|
|
29
|
-
| `init` | create `mlola.config.json
|
|
30
|
+
| `init [--no-agents]` | create `mlola.config.json`, the stylesheet entry and the agent instructions |
|
|
31
|
+
| `agents` | write or refresh the agent instructions in an existing project |
|
|
32
|
+
| `mcp` | run the Mlola MCP server over stdio, for coding agents |
|
|
30
33
|
| `add <items…>` | copy items and their dependencies into the project |
|
|
31
34
|
| `list [--json]` | print every installable item |
|
|
32
35
|
| `doctor` | report project and registry problems |
|
|
33
36
|
| `login <token>` | save a Mlola Pro token (from /account) for this user |
|
|
34
37
|
| `logout` | forget the saved token |
|
|
35
38
|
|
|
39
|
+
## Coding agents
|
|
40
|
+
|
|
41
|
+
`init` (or `agents`, in an existing project) tells the project's coding agents
|
|
42
|
+
that its UI is Mlola:
|
|
43
|
+
|
|
44
|
+
- `mlola.agents.md`: the design guide, with every class, `data-*` value and
|
|
45
|
+
token, and the rules for new UI;
|
|
46
|
+
- `AGENTS.md`: a short section between markers pointing at the guide (merged,
|
|
47
|
+
never overwritten), and `CLAUDE.md` importing it for Claude Code;
|
|
48
|
+
- `.mcp.json` (and `.cursor/` or `.vscode/` when the project uses them): the
|
|
49
|
+
Mlola MCP server.
|
|
50
|
+
|
|
51
|
+
`npx mlola-ui mcp` is that server. It answers from the registry bundled with
|
|
52
|
+
this CLI, offline: `get_design_rules`, `search_components`, `get_component`,
|
|
53
|
+
`get_tokens`, `check_markup` (invented classes, wrong `data-*` values, utility
|
|
54
|
+
classes, hand-written colors), `add_components` and `init_project`. For
|
|
55
|
+
Claude Code without init:
|
|
56
|
+
|
|
57
|
+
```sh
|
|
58
|
+
claude mcp add mlola --scope project -- npx -y mlola-ui mcp
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
See https://ui.mlola.com/docs/agents for Cursor, VS Code and Codex.
|
|
62
|
+
|
|
36
63
|
## Mlola Pro
|
|
37
64
|
|
|
38
65
|
Pro components, blocks, pages and templates are not in this package. With a
|
package/package.json
CHANGED
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"description": "The Mlola UI design language as data: tokens by purpose, the rules for new UI, and the composition primitives. Generated with agents.md.",
|
|
4
|
+
"themes": [
|
|
5
|
+
{
|
|
6
|
+
"id": "graphite",
|
|
7
|
+
"name": "Graphite"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"id": "atelier",
|
|
11
|
+
"name": "Atelier Umami"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"id": "machined",
|
|
15
|
+
"name": "Machined Titanium"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"id": "aerogel",
|
|
19
|
+
"name": "Aerogel Glass"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"id": "nordic",
|
|
23
|
+
"name": "Nordic Earth"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"tokens": [
|
|
27
|
+
{
|
|
28
|
+
"group": "Planes and ink",
|
|
29
|
+
"purpose": "Backgrounds, surfaces, the three levels of text, borders.",
|
|
30
|
+
"names": [
|
|
31
|
+
"--ml-background",
|
|
32
|
+
"--ml-background-subtle",
|
|
33
|
+
"--ml-surface",
|
|
34
|
+
"--ml-surface-elevated",
|
|
35
|
+
"--ml-text",
|
|
36
|
+
"--ml-text-muted",
|
|
37
|
+
"--ml-text-faint",
|
|
38
|
+
"--ml-border",
|
|
39
|
+
"--ml-border-subtle"
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"group": "Color roles",
|
|
44
|
+
"purpose": "Each role is a fill with its `-foreground`, a `-text` for text and marks on the page, and (primary) a `-subtle` tint.",
|
|
45
|
+
"names": [
|
|
46
|
+
"--ml-primary",
|
|
47
|
+
"--ml-primary-foreground",
|
|
48
|
+
"--ml-primary-text",
|
|
49
|
+
"--ml-primary-subtle",
|
|
50
|
+
"--ml-success",
|
|
51
|
+
"--ml-success-foreground",
|
|
52
|
+
"--ml-success-text",
|
|
53
|
+
"--ml-warning",
|
|
54
|
+
"--ml-warning-foreground",
|
|
55
|
+
"--ml-warning-text",
|
|
56
|
+
"--ml-danger",
|
|
57
|
+
"--ml-danger-foreground",
|
|
58
|
+
"--ml-danger-text",
|
|
59
|
+
"--ml-info",
|
|
60
|
+
"--ml-info-foreground",
|
|
61
|
+
"--ml-info-text"
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"group": "Charts",
|
|
66
|
+
"purpose": "A categorical palette for series, 3:1 on the surface. Never a status.",
|
|
67
|
+
"names": [
|
|
68
|
+
"--ml-chart-1",
|
|
69
|
+
"--ml-chart-2",
|
|
70
|
+
"--ml-chart-3",
|
|
71
|
+
"--ml-chart-4",
|
|
72
|
+
"--ml-chart-5",
|
|
73
|
+
"--ml-chart-6"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"group": "Interaction and light",
|
|
78
|
+
"purpose": "Focus, hover and pressed fills, tracks, the veil behind overlays, light and knobs.",
|
|
79
|
+
"names": [
|
|
80
|
+
"--ml-focus",
|
|
81
|
+
"--ml-primary-hover",
|
|
82
|
+
"--ml-fill-hover",
|
|
83
|
+
"--ml-fill-active",
|
|
84
|
+
"--ml-track",
|
|
85
|
+
"--ml-control-border",
|
|
86
|
+
"--ml-ring",
|
|
87
|
+
"--ml-scrim",
|
|
88
|
+
"--ml-highlight",
|
|
89
|
+
"--ml-knob",
|
|
90
|
+
"--ml-knob-shadow",
|
|
91
|
+
"--ml-sheen"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"group": "Spacing",
|
|
96
|
+
"purpose": "The only spacing: gaps, padding, margins, offsets.",
|
|
97
|
+
"names": [
|
|
98
|
+
"--ml-space-px",
|
|
99
|
+
"--ml-space-0-5",
|
|
100
|
+
"--ml-space-1",
|
|
101
|
+
"--ml-space-1-5",
|
|
102
|
+
"--ml-space-2",
|
|
103
|
+
"--ml-space-2-5",
|
|
104
|
+
"--ml-space-3",
|
|
105
|
+
"--ml-space-3-5",
|
|
106
|
+
"--ml-space-4",
|
|
107
|
+
"--ml-space-4-5",
|
|
108
|
+
"--ml-space-5",
|
|
109
|
+
"--ml-space-6",
|
|
110
|
+
"--ml-space-7",
|
|
111
|
+
"--ml-space-8",
|
|
112
|
+
"--ml-space-9",
|
|
113
|
+
"--ml-space-10",
|
|
114
|
+
"--ml-space-12",
|
|
115
|
+
"--ml-space-14",
|
|
116
|
+
"--ml-space-16"
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"group": "Type",
|
|
121
|
+
"purpose": "The only type sizes, line heights, families and weights.",
|
|
122
|
+
"names": [
|
|
123
|
+
"--ml-type-2xs",
|
|
124
|
+
"--ml-type-xs",
|
|
125
|
+
"--ml-type-sm",
|
|
126
|
+
"--ml-type-base",
|
|
127
|
+
"--ml-type-md",
|
|
128
|
+
"--ml-type-lg",
|
|
129
|
+
"--ml-type-xl",
|
|
130
|
+
"--ml-type-2xl",
|
|
131
|
+
"--ml-leading-tight",
|
|
132
|
+
"--ml-leading-snug",
|
|
133
|
+
"--ml-leading-normal",
|
|
134
|
+
"--ml-font-sans",
|
|
135
|
+
"--ml-font-display",
|
|
136
|
+
"--ml-font-mono",
|
|
137
|
+
"--ml-display-weight",
|
|
138
|
+
"--ml-body-leading",
|
|
139
|
+
"--ml-tracking"
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"group": "Density",
|
|
144
|
+
"purpose": "Control heights, panel padding, the touch target.",
|
|
145
|
+
"names": [
|
|
146
|
+
"--ml-control-sm",
|
|
147
|
+
"--ml-control-md",
|
|
148
|
+
"--ml-control-lg",
|
|
149
|
+
"--ml-panel-padding",
|
|
150
|
+
"--ml-target-min"
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"group": "Shape",
|
|
155
|
+
"purpose": "Corner radii by the size of the thing, and the border weight.",
|
|
156
|
+
"names": [
|
|
157
|
+
"--ml-radius-xs",
|
|
158
|
+
"--ml-radius-sm",
|
|
159
|
+
"--ml-radius-md",
|
|
160
|
+
"--ml-radius-lg",
|
|
161
|
+
"--ml-radius-pill",
|
|
162
|
+
"--ml-border-width"
|
|
163
|
+
]
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"group": "Depth and material",
|
|
167
|
+
"purpose": "Elevation, and the material a floating surface is made of.",
|
|
168
|
+
"names": [
|
|
169
|
+
"--ml-texture-opacity",
|
|
170
|
+
"--ml-material",
|
|
171
|
+
"--ml-surface-alpha",
|
|
172
|
+
"--ml-surface-blur",
|
|
173
|
+
"--ml-surface-grain",
|
|
174
|
+
"--ml-surface-highlight",
|
|
175
|
+
"--ml-shadow-xs",
|
|
176
|
+
"--ml-shadow-sm",
|
|
177
|
+
"--ml-shadow-md",
|
|
178
|
+
"--ml-shadow-lg",
|
|
179
|
+
"--ml-shadow-xl",
|
|
180
|
+
"--ml-shadow-tint"
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"group": "Motion",
|
|
185
|
+
"purpose": "Every transition and entrance.",
|
|
186
|
+
"names": [
|
|
187
|
+
"--ml-duration-fast",
|
|
188
|
+
"--ml-duration-normal",
|
|
189
|
+
"--ml-duration-slow",
|
|
190
|
+
"--ml-duration-reveal",
|
|
191
|
+
"--ml-ease-standard",
|
|
192
|
+
"--ml-ease-spring",
|
|
193
|
+
"--ml-ease-bounce"
|
|
194
|
+
]
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"group": "Layers",
|
|
198
|
+
"purpose": "The one stacking order.",
|
|
199
|
+
"names": [
|
|
200
|
+
"--ml-layer-raised",
|
|
201
|
+
"--ml-layer-sticky",
|
|
202
|
+
"--ml-layer-header",
|
|
203
|
+
"--ml-layer-dropdown",
|
|
204
|
+
"--ml-layer-overlay",
|
|
205
|
+
"--ml-layer-modal",
|
|
206
|
+
"--ml-layer-popover",
|
|
207
|
+
"--ml-layer-toast",
|
|
208
|
+
"--ml-layer-tooltip",
|
|
209
|
+
"--ml-layer-top"
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"group": "Icons",
|
|
214
|
+
"purpose": "The theme's icon channel.",
|
|
215
|
+
"names": [
|
|
216
|
+
"--ml-icon-stroke"
|
|
217
|
+
]
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"rules": "## Designing new UI in the Mlola language\n\nWhen the elements above do not cover what you need, build it the way they are\nbuilt, and it will look like it belongs.\n\n1. **Compose first.** Reach for a component, then a layout primitive, and\n write CSS only for what neither covers. Put it in a layer of your own,\n declared before `mlola.accessibility` so the accessibility guarantees\n still win:\n `@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, app, mlola.accessibility;`\n2. **Name what it is, not how it looks.** One class per element role, with\n your own prefix (not `ml-`, so a later Mlola element never collides).\n State and variant go in `data-*` and `aria-*`, never in a second class.\n Reuse the shared words: `data-tone` is `neutral primary info success\n warning danger`; `data-size` is `xs sm md lg xl`; work that went\n wrong is `error`.\n3. **Color by role, never by value.** Planes are `background`,\n `background-subtle`, `surface`, `surface-elevated`. Ink is `text`,\n `text-muted`, `text-faint`. A colored fill (`primary`, `danger`, …)\n always carries its `-foreground`. Colored text, icons, lines and status\n marks on the page use the `-text` role: fills are only kept 1.5:1 from the\n page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.\n4. **Measure with the scales.** Spacing from `--ml-space-*`, type from\n `--ml-type-*` with `--ml-leading-*`, control heights from\n `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`\n between two steps is fine; a value invented between them is not.\n5. **Shape and depth come from the theme.** Radii by the size of the thing\n (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel\n or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface\n also takes the material: `--ml-surface-alpha`, `--ml-surface-blur`,\n `--ml-surface-highlight`.\n6. **Move with the theme.** Durations from `--ml-duration-*`, easing from\n `--ml-ease-*`. Reduced motion is handled by the engine.\n7. **Stack with the layers.** `--ml-layer-*`, never a raw z-index above 9.\n8. **Keep it usable by hand.** Never remove an outline without a\n `:focus-visible` style in its place. Targets are at least 24px; a smaller\n control adds `data-hit=\"expand\"` for touch. Text is never under\n `--ml-type-2xs`.\n9. **Leave the theme alone.** `data-theme` and `data-mode` belong to the\n engine; never set them for a component's own meaning, and never style a\n theme or mode by name. If something must differ by theme, it is a token.\n",
|
|
221
|
+
"primitives": [
|
|
222
|
+
{
|
|
223
|
+
"name": "ml-actions",
|
|
224
|
+
"note": ""
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "ml-brand",
|
|
228
|
+
"note": ""
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"name": "ml-brand-mark",
|
|
232
|
+
"note": ""
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"name": "ml-brand-name",
|
|
236
|
+
"note": ""
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"name": "ml-chart",
|
|
240
|
+
"note": ""
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"name": "ml-chart-bar",
|
|
244
|
+
"note": ""
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "ml-chart-bars",
|
|
248
|
+
"note": ""
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "ml-chart-heading",
|
|
252
|
+
"note": ""
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"name": "ml-cluster",
|
|
256
|
+
"note": ""
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"name": "ml-definition-list",
|
|
260
|
+
"note": ""
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "ml-display",
|
|
264
|
+
"note": ""
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "ml-divider",
|
|
268
|
+
"note": ""
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "ml-empty-state",
|
|
272
|
+
"note": ""
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "ml-eyebrow",
|
|
276
|
+
"note": ""
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "ml-filter-chip",
|
|
280
|
+
"note": ""
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"name": "ml-filter-group",
|
|
284
|
+
"note": ""
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"name": "ml-fine-print",
|
|
288
|
+
"note": ""
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"name": "ml-form",
|
|
292
|
+
"note": ""
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"name": "ml-form-message",
|
|
296
|
+
"note": ""
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "ml-form-options",
|
|
300
|
+
"note": ""
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "ml-grid",
|
|
304
|
+
"note": ""
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"name": "ml-heading",
|
|
308
|
+
"note": ""
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "ml-icon-chip",
|
|
312
|
+
"note": ""
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"name": "ml-inline-form",
|
|
316
|
+
"note": ""
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "ml-inline-form-field",
|
|
320
|
+
"note": ""
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"name": "ml-label",
|
|
324
|
+
"note": ""
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"name": "ml-lede",
|
|
328
|
+
"note": ""
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "ml-link",
|
|
332
|
+
"note": "A glyph inside a link flows with the text instead of breaking the line."
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"name": "ml-page-shell",
|
|
336
|
+
"note": "A full page: header, main and footer stacked on the page background."
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "ml-person",
|
|
340
|
+
"note": ""
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"name": "ml-person-copy",
|
|
344
|
+
"note": ""
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "ml-positive",
|
|
348
|
+
"note": ""
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "ml-price",
|
|
352
|
+
"note": ""
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"name": "ml-required-mark",
|
|
356
|
+
"note": ""
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "ml-section",
|
|
360
|
+
"note": ""
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"name": "ml-section-description",
|
|
364
|
+
"note": ""
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
"name": "ml-section-header",
|
|
368
|
+
"note": ""
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "ml-section-header-centered",
|
|
372
|
+
"note": ""
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "ml-section-muted",
|
|
376
|
+
"note": ""
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "ml-section-shell",
|
|
380
|
+
"note": ""
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "ml-stack",
|
|
384
|
+
"note": ""
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "ml-stat",
|
|
388
|
+
"note": ""
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "ml-stat-card",
|
|
392
|
+
"note": ""
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
"name": "ml-stat-grid",
|
|
396
|
+
"note": ""
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"name": "ml-stat-list",
|
|
400
|
+
"note": ""
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"name": "ml-stat-meta",
|
|
404
|
+
"note": ""
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"name": "ml-stat-value",
|
|
408
|
+
"note": ""
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "ml-text-primary",
|
|
412
|
+
"note": ""
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"name": "ml-value",
|
|
416
|
+
"note": ""
|
|
417
|
+
}
|
|
418
|
+
]
|
|
419
|
+
}
|