nodality 1.1.9 → 1.1.11
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 +71 -1
- package/bin/mcp-server.mjs +26 -7
- package/dist/animator.cjs.js.LICENSE.txt +1 -1
- package/dist/animator.esm.js.LICENSE.txt +1 -1
- package/dist/audionew.cjs.js.LICENSE.txt +1 -1
- package/dist/audionew.esm.js.LICENSE.txt +1 -1
- package/dist/base.cjs.js.LICENSE.txt +1 -1
- package/dist/base.esm.js.LICENSE.txt +1 -1
- package/dist/beta-desktop-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/beta-desktop-bar.esm.js.LICENSE.txt +1 -1
- package/dist/beta-mobile-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/beta-mobile-bar.esm.js.LICENSE.txt +1 -1
- package/dist/bundle.umd.js.LICENSE.txt +1 -1
- package/dist/button.cjs.js.LICENSE.txt +1 -1
- package/dist/button.esm.js.LICENSE.txt +1 -1
- package/dist/card-getter.cjs.js.LICENSE.txt +1 -1
- package/dist/card-getter.esm.js.LICENSE.txt +1 -1
- package/dist/center.cjs.js.LICENSE.txt +1 -1
- package/dist/center.esm.js.LICENSE.txt +1 -1
- package/dist/checkbox.cjs.js.LICENSE.txt +1 -1
- package/dist/checkbox.esm.js.LICENSE.txt +1 -1
- package/dist/code.cjs.js.LICENSE.txt +1 -1
- package/dist/code.esm.js.LICENSE.txt +1 -1
- package/dist/container.cjs.js.LICENSE.txt +1 -1
- package/dist/container.esm.js.LICENSE.txt +1 -1
- package/dist/data-list.cjs.js.LICENSE.txt +1 -1
- package/dist/data-list.esm.js.LICENSE.txt +1 -1
- package/dist/designer.cjs.js.LICENSE.txt +1 -1
- package/dist/designer.esm.js.LICENSE.txt +1 -1
- package/dist/element-mapper.cjs.js.LICENSE.txt +1 -1
- package/dist/element-mapper.esm.js.LICENSE.txt +1 -1
- package/dist/finalresult.esm.js.LICENSE.txt +1 -1
- package/dist/flex-card.cjs.js.LICENSE.txt +1 -1
- package/dist/flex-card.esm.js.LICENSE.txt +1 -1
- package/dist/flex-grid.cjs.js.LICENSE.txt +1 -1
- package/dist/flex-grid.esm.js.LICENSE.txt +1 -1
- package/dist/flex-row.cjs.js.LICENSE.txt +1 -1
- package/dist/flex-row.esm.js.LICENSE.txt +1 -1
- package/dist/floating-input.cjs.js.LICENSE.txt +1 -1
- package/dist/floating-input.esm.js.LICENSE.txt +1 -1
- package/dist/free.cjs.js.LICENSE.txt +1 -1
- package/dist/free.esm.js.LICENSE.txt +1 -1
- package/dist/horizontal-scroller.cjs.js.LICENSE.txt +1 -1
- package/dist/horizontal-scroller.esm.js.LICENSE.txt +1 -1
- package/dist/image-picker.cjs.js.LICENSE.txt +1 -1
- package/dist/image-picker.esm.js.LICENSE.txt +1 -1
- package/dist/image.cjs.js.LICENSE.txt +1 -1
- package/dist/image.esm.js.LICENSE.txt +1 -1
- package/dist/index.cjs.js.LICENSE.txt +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js.LICENSE.txt +1 -1
- package/dist/keyframe-animation.cjs.js.LICENSE.txt +1 -1
- package/dist/keyframe-animation.esm.js.LICENSE.txt +1 -1
- package/dist/link-getter.cjs.js.LICENSE.txt +1 -1
- package/dist/link-getter.esm.js.LICENSE.txt +1 -1
- package/dist/link.cjs.js.LICENSE.txt +1 -1
- package/dist/link.esm.js.LICENSE.txt +1 -1
- package/dist/meta-adder.cjs.js.LICENSE.txt +1 -1
- package/dist/meta-adder.esm.js.LICENSE.txt +1 -1
- package/dist/modal-2025.cjs.js.LICENSE.txt +1 -1
- package/dist/modal-2025.esm.js.LICENSE.txt +1 -1
- package/dist/multiswitcher.cjs.js.LICENSE.txt +1 -1
- package/dist/multiswitcher.esm.js.LICENSE.txt +1 -1
- package/dist/new-nav-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/new-nav-bar.esm.js.LICENSE.txt +1 -1
- package/dist/picker.cjs.js.LICENSE.txt +1 -1
- package/dist/picker.esm.js.LICENSE.txt +1 -1
- package/dist/progress.cjs.js.LICENSE.txt +1 -1
- package/dist/progress.esm.js.LICENSE.txt +1 -1
- package/dist/radio.cjs.js.LICENSE.txt +1 -1
- package/dist/radio.esm.js.LICENSE.txt +1 -1
- package/dist/range.cjs.js.LICENSE.txt +1 -1
- package/dist/range.esm.js.LICENSE.txt +1 -1
- package/dist/scroll-video.cjs.js.LICENSE.txt +1 -1
- package/dist/scroll-video.esm.js.LICENSE.txt +1 -1
- package/dist/side-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/side-bar.esm.js.LICENSE.txt +1 -1
- package/dist/side-nav-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/side-nav-bar.esm.js.LICENSE.txt +1 -1
- package/dist/simple-bar.cjs.js.LICENSE.txt +1 -1
- package/dist/simple-bar.esm.js.LICENSE.txt +1 -1
- package/dist/slider-2025.cjs.js.LICENSE.txt +1 -1
- package/dist/slider-2025.esm.js.LICENSE.txt +1 -1
- package/dist/spacer.cjs.js.LICENSE.txt +1 -1
- package/dist/spacer.esm.js.LICENSE.txt +1 -1
- package/dist/stack.cjs.js.LICENSE.txt +1 -1
- package/dist/stack.esm.js.LICENSE.txt +1 -1
- package/dist/stacker.cjs.js.LICENSE.txt +1 -1
- package/dist/stacker.esm.js.LICENSE.txt +1 -1
- package/dist/table.cjs.js.LICENSE.txt +1 -1
- package/dist/table.esm.js.LICENSE.txt +1 -1
- package/dist/text-field.cjs.js.LICENSE.txt +1 -1
- package/dist/text-field.esm.js.LICENSE.txt +1 -1
- package/dist/text.cjs.js.LICENSE.txt +1 -1
- package/dist/text.esm.js.LICENSE.txt +1 -1
- package/dist/theme.cjs.js.LICENSE.txt +1 -1
- package/dist/theme.esm.js.LICENSE.txt +1 -1
- package/dist/transform-anim.cjs.js.LICENSE.txt +1 -1
- package/dist/transform-anim.esm.js.LICENSE.txt +1 -1
- package/dist/ulist.cjs.js.LICENSE.txt +1 -1
- package/dist/ulist.esm.js.LICENSE.txt +1 -1
- package/dist/video.cjs.js.LICENSE.txt +1 -1
- package/dist/video.esm.js.LICENSE.txt +1 -1
- package/dist/wrap.cjs.js.LICENSE.txt +1 -1
- package/dist/wrap.esm.js.LICENSE.txt +1 -1
- package/dist/zoom-card.cjs.js.LICENSE.txt +1 -1
- package/dist/zoom-card.esm.js.LICENSE.txt +1 -1
- package/layout/animator.js +1 -1
- package/layout/audio.js +1 -1
- package/layout/audionew.js +1 -1
- package/layout/base.js +1 -1
- package/layout/beta-desktop-bar.js +1 -1
- package/layout/beta-mobile-bar.js +1 -1
- package/layout/button.js +1 -1
- package/layout/center.js +1 -1
- package/layout/checkbox.js +1 -1
- package/layout/circle.js +1 -1
- package/layout/code.js +1 -1
- package/layout/container.js +1 -1
- package/layout/dropdown-2025.js +1 -1
- package/layout/flex-card.js +1 -1
- package/layout/flex-grid.js +1 -1
- package/layout/flex-row.js +1 -1
- package/layout/form-components/custom.js +1 -1
- package/layout/form-components/data-list.js +1 -1
- package/layout/form-components/floating-input.js +1 -1
- package/layout/form-components/form-all.js +1 -1
- package/layout/form-components/form.js +1 -1
- package/layout/form-components/image-picker.js +1 -1
- package/layout/form-components/picker.js +1 -1
- package/layout/form-components/radio.js +1 -1
- package/layout/form-components/radiogroup.js +1 -1
- package/layout/form-components/range.js +1 -1
- package/layout/free.js +1 -1
- package/layout/grid-switcher.js +1 -1
- package/layout/grid.js +1 -1
- package/layout/horizontal-scroller.js +1 -1
- package/layout/image.js +1 -1
- package/layout/index.js +1 -1
- package/layout/link.js +1 -1
- package/layout/list.js +1 -1
- package/layout/meta-adder.js +1 -1
- package/layout/modal-2025.js +1 -1
- package/layout/morph.js +1 -1
- package/layout/multiswitcher.js +1 -1
- package/layout/nav-bar.js +1 -1
- package/layout/nav-factor/custom-div.js +1 -1
- package/layout/new-nav-bar.js +1 -1
- package/layout/polygon.js +1 -1
- package/layout/prerender-site.js +1 -1
- package/layout/prerender.js +1 -1
- package/layout/progress.js +1 -1
- package/layout/row.js +1 -1
- package/layout/scroll-video.js +1 -1
- package/layout/side-bar.js +1 -1
- package/layout/side-nav-bar.js +1 -1
- package/layout/simple-bar.js +1 -1
- package/layout/slider-2025.js +1 -1
- package/layout/spacer.js +1 -1
- package/layout/stack.js +1 -1
- package/layout/svg.js +1 -1
- package/layout/switcher.js +1 -1
- package/layout/table.js +1 -1
- package/layout/text-field.js +1 -1
- package/layout/text.js +1 -1
- package/layout/ulist.js +1 -1
- package/layout/video.js +1 -1
- package/layout/wrap.js +1 -1
- package/layout/zoom-card.js +1 -1
- package/lib/card-getter.js +1 -1
- package/lib/codegen.js +1 -1
- package/lib/data.js +1 -1
- package/lib/designer.js +1 -1
- package/lib/element-mapper.js +1 -1
- package/lib/keyframe-animation.js +1 -1
- package/lib/link-getter.js +1 -1
- package/lib/morph-node.js +1 -1
- package/lib/raster-inspect.js +1 -1
- package/lib/raster-ops.js +1 -1
- package/lib/raster-presets.js +1 -1
- package/lib/scroll-video.js +1 -1
- package/lib/seo.js +1 -1
- package/lib/stacker.js +1 -1
- package/lib/suggest.js +1 -1
- package/lib/theme.js +1 -1
- package/lib/transform-anim.js +1 -1
- package/lib/transition.js +1 -1
- package/lib/validate-nodes.js +21 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,7 +76,7 @@ Here is the complete working code which uses CDN for convenient testing.
|
|
|
76
76
|
<div id="#mount"></div>
|
|
77
77
|
|
|
78
78
|
<script type="module">
|
|
79
|
-
import {Des} from "https://www.unpkg.com/nodality@1.
|
|
79
|
+
import {Des} from "https://www.unpkg.com/nodality@1.1.10/dist/index.esm.js";
|
|
80
80
|
|
|
81
81
|
let elements = [
|
|
82
82
|
{
|
|
@@ -111,3 +111,73 @@ After running this code:
|
|
|
111
111
|
- You will see an `<h1>` element on the screen.
|
|
112
112
|
- When the user resizes the window and hits the **400–600px** breakpoint, a **stroke effect** will appear on the text, thanks to the `blast` modifier.
|
|
113
113
|
- The **resulting code** of the UI will also be displayed below the rendered element.
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## Effects on live elements
|
|
118
|
+
|
|
119
|
+
Nodes are not limited to design changes. A raster node compiles to a GPU
|
|
120
|
+
shader pass over the element it targets, and several nodes aimed at one
|
|
121
|
+
element compose into a **single** pass, in array order:
|
|
122
|
+
|
|
123
|
+
```js
|
|
124
|
+
const nodes = [
|
|
125
|
+
{ op: "dither", target: ["hero"], levels: 6, size: 2 },
|
|
126
|
+
{ op: "flow", target: ["hero"], by: "mouse" },
|
|
127
|
+
];
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
The source is your live DOM, not an image you exported. Two capture
|
|
131
|
+
backends sit underneath: a snapshot path that works in any WebGL browser,
|
|
132
|
+
and an HTML-in-Canvas path that samples the running element directly
|
|
133
|
+
where the browser supports it. The choice is automatic — if the newer API
|
|
134
|
+
is absent the pipeline falls back rather than failing.
|
|
135
|
+
|
|
136
|
+
Effects do not cost you interaction. Pointer input is resolved through
|
|
137
|
+
the inverse of the compiled transformation and re-dispatched, so links
|
|
138
|
+
and buttons under an effect still work — including where the content is
|
|
139
|
+
hosted inside the canvas and the browser's own hit testing cannot reach
|
|
140
|
+
it.
|
|
141
|
+
|
|
142
|
+
## Transitions as data
|
|
143
|
+
|
|
144
|
+
A `morph` node says which element becomes which, and on what interaction.
|
|
145
|
+
There is no timeline to drive and no capture to manage:
|
|
146
|
+
|
|
147
|
+
```js
|
|
148
|
+
const nodes = [
|
|
149
|
+
{ op: "morph", from: "topnav",
|
|
150
|
+
to: { About: "about", Services: "offer", Contact: "contact" },
|
|
151
|
+
effect: "t-vhs", duration: 900, back: true },
|
|
152
|
+
];
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
`from` and `to` name ids in your elements array; `back: true` wires the
|
|
156
|
+
destination's own button to return. Mapping is by link label rather than
|
|
157
|
+
position, because a responsive nav renders a different set of links per
|
|
158
|
+
breakpoint.
|
|
159
|
+
|
|
160
|
+
## For AI agents
|
|
161
|
+
|
|
162
|
+
`nodality mcp` runs a Model Context Protocol server over stdio, so an
|
|
163
|
+
agent can write interfaces against the real vocabulary instead of
|
|
164
|
+
guessing at it:
|
|
165
|
+
|
|
166
|
+
```json
|
|
167
|
+
{ "mcpServers": { "nodality": { "command": "npx", "args": ["nodality", "mcp"] } } }
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Three tools: `list_ops` returns the op registry as data — every op with
|
|
171
|
+
its stage, parameters, units, defaults; `validate_nodes` checks a node
|
|
172
|
+
array and returns a machine-readable report with did-you-mean
|
|
173
|
+
suggestions, so `{ op: "dithr" }` comes back as `UNKNOWN_OP` suggesting
|
|
174
|
+
`dither` rather than rendering nothing at all; `preview` renders an
|
|
175
|
+
`(E, N)` pair to a self-contained HTML file. `preview` needs `jsdom` in
|
|
176
|
+
your project (`npm i -D jsdom`) — it is required only for prerendering,
|
|
177
|
+
so the library does not bundle it.
|
|
178
|
+
|
|
179
|
+
The same validator is available directly:
|
|
180
|
+
|
|
181
|
+
```js
|
|
182
|
+
import { validateNodes, describeOps } from "nodality/validate";
|
|
183
|
+
```
|
package/bin/mcp-server.mjs
CHANGED
|
@@ -245,13 +245,32 @@ async function handle(msg) {
|
|
|
245
245
|
try {
|
|
246
246
|
return reply(id, await impl(args));
|
|
247
247
|
} catch (e) {
|
|
248
|
-
// A throw here is
|
|
249
|
-
//
|
|
250
|
-
//
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
248
|
+
// A throw here is an environment problem, not bad input — bad input
|
|
249
|
+
// became a report above. It still has to arrive as JSON in the same
|
|
250
|
+
// report shape as everything else: an agent parses every result the
|
|
251
|
+
// same way, and handing it a stack trace where it expects an object
|
|
252
|
+
// breaks it as surely as a crash would. Found end-to-end, where a
|
|
253
|
+
// clean install had no jsdom and this path returned prose.
|
|
254
|
+
const message = String((e && e.message) || e);
|
|
255
|
+
const missing = /Cannot find package '([^']+)'|(jsdom) is required/.exec(message);
|
|
256
|
+
const errors = missing
|
|
257
|
+
? [{
|
|
258
|
+
code: "MISSING_PEER_DEPENDENCY",
|
|
259
|
+
path: name,
|
|
260
|
+
got: missing[1] || missing[2],
|
|
261
|
+
suggestions: [`npm install --save-dev ${missing[1] || missing[2]}`],
|
|
262
|
+
valid: [],
|
|
263
|
+
// The tool that needs it, said plainly, so the agent can
|
|
264
|
+
// decide whether to install or to stop calling this tool.
|
|
265
|
+
detail: `\`${name}\` renders through the build-time ` +
|
|
266
|
+
`prerenderer, which needs this package in the project it ` +
|
|
267
|
+
`runs in. The library does not bundle it: it is required ` +
|
|
268
|
+
`only for prerendering, and bundling it would put a large ` +
|
|
269
|
+
`dependency into every browser install that never uses it.`,
|
|
270
|
+
}]
|
|
271
|
+
: [{ code: "TOOL_FAILED", path: name, got: message,
|
|
272
|
+
suggestions: [], valid: [] }];
|
|
273
|
+
return reply(id, { ...reportAsError({ ok: false, errors }) });
|
|
255
274
|
}
|
|
256
275
|
}
|
|
257
276
|
|
package/dist/index.d.ts
CHANGED