@nanisoft/prism-llms 0.5.2 → 0.6.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/data.json +151 -21
- package/dist/llms-full.txt +607 -35
- package/dist/llms.txt +9 -5
- package/dist/md/blocks/backdrop-01.md +8 -4
- package/dist/md/blocks/gantt-01.md +4 -4
- package/dist/md/blocks/hero-01.md +9 -1
- package/dist/md/blocks/media-band-01.md +123 -0
- package/dist/md/blocks/site-navbar.md +25 -3
- package/dist/md/changelogs/prism-llms.md +11 -0
- package/dist/md/changelogs/prism-mcp-server.md +7 -0
- package/dist/md/changelogs/prism-tokens.md +10 -0
- package/dist/md/changelogs/prism-ui.md +52 -0
- package/dist/md/components/aurora-wash.md +89 -0
- package/dist/md/components/particle-field.md +100 -0
- package/dist/md/components/reveal.md +113 -0
- package/dist/md/foundation/motion.md +37 -20
- package/dist/prism-skill.md +2 -2
- package/package.json +3 -3
package/dist/llms.txt
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
- [Colors](https://prism.nanisoft.com/foundation/colors.md): The semantic colour contract and the foundation ramps behind it.
|
|
20
20
|
- [Iconography](https://prism.nanisoft.com/foundation/iconography.md): Prism uses Lucide for interface icons, sized on the spacing scale.
|
|
21
|
-
- [Motion](https://prism.nanisoft.com/foundation/motion.md):
|
|
21
|
+
- [Motion](https://prism.nanisoft.com/foundation/motion.md): Three laws: feedback on a short scale, a running figure on a cycle scale, and an arrival bound to the reader's own scroll, all by token.
|
|
22
22
|
- [Radii](https://prism.nanisoft.com/foundation/radii.md): One base radius drives the whole scale, derived as calc() multipliers.
|
|
23
23
|
- [Shadows](https://prism.nanisoft.com/foundation/shadows.md): Exactly three authored elevation steps, all mode-independent.
|
|
24
24
|
- [Spacings](https://prism.nanisoft.com/foundation/spacings.md): The authored spacing scale both layout and section rhythm use.
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
- [AlertDialog](https://prism.nanisoft.com/components/alert-dialog.md): A dialog for a decision the reader must make, where the surface behind is not reachable.
|
|
51
51
|
- [Announcement](https://prism.nanisoft.com/components/announcement.md): A page-level message bar in one of the five contract tones, with an optional action and an optional dismiss.
|
|
52
52
|
- [AspectRatio](https://prism.nanisoft.com/components/aspect-ratio.md): A box that holds a ratio given as a prop, because a consumer class is a rule the stylesheet cannot see.
|
|
53
|
+
- [AuroraWash](https://prism.nanisoft.com/components/aurora-wash.md): Light moving through a ground: translucent planes in the pack’s own colours, each on its own long orbit of the aurora cycle.
|
|
53
54
|
- [Avatar](https://prism.nanisoft.com/components/avatar.md): The person or entity image with an initials fallback.
|
|
54
55
|
- [AvatarGroup](https://prism.nanisoft.com/components/avatar-group.md): A row of overlapping Avatar discs with a count for the people past the cap, in the order the caller gave.
|
|
55
56
|
- [Badge](https://prism.nanisoft.com/components/badge.md): A compact status or category label.
|
|
@@ -122,6 +123,7 @@
|
|
|
122
123
|
- [PackSwatch](https://prism.nanisoft.com/components/pack-swatch.md): A small preview of one pack, drawn on a surface carrying the data-pack boundary of that pack.
|
|
123
124
|
- [PackSwitcher](https://prism.nanisoft.com/components/pack-switcher.md): A control that changes which pack the page is drawn in, over a list the caller supplies.
|
|
124
125
|
- [Pagination](https://prism.nanisoft.com/components/pagination.md): The control that moves between pages of a paged collection.
|
|
126
|
+
- [ParticleField](https://prism.nanisoft.com/components/particle-field.md): A living field: points drifting on linked paths, answering the pointer, and standing still as a complete figure when the loop is stopped or declined.
|
|
125
127
|
- [PasswordField](https://prism.nanisoft.com/components/password-field.md): A password input whose reveal toggle ships with its type, its two names and its ring already right.
|
|
126
128
|
- [Pill](https://prism.nanisoft.com/components/pill.md): One small fully rounded chip, holding one value, with a slot at each end.
|
|
127
129
|
- [PlatformModifierKey](https://prism.nanisoft.com/components/platform-modifier-key.md): The modifier glyphs of a keyboard chord, resolved for the reader's own platform.
|
|
@@ -142,6 +144,7 @@
|
|
|
142
144
|
- [RepeatableRows](https://prism.nanisoft.com/components/repeatable-rows.md): A variable-length set of row objects: add one, take one away, and keep every label, every name and the reader's focus pointing at the right row.
|
|
143
145
|
- [RepoStars](https://prism.nanisoft.com/components/repo-stars.md): How many people starred a source repository, beside the host's own mark.
|
|
144
146
|
- [Resizable](https://prism.nanisoft.com/components/resizable.md): Two panes with a focusable divider that has a value, and remembers nothing on its own.
|
|
147
|
+
- [Reveal](https://prism.nanisoft.com/components/reveal.md): A section that meets the reader: the wrapper that binds an arrival to the reader’s own scroll position, with no script and no second introduction for the hero.
|
|
145
148
|
- [ScrollArea](https://prism.nanisoft.com/components/scroll-area.md): A scroll region that keeps the browser scrolling and takes over only the appearance of the bar.
|
|
146
149
|
- [SearchDialog](https://prism.nanisoft.com/components/search-dialog.md): A search dialog over a static JSON index fetched on the first query and ranked in the browser, where every query token has to match somewhere.
|
|
147
150
|
- [SearchField](https://prism.nanisoft.com/components/search-field.md): A controlled search input with a leading mark, a clear control and a slot for a filter trigger of the caller choosing.
|
|
@@ -245,6 +248,7 @@
|
|
|
245
248
|
- [LogoCloud01](https://prism.nanisoft.com/blocks/logo-cloud-01.md): A grid of customer or partner marks, each one a slot the caller fills with the mark, the name and an optional destination.
|
|
246
249
|
- [LogoStrip01](https://prism.nanisoft.com/blocks/logo-strip-01.md): A single line of short phrases: the transition band between a hero and the section that follows it.
|
|
247
250
|
- [MagicLink01](https://prism.nanisoft.com/blocks/magic-link-01.md): A passwordless sign-in: one address, one control that posts a link to it, the caller own sentence about what is arriving, and a confirmation that keeps the address on screen.
|
|
251
|
+
- [MediaBand01](https://prism.nanisoft.com/blocks/media-band-01.md): An editorial band: one media slot held at a caller ratio beside one title, description and optional destination, with the copy always on a solid surface.
|
|
248
252
|
- [MemberList01](https://prism.nanisoft.com/blocks/member-list-01.md): A dense row list for an application surface: a portrait, a name, a role, a presence tone beside the caller own words, a last-seen reading and a slot for the caller row actions.
|
|
249
253
|
- [MilestoneTimeline01](https://prism.nanisoft.com/blocks/milestone-timeline-01.md): A dated sequence of what a system has reached, on a rail with a rule down one side, a state mark per milestone and a composed Progress fill for the milestones that were work rather than a moment.
|
|
250
254
|
- [Newsletter01](https://prism.nanisoft.com/blocks/newsletter-01.md): A signup band with a heading, one labelled field, one control, a required line saying what happens to the address, and a live region for the outcome.
|
|
@@ -336,7 +340,7 @@
|
|
|
336
340
|
|
|
337
341
|
## Changelogs
|
|
338
342
|
|
|
339
|
-
- [@nanisoft/prism-llms](https://prism.nanisoft.com/changelogs/prism-llms.md): 0.5.2, 0.5.1, 0.5.0, 0.2.0, 0.1.0
|
|
340
|
-
- [@nanisoft/prism-mcp-server](https://prism.nanisoft.com/changelogs/prism-mcp-server.md): 0.4.2, 0.4.1, 0.4.0, 0.2.0, 0.1.0
|
|
341
|
-
- [@nanisoft/prism-tokens](https://prism.nanisoft.com/changelogs/prism-tokens.md): 1.2.0, 0.16.0, 0.15.0, 0.10.0, 0.6.0, 0.5.1, 0.5.0
|
|
342
|
-
- [@nanisoft/prism-ui](https://prism.nanisoft.com/changelogs/prism-ui.md): 1.3.0, 1.2.0, 1.1.0, 1.0.0, 0.16.1, 0.16.0, 0.15.0, 0.14.0, 0.13.0, 0.12.0, 0.11.0, 0.10.2, 0.10.1, 0.10.0, 0.9.0, 0.8.0, 0.7.0, 0.6.0, 0.5.1, 0.5.0
|
|
343
|
+
- [@nanisoft/prism-llms](https://prism.nanisoft.com/changelogs/prism-llms.md): 0.6.0, 0.5.2, 0.5.1, 0.5.0, 0.2.0, 0.1.0
|
|
344
|
+
- [@nanisoft/prism-mcp-server](https://prism.nanisoft.com/changelogs/prism-mcp-server.md): 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.2.0, 0.1.0
|
|
345
|
+
- [@nanisoft/prism-tokens](https://prism.nanisoft.com/changelogs/prism-tokens.md): 1.5.0, 1.2.0, 0.16.0, 0.15.0, 0.10.0, 0.6.0, 0.5.1, 0.5.0
|
|
346
|
+
- [@nanisoft/prism-ui](https://prism.nanisoft.com/changelogs/prism-ui.md): 1.5.0, 1.4.0, 1.3.0, 1.2.0, 1.1.0, 1.0.0, 0.16.1, 0.16.0, 0.15.0, 0.14.0, 0.13.0, 0.12.0, 0.11.0, 0.10.2, 0.10.1, 0.10.0, 0.9.0, 0.8.0, 0.7.0, 0.6.0, 0.5.1, 0.5.0
|
|
@@ -42,7 +42,10 @@ Use `drift` and `pulse` for any figure. They are the two whose resting form is t
|
|
|
42
42
|
figure's own full form, so nothing is lost when the cycle is at either end of its
|
|
43
43
|
turn. Use `travel`, `sweep`, `scan` and `shimmer` when the figure is drawn wider
|
|
44
44
|
than the band, because those four carry something across a field and the band
|
|
45
|
-
clips what leaves.
|
|
45
|
+
clips what leaves. Use `aurora` when the claim is the ground rather than anything
|
|
46
|
+
crossing it: the whole layer rides one slow orbit, so it suits a wash or a wide
|
|
47
|
+
field and mismatches a drawing with a baseline, which would visibly leave the
|
|
48
|
+
ground it was measured on.
|
|
46
49
|
|
|
47
50
|
Use `pauseControl` on a page that gives a reader reason to want the page still.
|
|
48
51
|
|
|
@@ -55,9 +58,10 @@ Do not use it for a figure that belongs in the layout rather than behind the
|
|
|
55
58
|
copy. That is `InstrumentPanel01`, and a panel beside the copy says the same thing
|
|
56
59
|
with a border and a title bar instead of an opacity.
|
|
57
60
|
|
|
58
|
-
Do not reach for it to add movement to a page.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
Do not reach for it to add movement to a page. A cycle demonstrates a system
|
|
62
|
+
that runs, and this Block is the one place in a band a cycle is allowed; an
|
|
63
|
+
arrival is `Reveal`'s job and not a faster cycle's, and neither of them is a
|
|
64
|
+
decoration, which is exactly why each has one place.
|
|
61
65
|
|
|
62
66
|
### Best practices
|
|
63
67
|
|
|
@@ -26,10 +26,10 @@ at the edge rather than pushing the field wider, and the table behind the figure
|
|
|
26
26
|
carries its true dates.
|
|
27
27
|
|
|
28
28
|
**There is no motion, so reduced motion costs the reader nothing.** No draw-in, no
|
|
29
|
-
bar that grows from nothing, no
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
bar that grows from nothing, no entrance. DESIGN.md's Motion section lets a band
|
|
30
|
+
arrive with the reader's own scroll, and a schedule is the case where arriving
|
|
31
|
+
would misread: a bar that appears is a bar whose appearance a reader has to wait
|
|
32
|
+
for before they can read the relationship it has with the bar above it, and
|
|
33
33
|
the whole claim of a Gantt is that relationship.
|
|
34
34
|
|
|
35
35
|
## The hidden table, and its gaps
|
|
@@ -35,6 +35,11 @@ of those is a mechanism, and a mechanism reads better shown than described. The
|
|
|
35
35
|
figure should be one that would still be true with every animation stopped, so
|
|
36
36
|
what the reader gets from it is the claim and the motion is only the emphasis.
|
|
37
37
|
|
|
38
|
+
Compose a ground with `backdrop` when the claim is the surface the hero stands
|
|
39
|
+
on. An `AuroraWash` says the surface is lit, a `ParticleField` says there is a
|
|
40
|
+
medium to move through, and the band clips and positions whatever it is given,
|
|
41
|
+
so the caller composes a claim rather than a layout.
|
|
42
|
+
|
|
38
43
|
### When not to use
|
|
39
44
|
|
|
40
45
|
Do not use Hero01 inside an application screen. It is a marketing composition,
|
|
@@ -48,7 +53,9 @@ inside `Section` instead.
|
|
|
48
53
|
|
|
49
54
|
Do not pass a figure that is only interesting while it moves. A slot that reads
|
|
50
55
|
as empty in a still frame is a decoration with a slot, and this system does not
|
|
51
|
-
author those.
|
|
56
|
+
author those. The same test holds for the ground: a `backdrop` that collapses
|
|
57
|
+
into nothing when it is stopped was a video with extra steps, and the hero is a
|
|
58
|
+
band making a claim, not a frame around one.
|
|
52
59
|
|
|
53
60
|
### Best practices
|
|
54
61
|
|
|
@@ -185,6 +192,7 @@ export default function Hero01Demo() {
|
|
|
185
192
|
**`align`** `'center' | 'left'` · optional · default: `'center'` — Whether the copy is centered in the band or set flush to the left edge of the container. This is the hero's own alignment and not `SectionHeading`'s, because the two are not the same decision: a left-aligned hero is nearly always the left half of a two-column band with a panel or an instrument beside it, and that column is narrower than the container, so the alignment has to be the hero's before the container can be anything. It has no visual effect on its own, which is the point: it aligns the copy inside whatever width it is given.
|
|
186
193
|
**`instrument`** `ReactNode` · optional · default: — — The figure beside the copy: a live view of the thing the copy is about. A slot, and the reason is the whole shape of this Block's second form. The hero that names what a product does and the hero that shows it running are the same section, and every one of the four NaniSoft product sites hand-wrote the two-column band that joins them, each with its own grid, its own gap and its own breakpoint. This is that band. What goes in it is the consumer's, and specifically it should be something that would still be true with every animation stopped: a `PulseGraph` of the pipeline the product runs, a `PulseSeries` of what it captures. A slot that only reads as motion is a decoration with a slot, and this system does not author those. The `instrumented` slot is marked as required when the hero is given one, so a figure cannot be half-wired.
|
|
187
194
|
**`split`** `boolean` · optional · default: — — Puts the copy and the instrument side by side rather than stacked, and narrows the copy to the column it shares the band with. Implied by `instrument` and overridable: a consumer with a narrow instrument and a wide hero may want them stacked anyway.
|
|
195
|
+
**`backdrop`** `ReactNode` · optional · default: — — The ground the hero stands on: a figure the whole band is drawn over. A slot, and for the same reason the instrument is one: the ground a hero wants is the product's own claim, and this Block cannot make it. An `AuroraWash` says the surface is lit, a `ParticleField` says there is a medium to move through, and a caller who wants both composes both, because the one decision a hero should not delegate is what its ground claims. The Block clips the ground to the band, takes the pointer away from it, and holds it behind the copy beside the hero's own faint wash, so a slot here never has to arrive pre-positioned. A ground that would not still be true with every animation stopped does not belong here, for the same reason an instrument that only reads as motion does not: this is a band making a claim, not a frame around a video.
|
|
188
196
|
**`headingLevel`** `HeadingLevel` · optional · default: — — Heading level for the title. Defaults to `h2` because a block is composed, not a page: it installs into a consumer's layout and renders inside catalog previews, so the surrounding document already owns the `h1`. A page that uses this block as its top-level heading opts in with `headingLevel="h1"`; a document that already names this section in its own heading passes one level deeper. See `HeadingLevel`.
|
|
189
197
|
**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited.
|
|
190
198
|
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# MediaBand01
|
|
2
|
+
|
|
3
|
+
An editorial band: one media slot held at a caller ratio beside one title, description and optional destination, with the copy always on a solid surface.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { MediaBand01 } from '@nanisoft/prism-ui/blocks/media-band-01'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
MediaBand01 is an editorial band: one media frame beside one statement, with one
|
|
12
|
+
action. It is the marketing surface the catalogue did not have. `Bento01` holds a
|
|
13
|
+
media node in a cell, but a cell is one item of a set, and a set is the wrong shape
|
|
14
|
+
for the one photograph a page stops on. `Gallery01` holds a set of images and opens
|
|
15
|
+
one at full size, which is right for a portfolio and wrong for a statement.
|
|
16
|
+
|
|
17
|
+
The media is a slot, not a `src`. A caller can pass an image, a video poster, a
|
|
18
|
+
rendered figure, or a composition of its own components. The Block owns the frame,
|
|
19
|
+
the ratio, the surface and the order. The caller owns the node and its accessible
|
|
20
|
+
name.
|
|
21
|
+
|
|
22
|
+
The copy is first in the document, and the media is first only in the visual order
|
|
23
|
+
the caller asks for. A reader on a phone meets the title before the picture, and a
|
|
24
|
+
reader at `lg` meets the arrangement the caller chose. That is one tree, so the
|
|
25
|
+
heading is in the outline once.
|
|
26
|
+
|
|
27
|
+
The copy never sits on the picture. A title over an arbitrary photograph is a
|
|
28
|
+
contrast failure nobody measured, and the solid column beside the image is both
|
|
29
|
+
more legible and more editorial.
|
|
30
|
+
|
|
31
|
+
There is no animation. An editorial photograph is not feedback and it is not a
|
|
32
|
+
figure showing a system running, so the band does not zoom, slide or reveal.
|
|
33
|
+
|
|
34
|
+
## Guidelines
|
|
35
|
+
|
|
36
|
+
### When to use
|
|
37
|
+
|
|
38
|
+
Use MediaBand01 when a page has one photograph or one composed figure that is a
|
|
39
|
+
moment of its own, and one sentence that the picture makes. It is the band a page
|
|
40
|
+
stops on between two sections of argument.
|
|
41
|
+
|
|
42
|
+
### When not to use
|
|
43
|
+
|
|
44
|
+
Do not use it for a set of images. A set is `Gallery01` or a `Bento01` grid. Do not
|
|
45
|
+
use it for a figure that carries a claim a screen reader must hear in full; that is
|
|
46
|
+
`InstrumentPanel01` or one of the figure Components. Do not put the copy on top of
|
|
47
|
+
the image; the solid column is the arrangement this Block exists to make easy.
|
|
48
|
+
|
|
49
|
+
### Ratios and sides
|
|
50
|
+
|
|
51
|
+
`ratio` is `wide`, `square` or `portrait`. `align` is `media-left` or `media-right`,
|
|
52
|
+
and it changes the visual order only. Below the breakpoint the copy always comes
|
|
53
|
+
first.
|
|
54
|
+
|
|
55
|
+
### Tone
|
|
56
|
+
|
|
57
|
+
`default` leaves the band on the page ground. `muted` puts it on the muted surface,
|
|
58
|
+
which is for a band that is a chapter rather than a transition. The muted arm states
|
|
59
|
+
its own ink as well as its own fill.
|
|
60
|
+
|
|
61
|
+
### The media slot
|
|
62
|
+
|
|
63
|
+
The caller's node fills the frame. The Block does not style a node it did not
|
|
64
|
+
render, so the image should set its own width, height and `object-fit`, and it
|
|
65
|
+
should carry the alt text that names it. A composed figure should carry its own
|
|
66
|
+
accessible name.
|
|
67
|
+
|
|
68
|
+
**The band with a placeholder in the media slot.**
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { ImageIcon } from 'lucide-react'
|
|
72
|
+
|
|
73
|
+
import { MediaBand01 } from '@nanisoft/prism-ui/blocks/media-band-01'
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* The band with a placeholder in the media slot.
|
|
77
|
+
*
|
|
78
|
+
* The slot is the point: a marketing band's picture is the consumer's asset, and
|
|
79
|
+
* the demo shows the frame the Block owns rather than a photograph this package
|
|
80
|
+
* would have to license. A real caller passes an image, a video poster or a
|
|
81
|
+
* composed figure, and the frame holds it at the ratio the caller chose.
|
|
82
|
+
*/
|
|
83
|
+
export default function MediaBand01Demo() {
|
|
84
|
+
return (
|
|
85
|
+
<MediaBand01
|
|
86
|
+
headingLevel="h3"
|
|
87
|
+
eyebrow="Preview"
|
|
88
|
+
size="default"
|
|
89
|
+
title="A photograph, a statement and one way forward"
|
|
90
|
+
description="The copy is first in the document and the media is first only in the visual order the caller asks for. The frame holds a wide, square or portrait crop, and the copy never sits on the picture."
|
|
91
|
+
media={
|
|
92
|
+
<div className="bg-accent text-accent-foreground flex h-full w-full flex-col items-center justify-center gap-3">
|
|
93
|
+
<ImageIcon className="size-8" aria-hidden />
|
|
94
|
+
<span className="font-mono text-xs">media slot</span>
|
|
95
|
+
</div>
|
|
96
|
+
}
|
|
97
|
+
caption="A placeholder in the slot. The caller supplies the image and its accessible name."
|
|
98
|
+
action={{ label: 'Read the story', href: '#' }}
|
|
99
|
+
/>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Props
|
|
105
|
+
|
|
106
|
+
**`eyebrow`** `string` · optional · default: — — Optional label above the title. See the No-Default-Eyebrow Rule.
|
|
107
|
+
**`title`** `ReactNode` · required · default: — — The band's one claim. Required: a band with no title is a picture.
|
|
108
|
+
**`description`** `ReactNode` · optional · default: — — One or two sentences under the title.
|
|
109
|
+
**`media`** `ReactNode` · required · default: — — The media, composed by the caller. A slot rather than a `src`, because the honest media here is not always an image: it is a photograph, a video poster, a rendered figure, or a composition of the consumer's own components. The Block owns the frame, the ratio and the surface, and the caller owns the node and its accessible name. **The node fills the frame.** The caller's image or figure should be sized to its container and should set its own `object-fit`; the Block does not style a node it did not render, which is the same rule every slot in this package follows.
|
|
110
|
+
**`align`** `'media-left' | 'media-right'` · optional · default: `'media-right'` — Which side the media sits on at the wide breakpoint. Below the breakpoint the copy always comes first, because the title is the way into the picture and a reader on a phone should not have to scroll past a photograph to learn what it is for.
|
|
111
|
+
**`ratio`** `MediaBand01Ratio` · optional · default: `'wide'` — The shape the media frame holds.
|
|
112
|
+
**`tone`** `'default' | 'muted'` · optional · default: `'default'` — The surface the band is drawn on. `default` leaves it on the page ground, which is the quieter answer and the right one for a band that is one moment among several. `muted` puts it on the muted surface, for a band that is a chapter of its own. The muted arm states its own ink as well as its own fill, which is the `Stated Ink Rule` `Cta01` and `Bento01` both state: a surface that sets a fill and inherits its ink is correct wherever the design system happened to put it and wrong everywhere else.
|
|
113
|
+
**`caption`** `ReactNode` · optional · default: — — One line under the media. Functional, not decorative: it says what a reader is looking at when the photograph is a placeholder or when the image is not the product itself. It is never a photo credit for a placeholder, and it is never a caption for a picture whose subject the title already names.
|
|
114
|
+
**`action`** `MediaBand01Action` · optional · default: — — The band's one action. Omit it for a band that is a statement and not an ask.
|
|
115
|
+
**`size`** `MediaBand01Size` · optional · default: `'tall'` — How tall the band is. See `MediaBand01Size`.
|
|
116
|
+
**`headingLevel`** `HeadingLevel` · optional · default: `'h2'` — Heading level for the title. See `HeadingLevel`.
|
|
117
|
+
**`className`** `string` · optional · default: — — Layout only, exactly as on every Block. Changing a Prism-owned visual property from here is prohibited.
|
|
118
|
+
|
|
119
|
+
## Composition
|
|
120
|
+
|
|
121
|
+
**`exports`** `MediaBand01` — the public runtime names this Block promises
|
|
122
|
+
**`source`** `packages/ui/src/blocks/media-band-01/index.tsx` — the file this Block is defined in
|
|
123
|
+
**`dependencies`** `AspectRatio, CtaLink, Section` — the public Prism exports this item composes
|
|
@@ -80,6 +80,11 @@ none of the four and would rather compose its own.
|
|
|
80
80
|
- Leave `sticky` on unless the page does not scroll. The bar is how a reader leaves
|
|
81
81
|
the page they are on, and it takes that with them on exactly the long pages where
|
|
82
82
|
it is needed. `sticky={false}` is honoured and puts the bar back in the flow.
|
|
83
|
+
- Leave `scrollRail` on for pages a reader reads end to end. The rail fills with
|
|
84
|
+
the reader's own progress, a browser that cannot run it draws no rail at all,
|
|
85
|
+
and a reader who asked for less motion gets a still spectrum hairline. Turn
|
|
86
|
+
it off on a short page, where a rail that is born nearly full misreads the
|
|
87
|
+
page it is on.
|
|
83
88
|
|
|
84
89
|
### Content guidelines
|
|
85
90
|
|
|
@@ -118,9 +123,25 @@ Two things to know if you were styling against the old bar:
|
|
|
118
123
|
- A rule that relied on the bar being translucent to hide a scrolling heading will
|
|
119
124
|
no longer hide it, which is the point.
|
|
120
125
|
|
|
121
|
-
`will-change` is not on the bar and is not proposed for it.
|
|
122
|
-
|
|
123
|
-
|
|
126
|
+
`will-change` is not on the bar and is not proposed for it. Two things on the bar
|
|
127
|
+
move, the current link's underline and the reading rail, and both are compositor
|
|
128
|
+
transforms the browser promotes while they run, so a hint applied at rest has no
|
|
129
|
+
frame to be ready for and nothing that would release it.
|
|
130
|
+
|
|
131
|
+
### The reading rail, and the current link's underline
|
|
132
|
+
|
|
133
|
+
The sticky bar carries a two-pixel spectrum line on its bottom hairline, filled
|
|
134
|
+
left to right by the page's own scroll. It is the travel figure at the scale of a
|
|
135
|
+
page: one marker, one rail, the reader's hand providing the motion. The whole
|
|
136
|
+
figure lives behind a capability check in the stylesheet, so a browser without
|
|
137
|
+
scroll-driven animations draws no rail rather than an empty one, and the rail is
|
|
138
|
+
`aria-hidden` because a reading position the scrollbar already shows is not
|
|
139
|
+
information the bar needs to announce.
|
|
140
|
+
|
|
141
|
+
The current link is marked by a persistent underline in the same spectrum rather
|
|
142
|
+
than by a filled pill, so the bar carries one indicator language on one edge. The
|
|
143
|
+
underline is shape rather than colour, and `aria-current` still says the page to
|
|
144
|
+
a reader who sees nothing at all.
|
|
124
145
|
|
|
125
146
|
### The one client boundary
|
|
126
147
|
|
|
@@ -237,6 +258,7 @@ export default function SiteNavbarDemo() {
|
|
|
237
258
|
**`mobileLabels`** `SiteNavMobileLabels` · required · default: — — The two names of the mobile trigger, which is a round icon with no visible word. Required rather than defaulted, because a default would be a sentence this Block ships about a product that is not the caller's, and because a bar that renders an unlabelled round control below its own threshold has a keyboard reader reaching for something it cannot name.
|
|
238
259
|
**`actions`** `ReactNode` · optional · default: — — A slot for controls the product owns, after the ones this bar composes. A slot rather than a prop, because an account menu and a sign-in link are application state and neither is a fact a bar can be told.
|
|
239
260
|
**`sticky`** `boolean` · optional · default: — — Keeps the bar at the top of the viewport as the page scrolls. On by default, because the bar is how a reader leaves the page they are on, and a bar that scrolls away takes that with it on exactly the long pages a reader needs it. `false` is honoured: the bar is then part of the flow and scrolls away with the page. It was accepted and ignored until this release, so a site that passed it was given the sticky bar it had asked not to have, and `SiteHeader` has always applied it the other way round.
|
|
261
|
+
**`scrollRail`** `boolean` · optional · default: `true` — Draws the reading rail: a two-pixel spectrum line on the bar's bottom hairline that fills with the reader's own progress through the page. On by default, because the rail is the one motion that costs a reader nothing: it is bound to the scroll position the reader already owns, it runs on a transform, and a browser that cannot run it draws no rail rather than an empty promise of one. A reader who asked the platform for less motion gets a still spectrum hairline, the same figure without the claim. `false` is for the pages the rail would misread: a short page whose scroll never gets going, or a composition where a second line under the bar is a line too many. The rail rides only a sticky bar, so `sticky={false}` takes it regardless.
|
|
240
262
|
**`className`** `string` · optional · default: — — Layout only. Changing a Prism-owned visual property from here is prohibited.
|
|
241
263
|
|
|
242
264
|
## Composition
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @nanisoft/prism-llms
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Regenerate the corpus for the third law of motion
|
|
8
|
+
|
|
9
|
+
The corpus picks up the `ParticleField`, `AuroraWash` and `Reveal` entries, the
|
|
10
|
+
`backdrop` slot on `Hero01`, the `aurora` field on `Backdrop01`, the
|
|
11
|
+
`scrollRail` prop on `SiteNavbar`, and the rewritten Motion documentation,
|
|
12
|
+
whose third law the new items document in their own JSDoc.
|
|
13
|
+
|
|
3
14
|
## 0.5.2
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @nanisoft/prism-tokens
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Add the `aurora` ambient cycle at 24000ms
|
|
8
|
+
|
|
9
|
+
The new member measures light crossing a ground: the washes a hero stands on.
|
|
10
|
+
It rides `ambient-ease-drift`, holds to the one-second floor with the rest of
|
|
11
|
+
the group, and is admitted into the closed set the emitted-contract gate holds.
|
|
12
|
+
|
|
3
13
|
## 1.2.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
|
@@ -1,5 +1,57 @@
|
|
|
1
1
|
# @nanisoft/prism-ui
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Add the third law of motion: arrivals, living fields, and the reading rail
|
|
8
|
+
|
|
9
|
+
Motion now has three laws. Feedback and the ambient cycles are unchanged; the
|
|
10
|
+
new law admits three authored mechanisms, each shipped as primitives rather
|
|
11
|
+
than opened as a licence:
|
|
12
|
+
|
|
13
|
+
- `Reveal` wraps a band in a scroll-driven arrival bound to the reader's own
|
|
14
|
+
scroll through `prism-reveal` utilities behind a view-timeline capability
|
|
15
|
+
check. No script arms it, a browser without the timeline ships no rule at
|
|
16
|
+
all, and the universal reduced-motion rule hands that reader the visible
|
|
17
|
+
page.
|
|
18
|
+
- `ParticleField` is the one script-driven figure: a linked, pointer-answering
|
|
19
|
+
medium whose complete still field renders on the server, whose loop stops off
|
|
20
|
+
screen, and whose palette is re-read when the document's pack or mode
|
|
21
|
+
changes. `AuroraWash` is the still counterpart: translucent planes in the
|
|
22
|
+
pack's own colours on the new `aurora` cycle, transform-only.
|
|
23
|
+
- `SiteNavbar` gains a reading rail on its sticky hairline, `scrollRail` on by
|
|
24
|
+
default: a spectrum line filling with the page's own scroll, drawing nothing
|
|
25
|
+
in a browser that cannot run the timeline. The current link's filled pill
|
|
26
|
+
becomes a persistent spectrum underline, and `Hero01` gains a `backdrop` slot
|
|
27
|
+
so a hero composes its own ground.
|
|
28
|
+
|
|
29
|
+
`Backdrop01` offers `field="aurora"`, and `prism-text-spectrum` is the one
|
|
30
|
+
admitted motion on text: display ink lit at the sweep tempo with foreground
|
|
31
|
+
ends, so it holds contrast in every pack and both modes.
|
|
32
|
+
|
|
33
|
+
`scripts/check-motion.mjs` holds the new layer: a reveal or rail selector
|
|
34
|
+
outside the `@supports` block naming its timeline fails the build, because an
|
|
35
|
+
animation whose timeline fails to resolve pauses at its invisible keyframe.
|
|
36
|
+
|
|
37
|
+
### Patch Changes
|
|
38
|
+
|
|
39
|
+
- Updated dependencies
|
|
40
|
+
- @nanisoft/prism-tokens@1.5.0
|
|
41
|
+
|
|
42
|
+
## 1.4.0
|
|
43
|
+
|
|
44
|
+
### Minor Changes
|
|
45
|
+
|
|
46
|
+
- 3f9cc78: Add `MediaBand01`, an editorial band with a caller-owned media slot, and a `size`
|
|
47
|
+
prop on `Section` for compact, default and tall vertical rhythms.
|
|
48
|
+
|
|
49
|
+
The band owns the frame, the ratio, the surface and the order, and it never puts
|
|
50
|
+
the copy on top of an arbitrary photograph. The media is the caller's node, so an
|
|
51
|
+
image, a video poster or a composed figure can sit in the frame. The Section size
|
|
52
|
+
keeps the existing default byte-identical and gives a page three authored rhythms
|
|
53
|
+
instead of five site stylesheets inventing their own.
|
|
54
|
+
|
|
3
55
|
## 1.3.0
|
|
4
56
|
|
|
5
57
|
### Minor Changes
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# AuroraWash
|
|
2
|
+
|
|
3
|
+
Light moving through a ground: translucent planes in the pack’s own colours, each on its own long orbit of the aurora cycle.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { AuroraWash } from '@nanisoft/prism-ui/components/aurora-wash'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
AuroraWash is light moving through a ground: two or three large translucent
|
|
12
|
+
planes in the pack's own colours, each on its own long orbit of the aurora
|
|
13
|
+
cycle. It follows the wash law, so the stops are semantic, the element is
|
|
14
|
+
`aria-hidden`, and it never touches text.
|
|
15
|
+
|
|
16
|
+
## Guidelines
|
|
17
|
+
|
|
18
|
+
### When to use
|
|
19
|
+
|
|
20
|
+
Use it where a hero's ground would otherwise be flat: a band whose claim is
|
|
21
|
+
that a surface is alive reads differently with light crossing it, and the wash
|
|
22
|
+
says that without drawing a single invented mark. It repaints with the pack,
|
|
23
|
+
because the planes carry the pack's own primary and series colours, so a wash
|
|
24
|
+
in one pack is a different wash in another.
|
|
25
|
+
|
|
26
|
+
Give it a clipped container. The wrapper clips, but the caller gives it the
|
|
27
|
+
positioned ancestor to fill, and a wash that escapes its band is a page-wide
|
|
28
|
+
stain.
|
|
29
|
+
|
|
30
|
+
### When not to use
|
|
31
|
+
|
|
32
|
+
Do not put type on it without its own contrast. A wash is a ground, and the
|
|
33
|
+
content over it owns the contrast the way content over `SignalField` does.
|
|
34
|
+
|
|
35
|
+
Do not use two on one page. Light moving through two grounds is two weathers,
|
|
36
|
+
and the reader cannot be in both.
|
|
37
|
+
|
|
38
|
+
Do not reach for it when the claim is a mechanism rather than an atmosphere. A
|
|
39
|
+
marker crossing a rail is `Backdrop01` with the travel cycle; the wash says a
|
|
40
|
+
surface is lit, not that a system runs.
|
|
41
|
+
|
|
42
|
+
### Best practices
|
|
43
|
+
|
|
44
|
+
- Let it be quiet. The intensity of a wash is the caller's, through opacity on
|
|
45
|
+
the caller's own wrapper, and the restrained version is the one that reads
|
|
46
|
+
as a place rather than as a poster.
|
|
47
|
+
- Pair it with `ParticleField` only when the two claims belong together, and
|
|
48
|
+
let the tempos differ, which the aurora and drift cycles already do.
|
|
49
|
+
- Trust the still frame. The reduced-motion rule holds the planes at rest and
|
|
50
|
+
the wash survives it, which is the test every ambient figure in this system
|
|
51
|
+
passes.
|
|
52
|
+
|
|
53
|
+
**The wash as a ground, with type over it, and a pack boundary around the**
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { AuroraWash } from '@nanisoft/prism-ui/components/aurora-wash'
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* The wash as a ground, with type over it, and a pack boundary around the
|
|
60
|
+
* second card so the demo shows the claim the component makes: the planes
|
|
61
|
+
* carry the ground's own colours, and a wash in one pack is a different wash
|
|
62
|
+
* in another.
|
|
63
|
+
*/
|
|
64
|
+
export default function AuroraWashDemo() {
|
|
65
|
+
return (
|
|
66
|
+
<div className="flex flex-col gap-6">
|
|
67
|
+
<div className="bg-card relative overflow-hidden rounded-xl border p-10">
|
|
68
|
+
<AuroraWash className="absolute inset-0" />
|
|
69
|
+
<div className="relative">
|
|
70
|
+
<p className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
|
|
71
|
+
Preview
|
|
72
|
+
</p>
|
|
73
|
+
<h3 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
74
|
+
Light through the ground the page is wearing
|
|
75
|
+
</h3>
|
|
76
|
+
<p className="text-muted-foreground mt-4 max-w-168 text-lg text-pretty">
|
|
77
|
+
Three planes on one long orbit, out of step with each other, each
|
|
78
|
+
carrying a colour the page already resolved.
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Props
|
|
88
|
+
|
|
89
|
+
**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. The wash fills the nearest positioned ancestor, so the caller's job is to give it one and to keep the content above it; the wash never carries the content and never takes the pointer.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# ParticleField
|
|
2
|
+
|
|
3
|
+
A living field: points drifting on linked paths, answering the pointer, and standing still as a complete figure when the loop is stopped or declined.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { ParticleField } from '@nanisoft/prism-ui/components/particle-field'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
ParticleField is a living field: points drifting on linked paths, the medium a
|
|
12
|
+
page's largest statements stand in front of. It is the one script-driven figure
|
|
13
|
+
in the system, and the static field it renders on the server is the contract
|
|
14
|
+
that makes that safe: stop the loop, disarm the canvas, print the page, and the
|
|
15
|
+
figure is still a field, still true, still legible.
|
|
16
|
+
|
|
17
|
+
## Guidelines
|
|
18
|
+
|
|
19
|
+
### When to use
|
|
20
|
+
|
|
21
|
+
Use it where a page claims there is a medium to move through: a hero that says
|
|
22
|
+
traffic flows, a band that says an estate is observed, a ground that says the
|
|
23
|
+
surface is live. The links are what make it a medium rather than dust, so size
|
|
24
|
+
`linkDistance` to the band: a wide band carries longer lines than a panel.
|
|
25
|
+
|
|
26
|
+
Give it room behind content that has its own position and its own contrast. It
|
|
27
|
+
is a ground, exactly as `SignalField` is, and it composes behind type rather
|
|
28
|
+
than beside it.
|
|
29
|
+
|
|
30
|
+
### When not to use
|
|
31
|
+
|
|
32
|
+
Do not use it behind a reading passage. A medium that moves while a reader
|
|
33
|
+
reads is the first thing a reader with vestibular sensitivity will ask to have
|
|
34
|
+
gone, and `SignalField` still, or nothing, is the ground a passage wants.
|
|
35
|
+
|
|
36
|
+
Do not use it to say something. It is `aria-hidden` by default because a medium
|
|
37
|
+
is not information; a figure that carries a claim is `PulseGraph` or
|
|
38
|
+
`PulseSeries`, both of which require a name.
|
|
39
|
+
|
|
40
|
+
Do not stack two of them. Two media on one page is a collision, and the reader
|
|
41
|
+
cannot tell which one they are looking through.
|
|
42
|
+
|
|
43
|
+
### Best practices
|
|
44
|
+
|
|
45
|
+
- Leave `interactive` on wherever a reader's hand can reach the ground, and
|
|
46
|
+
turn it off under text a reader will select, because a surface that moves
|
|
47
|
+
during a selection is a surface fighting the selection.
|
|
48
|
+
- Keep the count in the dozens. A field with hundreds of points is a haze, and
|
|
49
|
+
the clamp will not save a composition that wanted fog.
|
|
50
|
+
- Pair it with `AuroraWash` when the claim is light moving through the medium
|
|
51
|
+
as well as across it, and let the two differ in tempo, which they already do
|
|
52
|
+
by an order of magnitude.
|
|
53
|
+
- Trust the floor. The component that renders nothing until a script runs is
|
|
54
|
+
the retired line's defect, and this one renders the whole figure before any
|
|
55
|
+
script decides to help.
|
|
56
|
+
|
|
57
|
+
**The field as a ground, with type over it, which is the only honest way to**
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { ParticleField } from '@nanisoft/prism-ui/components/particle-field'
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* The field as a ground, with type over it, which is the only honest way to
|
|
64
|
+
* preview a medium: a field on its own is a scatter and there is nothing to
|
|
65
|
+
* judge.
|
|
66
|
+
*
|
|
67
|
+
* The demo is a server component. The field is a client component under it, so
|
|
68
|
+
* the floor renders here and the loop arms in the reader's browser, which is
|
|
69
|
+
* the arrangement a product composes.
|
|
70
|
+
*/
|
|
71
|
+
export default function ParticleFieldDemo() {
|
|
72
|
+
return (
|
|
73
|
+
<div className="bg-card relative overflow-hidden rounded-xl border p-10">
|
|
74
|
+
<ParticleField count={56} className="absolute inset-0" />
|
|
75
|
+
<div className="relative">
|
|
76
|
+
<p className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
|
|
77
|
+
Preview
|
|
78
|
+
</p>
|
|
79
|
+
<h3 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
80
|
+
A medium as a ground, with type over it
|
|
81
|
+
</h3>
|
|
82
|
+
<p className="text-muted-foreground mt-4 max-w-168 text-lg text-pretty">
|
|
83
|
+
The points drift on linked paths and answer the pointer. Move the hand
|
|
84
|
+
across this panel and the medium parts around it, and the field it
|
|
85
|
+
falls back to when the loop is stopped is the same field at rest.
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Props
|
|
94
|
+
|
|
95
|
+
**`count`** `number` · optional · default: — — How many points the field drifts. Read as a suggestion and clamped, because a field behind a hero wants dozens and a field behind a panel wants a handful, and a count outside that range is either a haze or a chart.
|
|
96
|
+
**`linkDistance`** `number` · optional · default: — — How far apart two points may sit and still be linked, in CSS pixels. The links are what make a field read as a medium rather than as dust, and the distance is a prop because a wide band carries longer lines than a panel.
|
|
97
|
+
**`interactive`** `boolean` · optional · default: — — Whether the reader's pointer pushes the field. On by default, because a medium that answers the hand is the claim this figure makes; a caller placing the field under text a reader is selecting turns it off, because a surface that moves while a reader drags across it is a surface fighting the selection.
|
|
98
|
+
**`label`** `string` · optional · default: — — The name of the figure, or `decorative`. See `SignalFieldProps`.
|
|
99
|
+
**`decorative`** `boolean` · optional · default: —
|
|
100
|
+
**`className`** `string` · optional · default: — — Layout only, exactly as on every Component.
|