@muibook/components 20.0.0 → 20.1.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/AGENTS.md +67 -0
- package/DESIGN.md +358 -0
- package/README.md +52 -1
- package/dist/esm/agent/keywords/index.js +2 -204
- package/dist/esm/agent/prompts/index.js +6 -434
- package/dist/esm/components/mui-accordion/core/index.js +25 -17
- package/dist/esm/components/mui-avatar/index.js +99 -42
- package/dist/esm/components/mui-avatar-chip/index.js +158 -0
- package/dist/esm/components/mui-avatar-group/index.js +88 -0
- package/dist/esm/components/mui-badge/index.js +2 -2
- package/dist/esm/components/mui-body/index.js +20 -11
- package/dist/esm/components/mui-button/index.js +117 -65
- package/dist/esm/components/mui-calendar/index.js +199 -0
- package/dist/esm/components/mui-card/body/index.js +32 -17
- package/dist/esm/components/mui-card/footer/index.js +11 -9
- package/dist/esm/components/mui-carousel/controller/index.js +1 -1
- package/dist/esm/components/mui-checkbox/index.js +23 -18
- package/dist/esm/components/mui-chip/index.js +184 -68
- package/dist/esm/components/mui-chip-input/index.js +146 -137
- package/dist/esm/components/mui-chip-rail/index.js +154 -51
- package/dist/esm/components/mui-code/index.js +27 -8
- package/dist/esm/components/mui-container/index.js +68 -45
- package/dist/esm/components/mui-date-picker/index.js +169 -0
- package/dist/esm/components/mui-drawer/index.js +968 -100
- package/dist/esm/components/mui-dropdown/index.js +250 -63
- package/dist/esm/components/mui-field/index.js +1 -1
- package/dist/esm/components/mui-file-upload/index.js +13 -4
- package/dist/esm/components/mui-form-group/index.js +1 -2
- package/dist/esm/components/mui-form-message/index.js +4 -9
- package/dist/esm/components/mui-hint/index.js +178 -72
- package/dist/esm/components/mui-icons/copy/index.js +54 -0
- package/dist/esm/components/mui-icons/fullscreen/index.js +5 -0
- package/dist/esm/components/mui-icons/icon-helper/index.js +56 -0
- package/dist/esm/components/mui-icons/index.js +14 -1
- package/dist/esm/components/mui-icons/moon/index.js +3 -1
- package/dist/esm/components/mui-icons/{rectangle-bottom-panel → panel}/index.js +6 -6
- package/dist/esm/components/mui-icons/pause/index.js +5 -0
- package/dist/esm/components/mui-icons/picture-in-picture/index.js +5 -0
- package/dist/esm/components/mui-icons/play-fill/index.js +5 -0
- package/dist/esm/components/mui-icons/rectangle-right-drawer/index.js +56 -0
- package/dist/esm/components/mui-icons/reload/index.js +5 -0
- package/dist/esm/components/mui-icons/speaker-mute/index.js +5 -0
- package/dist/esm/components/mui-icons/speaker-one-wave/index.js +5 -0
- package/dist/esm/components/mui-icons/speaker-two-wave/index.js +5 -0
- package/dist/esm/components/mui-icons/spinner/index.js +7 -5
- package/dist/esm/components/mui-icons/stop-fill/index.js +5 -0
- package/dist/esm/components/mui-icons/sun/index.js +5 -5
- package/dist/esm/components/mui-icons/timer/index.js +54 -0
- package/dist/esm/components/mui-icons/toggle/index.js +16 -6
- package/dist/esm/components/mui-icons/vertical-ellipsis/index.js +5 -0
- package/dist/esm/components/mui-illustrations/trash/index.js +6 -5
- package/dist/esm/components/mui-input/index.js +87 -62
- package/dist/esm/components/mui-link/index.js +195 -83
- package/dist/esm/components/mui-media-player/index.js +1577 -83
- package/dist/esm/components/mui-model-viewer/index.js +258 -0
- package/dist/esm/components/mui-progress-ring/index.js +349 -0
- package/dist/esm/components/mui-prompt/index.js +99 -71
- package/dist/esm/components/mui-prompt-preview/index.js +11 -23
- package/dist/esm/components/mui-radio/index.js +38 -17
- package/dist/esm/components/mui-range-input/index.js +9 -4
- package/dist/esm/components/mui-responsive/index.js +60 -27
- package/dist/esm/components/mui-search-input/index.js +300 -0
- package/dist/esm/components/mui-select/index.js +231 -42
- package/dist/esm/components/mui-slat/slat/index.js +40 -12
- package/dist/esm/components/mui-spinner/index.js +11 -9
- package/dist/esm/components/mui-switch/index.js +23 -20
- package/dist/esm/components/mui-table/row/index.js +2 -6
- package/dist/esm/components/mui-table/table/index.js +157 -14
- package/dist/esm/components/mui-textarea/index.js +43 -26
- package/dist/esm/components/mui-time/index/index.js +336 -0
- package/dist/esm/components/mui-time-picker/index.js +126 -0
- package/dist/esm/components/mui-video-thumbnail/index.js +5 -5
- package/dist/esm/css/mui-brand.css +12 -8
- package/dist/esm/css/mui-tokens.css +417 -305
- package/dist/esm/css/readme.md +2 -2
- package/dist/esm/custom-elements.json +3678 -1553
- package/dist/esm/dynamic-attrs.json +263 -66
- package/dist/esm/index.js +30 -6
- package/dist/esm/knowledge/compositions/index.js +1560 -0
- package/dist/esm/knowledge/index.js +28 -0
- package/dist/esm/knowledge/keywords/index.js +306 -0
- package/dist/esm/knowledge/rules/index.js +199 -0
- package/dist/esm/tokens/js/index.js +143 -139
- package/dist/types/agent/keywords/index.d.ts +1 -1
- package/dist/types/components/mui-avatar-chip/api.d.ts +28 -0
- package/dist/types/components/mui-avatar-chip/index.d.ts +18 -0
- package/dist/types/components/mui-avatar-group/api.d.ts +28 -0
- package/dist/types/components/mui-avatar-group/doc.d.ts +2 -0
- package/dist/types/components/mui-avatar-group/index.d.ts +1 -0
- package/dist/types/components/mui-button/api.d.ts +2 -2
- package/dist/types/components/mui-calendar/api.d.ts +41 -0
- package/dist/types/components/mui-calendar/doc.d.ts +2 -0
- package/dist/types/components/mui-calendar/index.d.ts +3 -0
- package/dist/types/components/mui-checkbox/api.d.ts +4 -0
- package/dist/types/components/mui-chip-input/api.d.ts +4 -0
- package/dist/types/components/mui-chip-rail/index.d.ts +1 -0
- package/dist/types/components/mui-date-picker/api.d.ts +38 -0
- package/dist/types/components/mui-date-picker/doc.d.ts +2 -0
- package/dist/types/components/mui-date-picker/index.d.ts +6 -0
- package/dist/types/components/mui-drawer/api.d.ts +4 -0
- package/dist/types/components/mui-drawer/index.d.ts +2 -0
- package/dist/types/components/mui-file-upload/api.d.ts +4 -0
- package/dist/types/components/mui-icons/fullscreen.d.ts +1 -0
- package/dist/types/components/mui-icons/icon-helper.d.ts +1 -0
- package/dist/types/components/mui-icons/index.d.ts +14 -1
- package/dist/types/components/mui-icons/panel.d.ts +1 -0
- package/dist/types/components/mui-icons/pause.d.ts +1 -0
- package/dist/types/components/mui-icons/picture-in-picture.d.ts +1 -0
- package/dist/types/components/mui-icons/play-fill.d.ts +1 -0
- package/dist/types/components/mui-icons/rectangle-right-drawer.d.ts +1 -0
- package/dist/types/components/mui-icons/reload.d.ts +1 -0
- package/dist/types/components/mui-icons/speaker-mute.d.ts +1 -0
- package/dist/types/components/mui-icons/speaker-one-wave.d.ts +1 -0
- package/dist/types/components/mui-icons/speaker-two-wave.d.ts +1 -0
- package/dist/types/components/mui-icons/stop-fill.d.ts +1 -0
- package/dist/types/components/mui-icons/timer.d.ts +1 -0
- package/dist/types/components/mui-icons/vertical-ellipsis.d.ts +1 -0
- package/dist/types/components/mui-input/api.d.ts +12 -0
- package/dist/types/components/mui-media-player/api.d.ts +4 -0
- package/dist/types/components/mui-media-player/index.d.ts +13 -4
- package/dist/types/components/mui-model-viewer/api.d.ts +28 -0
- package/dist/types/components/mui-model-viewer/doc.d.ts +2 -0
- package/dist/types/components/mui-model-viewer/index.d.ts +17 -0
- package/dist/types/components/mui-progress-ring/api.d.ts +24 -0
- package/dist/types/components/mui-progress-ring/doc.d.ts +2 -0
- package/dist/types/components/mui-progress-ring/index.d.ts +1 -0
- package/dist/types/components/mui-radio/api.d.ts +12 -0
- package/dist/types/components/mui-range-input/api.d.ts +4 -0
- package/dist/types/components/mui-responsive/api.d.ts +10 -2
- package/dist/types/components/mui-search-input/api.d.ts +40 -0
- package/dist/types/components/mui-search-input/doc.d.ts +2 -0
- package/dist/types/components/mui-search-input/index.d.ts +3 -0
- package/dist/types/components/mui-select/api.d.ts +12 -0
- package/dist/types/components/mui-switch/api.d.ts +4 -0
- package/dist/types/components/mui-table/api.d.ts +15 -0
- package/dist/types/components/mui-textarea/api.d.ts +12 -0
- package/dist/types/components/mui-time/api.d.ts +41 -0
- package/dist/types/components/mui-time/doc.d.ts +2 -0
- package/dist/types/components/mui-time/index.d.ts +1 -0
- package/dist/types/components/mui-time-picker/api.d.ts +38 -0
- package/dist/types/components/mui-time-picker/doc.d.ts +2 -0
- package/dist/types/components/mui-time-picker/index.d.ts +4 -0
- package/dist/types/index.d.ts +24 -2
- package/dist/types/knowledge/compositions.d.ts +4644 -0
- package/dist/types/knowledge/index.d.ts +4657 -0
- package/dist/types/knowledge/keywords.d.ts +4 -0
- package/dist/types/knowledge/rules.d.ts +1 -0
- package/dist/types/tokens/js/index.d.ts +11 -7
- package/package.json +119 -12
- package/dist/esm/components/mui-form-hint/index.js +0 -1
- package/dist/types/components/mui-form-hint/index.d.ts +0 -1
- /package/dist/types/components/{mui-form-hint → mui-avatar-chip}/doc.d.ts +0 -0
- /package/dist/types/components/mui-icons/{rectangle-bottom-panel.d.ts → copy.d.ts} +0 -0
|
@@ -1,206 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
// FEEDBACK
|
|
3
|
-
alert: ["alert", "success", "info", "warning", "error", "message", "banner", "notification"],
|
|
4
|
-
message: [
|
|
5
|
-
"page message",
|
|
6
|
-
"page notice",
|
|
7
|
-
"persistent notice",
|
|
8
|
-
"persistent message",
|
|
9
|
-
"system notice",
|
|
10
|
-
"status notice",
|
|
11
|
-
"message banner"
|
|
12
|
-
],
|
|
13
|
-
loader: ["loader", "loading", "skeleton", "placeholder", "shimmer", "pulse", "fade", "spinner"],
|
|
14
|
-
spinner: ["spinner", "loading", "busy", "indicator", "progress"],
|
|
15
|
-
progress: ["progress", "bar", "loading", "completion", "percent", "syncing", "pending"],
|
|
16
|
-
// ACTIONS
|
|
17
|
-
button: ["button", "click", "action", "submit", "cta", "primary", "secondary", "tertiary", "attention"],
|
|
18
|
-
"button-group": ["button group", "buttons", "actions", "group", "right", "align"],
|
|
19
|
-
link: ["link", "anchor", "hyperlink", "navigation", "primary", "secondary", "tertiary", "attention"],
|
|
20
|
-
dropdown: ["dropdown", "menu", "popover", "context menu", "action menu"],
|
|
21
|
-
chip: ["chip", "tag", "filter", "active", "dismiss", "input chip"],
|
|
22
|
-
// CONTENT
|
|
23
|
-
icon: [
|
|
24
|
-
"icon",
|
|
25
|
-
"glyph",
|
|
26
|
-
"symbol",
|
|
27
|
-
"add",
|
|
28
|
-
"plus",
|
|
29
|
-
"close",
|
|
30
|
-
"x",
|
|
31
|
-
"check",
|
|
32
|
-
"tick",
|
|
33
|
-
"warning",
|
|
34
|
-
"alert",
|
|
35
|
-
"chevron",
|
|
36
|
-
"arrow",
|
|
37
|
-
"accessibility",
|
|
38
|
-
"sun",
|
|
39
|
-
"moon",
|
|
40
|
-
"info",
|
|
41
|
-
"stop",
|
|
42
|
-
"globe",
|
|
43
|
-
"menu",
|
|
44
|
-
"ellipsis",
|
|
45
|
-
"grid",
|
|
46
|
-
"message",
|
|
47
|
-
"sidebar",
|
|
48
|
-
"subtract",
|
|
49
|
-
"minus"
|
|
50
|
-
],
|
|
51
|
-
heading: ["heading", "title", "h1", "h2", "h3", "size", "level"],
|
|
52
|
-
body: ["body", "text", "paragraph", "copy", "default", "optional", "success", "warning", "error"],
|
|
53
|
-
span: ["span", "inline", "text", "rich text", "inline link"],
|
|
54
|
-
code: ["code", "snippet", "monospace", "pre", "syntax"],
|
|
55
|
-
quote: ["quote", "blockquote", "citation", "pull quote"],
|
|
56
|
-
list: ["list", "items", "ul", "li", "ordered", "unordered"],
|
|
57
|
-
avatar: ["avatar", "profile", "user", "initials", "image", "icon", "person"],
|
|
58
|
-
image: ["image", "photo", "picture", "figure", "caption", "img"],
|
|
59
|
-
skeleton: ["skeleton", "loading", "placeholder", "shimmer", "pulse", "line", "rect", "circle"],
|
|
60
|
-
badge: [
|
|
61
|
-
"badge",
|
|
62
|
-
"count",
|
|
63
|
-
"label",
|
|
64
|
-
"tag",
|
|
65
|
-
"metadata",
|
|
66
|
-
"notification",
|
|
67
|
-
"overlay",
|
|
68
|
-
"paid",
|
|
69
|
-
"busy",
|
|
70
|
-
"offline",
|
|
71
|
-
"beta",
|
|
72
|
-
"default",
|
|
73
|
-
"shared",
|
|
74
|
-
"positive",
|
|
75
|
-
"warning",
|
|
76
|
-
"error"
|
|
77
|
-
],
|
|
78
|
-
status: [
|
|
79
|
-
"status",
|
|
80
|
-
"state",
|
|
81
|
-
"workflow state",
|
|
82
|
-
"record status",
|
|
83
|
-
"object status",
|
|
84
|
-
"active",
|
|
85
|
-
"draft",
|
|
86
|
-
"pending",
|
|
87
|
-
"review",
|
|
88
|
-
"blocked",
|
|
89
|
-
"synced",
|
|
90
|
-
"queued"
|
|
91
|
-
],
|
|
92
|
-
// ACCORDION
|
|
93
|
-
accordion: [
|
|
94
|
-
"accordion",
|
|
95
|
-
"collapse",
|
|
96
|
-
"expand",
|
|
97
|
-
"toggle",
|
|
98
|
-
"show more",
|
|
99
|
-
"disclosure",
|
|
100
|
-
"section",
|
|
101
|
-
"detail",
|
|
102
|
-
"summary",
|
|
103
|
-
"accordion block",
|
|
104
|
-
"accordion inline",
|
|
105
|
-
"accordion group"
|
|
106
|
-
],
|
|
107
|
-
// LAYOUT
|
|
108
|
-
stack: ["stack", "v-stack", "h-stack", "vertical", "horizontal", "spacing"],
|
|
109
|
-
grid: ["grid", "columns", "rows", "layout", "container"],
|
|
110
|
-
container: ["container", "wrapper", "layout", "section"],
|
|
111
|
-
responsive: ["responsive", "breakpoint", "mobile", "desktop", "showAbove", "showBelow"],
|
|
112
|
-
rule: ["rule", "divider", "separator", "line", "hr"],
|
|
113
|
-
// SURFACES
|
|
114
|
-
card: ["card", "panel", "box", "tile"],
|
|
115
|
-
dialog: ["dialog", "modal", "popup", "overlay", "lightbox", "confirm"],
|
|
116
|
-
drawer: ["drawer", "sidebar", "panel", "slide", "overlay", "push", "persistent", "left", "right"],
|
|
117
|
-
slat: [
|
|
118
|
-
"slat",
|
|
119
|
-
"row",
|
|
120
|
-
"summary",
|
|
121
|
-
"item row",
|
|
122
|
-
"preview",
|
|
123
|
-
"cell",
|
|
124
|
-
"list item",
|
|
125
|
-
"entry",
|
|
126
|
-
"stacked",
|
|
127
|
-
"slat header",
|
|
128
|
-
"slat action",
|
|
129
|
-
"slat content"
|
|
130
|
-
],
|
|
131
|
-
table: [
|
|
132
|
-
"table",
|
|
133
|
-
"data table",
|
|
134
|
-
"grid",
|
|
135
|
-
"data grid",
|
|
136
|
-
"spreadsheet",
|
|
137
|
-
"rows",
|
|
138
|
-
"columns",
|
|
139
|
-
"cells",
|
|
140
|
-
"header row",
|
|
141
|
-
"data",
|
|
142
|
-
"record",
|
|
143
|
-
"tabular"
|
|
144
|
-
],
|
|
145
|
-
smartCard: [
|
|
146
|
-
"card",
|
|
147
|
-
"smart card",
|
|
148
|
-
"debit",
|
|
149
|
-
"credit",
|
|
150
|
-
"reward",
|
|
151
|
-
"payment",
|
|
152
|
-
"bank",
|
|
153
|
-
"plain",
|
|
154
|
-
"animated",
|
|
155
|
-
"inverted",
|
|
156
|
-
"frozen",
|
|
157
|
-
"logo",
|
|
158
|
-
"partner",
|
|
159
|
-
"network",
|
|
160
|
-
"diamond",
|
|
161
|
-
"premier",
|
|
162
|
-
"sapphire",
|
|
163
|
-
"crystal",
|
|
164
|
-
"visa",
|
|
165
|
-
"mastercard",
|
|
166
|
-
"amex",
|
|
167
|
-
"payment network",
|
|
168
|
-
"background image",
|
|
169
|
-
"bg-image",
|
|
170
|
-
"background color",
|
|
171
|
-
"bg-color",
|
|
172
|
-
"number",
|
|
173
|
-
"type",
|
|
174
|
-
"variant",
|
|
175
|
-
"state"
|
|
176
|
-
],
|
|
177
|
-
// FORMS AND INPUTS
|
|
178
|
-
input: ["input", "text field", "text input", "field", "entry", "form field"],
|
|
179
|
-
textarea: ["textarea", "text area", "multiline", "long text", "message", "description", "rows"],
|
|
180
|
-
select: ["select", "dropdown", "picker", "options", "choose", "combobox"],
|
|
181
|
-
checkbox: ["checkbox", "check", "tick", "agree", "terms", "boolean", "toggle"],
|
|
182
|
-
radio: ["radio", "radio button", "option", "choose one", "single select"],
|
|
183
|
-
switch: ["switch", "toggle", "on off", "enable", "disable", "boolean"],
|
|
184
|
-
field: ["field", "form field", "label", "input wrapper", "validation", "error", "success", "warning"],
|
|
185
|
-
"form-group": ["form group", "form", "group", "vertical", "horizontal", "fieldset"],
|
|
186
|
-
"form-section": ["form section", "section", "form heading", "grouped fields"],
|
|
187
|
-
"form-message": ["form message", "hint", "helper text", "validation message", "field message"],
|
|
188
|
-
rangeInput: ["range", "slider", "min", "max", "step", "range input", "scrubber"],
|
|
189
|
-
chipInput: ["chip input", "tag input", "multi select", "token input", "chips"],
|
|
190
|
-
fileUpload: ["file upload", "upload", "attach", "file", "drag and drop", "attachment"],
|
|
191
|
-
addOn: ["addon", "input after", "input before", "prefix", "suffix", "unit", "currency"],
|
|
192
|
-
// NAVIGATION
|
|
193
|
-
tab: ["tab", "tab bar", "tab controller", "tab panel", "navigation", "tabs"],
|
|
194
|
-
carousel: ["carousel", "slider", "carousel controller", "carousel panel", "carousel item", "carousel tabs"],
|
|
195
|
-
stepper: ["stepper", "steps", "wizard", "progress steps", "multi step", "step indicator"],
|
|
196
|
-
// PROMPT
|
|
197
|
-
prompt: ["prompt", "ai prompt", "chat input", "message input", "fan", "context", "preview", "submit"],
|
|
198
|
-
promptMessage: ["prompt message", "chat message", "ai message", "ghost", "compact", "density"],
|
|
199
|
-
promptPreview: ["prompt preview", "preview", "badge", "image preview", "animated preview"],
|
|
200
|
-
promptToggle: ["prompt toggle", "toggle", "icon mode", "chip mode"],
|
|
201
|
-
// PRESENTATION
|
|
202
|
-
slideFrame: ["slide", "slides", "presentation", "slide frame", "deck", "ratio", "fullscreen", "section", "notes"]
|
|
203
|
-
};
|
|
1
|
+
import { agentKeywords as r } from "../../knowledge/keywords/index.js";
|
|
204
2
|
export {
|
|
205
|
-
|
|
3
|
+
r as keywords
|
|
206
4
|
};
|
|
@@ -1,444 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
import { agentCompositions as t } from "../../knowledge/compositions/index.js";
|
|
2
|
+
import { rules as o } from "../../knowledge/rules/index.js";
|
|
3
|
+
const n = [
|
|
2
4
|
{
|
|
3
5
|
role: "system",
|
|
4
|
-
content:
|
|
5
|
-
Generate MUIBOOK component trees as JSON.
|
|
6
|
-
|
|
7
|
-
Output JSON tree nodes with:
|
|
8
|
-
- type: component type
|
|
9
|
-
- id: unique descriptive id
|
|
10
|
-
- props: component props
|
|
11
|
-
- children: child nodes, or []
|
|
12
|
-
|
|
13
|
-
CRITICAL RULES:
|
|
14
|
-
1. Always return ONLY valid JSON - no markdown, no code blocks, no explanations
|
|
15
|
-
2. Every node MUST have: type, id, props, and children
|
|
16
|
-
3. IDs must be unique across the entire tree
|
|
17
|
-
4. Use descriptive IDs that reflect the component's purpose
|
|
18
|
-
5. Card content must be inside direct child CardBody.
|
|
19
|
-
6. Container components can have children.
|
|
20
|
-
7. Leaf components use children: [].
|
|
21
|
-
8. Props must match the component API.
|
|
22
|
-
9. Root additions use Container with center=true and size=medium.
|
|
23
|
-
10. Button and Link text stays on the component; do not wrap in Body.
|
|
24
|
-
11. Put visual backgrounds on layout style or SmartCard bg props.
|
|
25
|
-
12. SmartCard props use kebab-case: bg-image, bg-color, logo-height.
|
|
26
|
-
13. Normalize scanned Muibook/Figma names to Redactd component types before output.
|
|
27
|
-
14. Do not use Message as a styled paragraph, inline note, or form helper. Message is only for persistent page-level notices with a heading and slotted body content.
|
|
28
|
-
|
|
29
|
-
MUI SCAN NORMALIZATION RULES:
|
|
30
|
-
- Normalize muiscan to Redactd types before output
|
|
31
|
-
- Final JSON cannot contain mui-*, raw span, TEXT, or text node types
|
|
32
|
-
- Core mappings:
|
|
33
|
-
- mui-v-stack -> VStack
|
|
34
|
-
- mui-h-stack -> HStack
|
|
35
|
-
- mui-button -> Button
|
|
36
|
-
- mui-link -> Link
|
|
37
|
-
- mui-input -> Input
|
|
38
|
-
- mui-select -> Select
|
|
39
|
-
- span -> Span
|
|
40
|
-
- mui-icon-[name] -> _Icon with props.icon = "mui-icon-[name]"
|
|
41
|
-
- Preserve hierarchy, spacing, slots, key props, and valid style strings
|
|
42
|
-
- Preserve icon slots:
|
|
43
|
-
- slot=before -> props.slot = "before"
|
|
44
|
-
- slot=after -> props.slot = "after"
|
|
45
|
-
- if an icon is the only child of Button, Link, or Chip, keep it as the default child
|
|
46
|
-
|
|
47
|
-
TEXT NODE RULES FOR MUISCAN:
|
|
48
|
-
- TEXT is input-only; collapse into the nearest valid Redactd text model
|
|
49
|
-
- Collapse TEXT -> props.text for:
|
|
50
|
-
- mui-body -> Body.props.text
|
|
51
|
-
- mui-heading -> Heading.props.text
|
|
52
|
-
- mui-button -> Button.props.text
|
|
53
|
-
- mui-link -> Link.props.text
|
|
54
|
-
- mui-tab-item -> TabItem.props.text
|
|
55
|
-
- mui-list-item -> ListItem.props.text
|
|
56
|
-
- For span:
|
|
57
|
-
- convert to Span
|
|
58
|
-
- consume direct TEXT into Span.props.text
|
|
59
|
-
- keep inline children such as Link nested inside the same Span
|
|
60
|
-
- Exceptions:
|
|
61
|
-
- mui-badge: consume TEXT as the badge's direct rendered text; preserve before/after slot children; do not invent Body
|
|
62
|
-
- mui-status: consume TEXT as the status's direct rendered text; preserve before/after icon slot children; do not invent Body, Badge, or Message inside Status
|
|
63
|
-
- mui-chip: consume TEXT as the chip's direct rendered text; preserve before/after slot children; do not invent Body
|
|
64
|
-
- mui-alert: preserve variant/label, convert default content to Span, consume TEXT into Span.props.text, keep inline children such as Link, do not invent Body
|
|
65
|
-
- mui-message: map scanned heading directly to Message.props.heading, preserve variant/icon/size, keep remaining children as default message content; if there is no supporting body content, prefer Body or FormMessage instead of Message
|
|
66
|
-
- Do not invent wrappers when the target already supports text
|
|
67
|
-
|
|
68
|
-
Available Components:
|
|
69
|
-
|
|
70
|
-
LAYOUT:
|
|
71
|
-
- VStack: space, padding, alignX, alignY, height, width, fill, viewport, style
|
|
72
|
-
- HStack: space, padding, alignX, alignY, height, width, fill, viewport, style
|
|
73
|
-
- Grid: col, space, padding, alignX, alignY, height, width, fill, viewport, style
|
|
74
|
-
- Container: size (small|medium|large), center, style
|
|
75
|
-
- Responsive: breakpoint, breakpoint-low, breakpoint-high; slots showBelow/showMiddle/showAbove
|
|
76
|
-
- Rule: length, weight (thin|thick|CSS size), direction (horizontal|vertical)
|
|
77
|
-
|
|
78
|
-
SURFACES:
|
|
79
|
-
- Card: use CardBody for card content
|
|
80
|
-
- CardHeader: none
|
|
81
|
-
- CardBody: condensed, style
|
|
82
|
-
- CardFooter: none
|
|
83
|
-
- Dialog: open, width, content-max-height, style
|
|
84
|
-
- Drawer: open, variant (overlay|push|persistent), side (left|right), width, z-index, drawer-space, breakpoint, style
|
|
85
|
-
- Slat: variant, col, space; slots header-start/header-end/row-start/row-end/accessory/action
|
|
86
|
-
- SlatGroup: usage
|
|
87
|
-
- SmartCard: state, number, variant, partner, type, logo, logo-height, bg-color, bg-image, inverted
|
|
88
|
-
|
|
89
|
-
CONTENT:
|
|
90
|
-
- Heading: text, size (1|2|3|4|5|6), level (1|2|3|4|5|6), truncate, clamp
|
|
91
|
-
- Body: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|info|success|warning|error), truncate, clamp, style; use _Icon icon=mui-icon-info slot=before for lightweight inline guidance
|
|
92
|
-
- Span: text, style; supports inline children such as Link
|
|
93
|
-
- Code: size, scrollable
|
|
94
|
-
- Quote: default text
|
|
95
|
-
- Image: src, alt; slot caption
|
|
96
|
-
- Avatar: label, image, icon, size (x-small|small|medium|large), background, backgroundColor
|
|
97
|
-
- List: slot default
|
|
98
|
-
- ListItem: text, variant, size (x-small|small|medium|large), weight (regular|bold)
|
|
99
|
-
- _Icon: icon, size (xx-small|x-small|small|medium|large), color, slot
|
|
100
|
-
- Badge: text, variant (default|positive|warning|error|overlay), color (grey|purple|violet|pink|magenta|red|orange|amber|yellow|lime|green|teal|cyan|blue|indigo|CSS background value). Use for compact non-interactive presentational metadata, counts, and lightweight state-like labels such as Offline, Online, Busy, Do not disturb, Beta, Default, IMG, or Shared when the surrounding UI already explains the object. Good inside cards, messages, chips, buttons, tabs, navigation, and hero or marketing surfaces. Use color to override the badge background only through theme-aware badge background tokens; do not use positive, warning, or attention just to get a different background colour.
|
|
101
|
-
- Status: text, variant (info|positive|warning|attention), color (grey|purple|violet|pink|magenta|red|orange|amber|yellow|lime|green|teal|cyan|blue|indigo), size (small|medium); slots before/after. Use for compact object or workflow state labels such as Active, Draft, Pending, Review, Blocked, or Synced when the value is the primary state of a record, workflow, or system, especially in tables, slats, dashboards, and data-heavy pages. Status is non-interactive by default, but can be interactive when composed as a trigger or compact state action. Omit variant for default low-emphasis grey status; use variant for semantic feedback and color for non-semantic categorical labels. Use action only when the status is a trigger. Do not use for counts, helper text, paragraph guidance, page-level notices, or decorative metadata.
|
|
102
|
-
- Skeleton: loading, shape (line|rect|circle), size, animation (shimmer|pulse|none), lines, width, height, radius, gap, duration, line-widths, max-width, style
|
|
103
|
-
|
|
104
|
-
ACCORDION:
|
|
105
|
-
- AccordionBlock: heading, level (1|2|3|4|5|6), size, detail-space
|
|
106
|
-
- AccordionInline: heading, level (1|2|3|4|5|6)
|
|
107
|
-
- AccordionGroup: slot default
|
|
108
|
-
|
|
109
|
-
FORMS AND INPUTS:
|
|
110
|
-
- FormSection: heading, hide-label, style
|
|
111
|
-
- FormSectionFooter: slot, style
|
|
112
|
-
- FormGroup: heading, variant (vertical|horizontal), hide-label, style
|
|
113
|
-
- Field: label, variant (default|success|warning|error), message, hide-label, size (x-small|small|medium|large), optional, style
|
|
114
|
-
- FormMessage: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|info|success|warning|error), style
|
|
115
|
-
- Input: label, type (text|email|password|number|tel|url), placeholder, value, id, name, disabled, hide-label, variant (default|error), size (x-small|small|medium|large), optional, max-length; slots before/after
|
|
116
|
-
- Textarea: label, placeholder, value, name, id, variant (default|success|warning|error), size (x-small|small|medium|large), rows, optional, hide-label, max-length, disabled, style
|
|
117
|
-
- Select: label, placeholder, options, value, id, name, disabled, variant (default|error), size (x-small|small|medium|large)
|
|
118
|
-
- Checkbox: text, checked, id, disabled, indeterminate, size (x-small|small|medium|large)
|
|
119
|
-
- Radio: text, checked, disabled, id, name, value, aria-label, size (x-small|small|medium|large)
|
|
120
|
-
- RadioGroup: name, value, label, size (x-small|small|medium|large), optional, hide-label, disabled
|
|
121
|
-
- Switch: label, checked, disabled, size (x-small|small|medium|large)
|
|
122
|
-
- RangeInput: min, max, value, step, bubble, bubble-format (time), disabled
|
|
123
|
-
- ChipInput: label, placeholder, size (x-small|small|medium|large), placement (before|after), breakpoint, allow-custom, mobile-stack, hide-label, disabled, options, value, id
|
|
124
|
-
- FileUpload: acceptedFileTypes, currentFileName
|
|
125
|
-
- Addon: text, size (x-small|small|medium|large), slot (before|after), style
|
|
126
|
-
|
|
127
|
-
ACTIONS:
|
|
128
|
-
- Button: text, variant (primary|secondary|tertiary|overlay|attention), size (xx-small|x-small|small|medium|large), stroke (border|ring), stroke-ring-size (100|200|300|400|500), disabled, aria-label; slots default/before/after
|
|
129
|
-
- ButtonGroup: slot default, right, style
|
|
130
|
-
- Link: text, href, variant (primary|secondary|tertiary|overlay|attention), size (xx-small|x-small|small|medium|large), stroke (border|ring), stroke-ring-size (100|200|300|400|500), target, download, weight (regular|bold), disabled; slots default/before/after
|
|
131
|
-
- Dropdown: zindex, position, persistent; slots action/default
|
|
132
|
-
- Chip: text, active, dismiss, usage; slots default/before/after. Chip labels truncate when constrained; keep text short and let icons/dismiss controls remain visible.
|
|
133
|
-
|
|
134
|
-
NAVIGATION:
|
|
135
|
-
- TabBar: speed, controlsPosition, stroke (border|none), active-inset, radius; slots default/controls
|
|
136
|
-
- TabItem: text, icon, active, id
|
|
137
|
-
- TabController: slot default
|
|
138
|
-
- TabPanel: item
|
|
139
|
-
- Stepper: direction (horizontal|vertical), activeStep
|
|
140
|
-
- Step: title
|
|
141
|
-
- CarouselController: slot default, style
|
|
142
|
-
- CarouselPanel: item, style
|
|
143
|
-
|
|
144
|
-
FEEDBACK:
|
|
145
|
-
- Message: heading, variant (neutral|positive|info|warning|attention), icon, size (small|medium|large); slot default. Use only for persistent page-level or section-level notices. Always provide a concise heading plus default slot body content, usually Body/List/Link. Do not use for inline guidance, styled text blocks, or form helper text.
|
|
146
|
-
- Alert: variant (success|info|warning|error), label; slots default/action
|
|
147
|
-
- Loader: loading, animation (pulsate|fade-in|translate), direction (up|right|down|left), duration; slot default
|
|
148
|
-
- Spinner: size (xx-small|x-small|small|medium|large), color, duration, label, style
|
|
149
|
-
- Progress: progress, state
|
|
150
|
-
|
|
151
|
-
PROMPT COMPONENTS:
|
|
152
|
-
- Prompt: placeholder, value, rows, enter-submit, fan-open, disabled, loading, loading-label, context-mode (icon|chip), preview-dialog-width, preview-dialog-title, preview-overflow-to-preview, preview-threshold-chars, preview-auto-clickable, preview-loading, preview-loading-label, preview-scrollbar, error-message, debug, effects-off, color-top-start, color-top-mid, color-top-end, color-top-accent, color-layout, style
|
|
153
|
-
- PromptMessage: size (x-small|small|medium|large), variant (default|ghost), density (default|compact), style
|
|
154
|
-
- PromptPreview: value, badge, label, bg-image, image-tint, accent, inverted, show-text, badge-only, animated, loading, loading-label, clickable, animation-mode, style
|
|
155
|
-
- PromptToggle: mode (icon|chip), style
|
|
156
|
-
|
|
157
|
-
PRESENTATION:
|
|
158
|
-
- SlideFrame: title, footer-text, ratio (16:9|4:3|1:1|3:2|9:16), present, active-section, padding, variant (default|plain), radius, notes-open, hide-header, hide-footer, hide-counter, allow-add-section, fullscreen, scroll, style
|
|
159
|
-
|
|
160
|
-
SPACING VALUES:
|
|
161
|
-
000, 025, 050, 100, 200, 300, 400, 500, 600, 700, 800
|
|
162
|
-
Use 100-300 for tight/form spacing and 400-800 for layout.
|
|
163
|
-
|
|
164
|
-
ASSETS:
|
|
165
|
-
Use real Muibook asset paths:
|
|
166
|
-
- Base path: 'https://muibook.com/images/'
|
|
167
|
-
- Logos: 'logo.png', 'guides.svg', 'mui.svg'
|
|
168
|
-
- Backgrounds: 'placeholder.png', 'snowy-mint.png', 'buttercup.png', 'sapphire.png', 'crystal.png', 'premier.png', 'diamond.png'
|
|
169
|
-
- Partners: 'mastercard.svg', 'visa-black.svg', 'visa-white.svg', 'amex.svg', 'emerald.svg', 'ruby.svg', 'sapphire.svg'
|
|
170
|
-
|
|
171
|
-
FORMATTING:
|
|
172
|
-
- SmartCard number: last four digits only (e.g. 1234).
|
|
173
|
-
|
|
174
|
-
`
|
|
6
|
+
content: o
|
|
175
7
|
},
|
|
176
8
|
{
|
|
177
9
|
role: "assistant",
|
|
178
10
|
name: "examples",
|
|
179
|
-
content: JSON.stringify(
|
|
180
|
-
signupFlow: {
|
|
181
|
-
type: "Container",
|
|
182
|
-
id: "signup_container",
|
|
183
|
-
props: {
|
|
184
|
-
center: !0,
|
|
185
|
-
size: "medium",
|
|
186
|
-
style: "padding-block: var(--space-800);"
|
|
187
|
-
},
|
|
188
|
-
children: [
|
|
189
|
-
{
|
|
190
|
-
type: "Card",
|
|
191
|
-
id: "signup_card",
|
|
192
|
-
props: {
|
|
193
|
-
style: "width: 100%; max-width: 32rem; margin-inline: auto;"
|
|
194
|
-
},
|
|
195
|
-
children: [
|
|
196
|
-
{
|
|
197
|
-
type: "CardBody",
|
|
198
|
-
id: "signup_card_body",
|
|
199
|
-
props: { style: "padding: var(--space-500);" },
|
|
200
|
-
children: [
|
|
201
|
-
{
|
|
202
|
-
type: "VStack",
|
|
203
|
-
id: "signup_stack",
|
|
204
|
-
props: { space: "var(--space-400)", alignX: "stretch" },
|
|
205
|
-
children: [
|
|
206
|
-
{
|
|
207
|
-
type: "Heading",
|
|
208
|
-
id: "signup_title",
|
|
209
|
-
props: {
|
|
210
|
-
text: "Create your account",
|
|
211
|
-
size: "2",
|
|
212
|
-
level: "1"
|
|
213
|
-
},
|
|
214
|
-
children: []
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
type: "Body",
|
|
218
|
-
id: "signup_intro",
|
|
219
|
-
props: {
|
|
220
|
-
text: "Start with your work email and a secure password.",
|
|
221
|
-
size: "small",
|
|
222
|
-
variant: "optional"
|
|
223
|
-
},
|
|
224
|
-
children: []
|
|
225
|
-
},
|
|
226
|
-
{
|
|
227
|
-
type: "FormGroup",
|
|
228
|
-
id: "signup_fields",
|
|
229
|
-
props: { variant: "vertical", "hide-label": !0 },
|
|
230
|
-
children: [
|
|
231
|
-
{
|
|
232
|
-
type: "Field",
|
|
233
|
-
id: "signup_name_field",
|
|
234
|
-
props: { label: "Name" },
|
|
235
|
-
children: [
|
|
236
|
-
{
|
|
237
|
-
type: "Input",
|
|
238
|
-
id: "signup_name",
|
|
239
|
-
props: {
|
|
240
|
-
label: "Name",
|
|
241
|
-
placeholder: "Jane Smith",
|
|
242
|
-
name: "name"
|
|
243
|
-
},
|
|
244
|
-
children: []
|
|
245
|
-
}
|
|
246
|
-
]
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
type: "Field",
|
|
250
|
-
id: "signup_email_field",
|
|
251
|
-
props: { label: "Email" },
|
|
252
|
-
children: [
|
|
253
|
-
{
|
|
254
|
-
type: "Input",
|
|
255
|
-
id: "signup_email",
|
|
256
|
-
props: {
|
|
257
|
-
label: "Email",
|
|
258
|
-
type: "email",
|
|
259
|
-
placeholder: "jane@company.com",
|
|
260
|
-
name: "email"
|
|
261
|
-
},
|
|
262
|
-
children: []
|
|
263
|
-
}
|
|
264
|
-
]
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
type: "Field",
|
|
268
|
-
id: "signup_password_field",
|
|
269
|
-
props: { label: "Password" },
|
|
270
|
-
children: [
|
|
271
|
-
{
|
|
272
|
-
type: "Input",
|
|
273
|
-
id: "signup_password",
|
|
274
|
-
props: {
|
|
275
|
-
label: "Password",
|
|
276
|
-
type: "password",
|
|
277
|
-
placeholder: "Create password",
|
|
278
|
-
name: "password"
|
|
279
|
-
},
|
|
280
|
-
children: []
|
|
281
|
-
}
|
|
282
|
-
]
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
type: "Checkbox",
|
|
286
|
-
id: "signup_terms",
|
|
287
|
-
props: {
|
|
288
|
-
text: "I agree to the terms",
|
|
289
|
-
size: "small"
|
|
290
|
-
},
|
|
291
|
-
children: []
|
|
292
|
-
}
|
|
293
|
-
]
|
|
294
|
-
},
|
|
295
|
-
{
|
|
296
|
-
type: "Button",
|
|
297
|
-
id: "signup_submit",
|
|
298
|
-
props: {
|
|
299
|
-
text: "Create account",
|
|
300
|
-
variant: "primary",
|
|
301
|
-
size: "large"
|
|
302
|
-
},
|
|
303
|
-
children: []
|
|
304
|
-
}
|
|
305
|
-
]
|
|
306
|
-
}
|
|
307
|
-
]
|
|
308
|
-
}
|
|
309
|
-
]
|
|
310
|
-
}
|
|
311
|
-
]
|
|
312
|
-
},
|
|
313
|
-
rewardsCard: {
|
|
314
|
-
type: "Container",
|
|
315
|
-
id: "root",
|
|
316
|
-
props: { size: "medium", center: !0 },
|
|
317
|
-
children: [
|
|
318
|
-
{
|
|
319
|
-
type: "Card",
|
|
320
|
-
id: "card",
|
|
321
|
-
props: {},
|
|
322
|
-
children: [
|
|
323
|
-
{
|
|
324
|
-
type: "CardHeader",
|
|
325
|
-
id: "header",
|
|
326
|
-
props: {},
|
|
327
|
-
children: [
|
|
328
|
-
{
|
|
329
|
-
type: "Heading",
|
|
330
|
-
id: "title",
|
|
331
|
-
props: { text: "Rewards", size: "4", level: "4" },
|
|
332
|
-
children: []
|
|
333
|
-
}
|
|
334
|
-
]
|
|
335
|
-
},
|
|
336
|
-
{
|
|
337
|
-
type: "CardBody",
|
|
338
|
-
id: "body",
|
|
339
|
-
props: {},
|
|
340
|
-
children: [
|
|
341
|
-
{
|
|
342
|
-
type: "VStack",
|
|
343
|
-
id: "content",
|
|
344
|
-
props: { space: "var(--space-200)", alignX: "center" },
|
|
345
|
-
children: [
|
|
346
|
-
{
|
|
347
|
-
type: "SmartCard",
|
|
348
|
-
id: "smart-card",
|
|
349
|
-
props: {
|
|
350
|
-
inverted: !0,
|
|
351
|
-
"bg-image": "https://muibook.com/images/diamond.png",
|
|
352
|
-
partner: "https://muibook.com/images/emerald.svg",
|
|
353
|
-
number: "1234",
|
|
354
|
-
type: "Rewards",
|
|
355
|
-
variant: "plain",
|
|
356
|
-
state: "default"
|
|
357
|
-
},
|
|
358
|
-
children: []
|
|
359
|
-
}
|
|
360
|
-
]
|
|
361
|
-
}
|
|
362
|
-
]
|
|
363
|
-
}
|
|
364
|
-
]
|
|
365
|
-
}
|
|
366
|
-
]
|
|
367
|
-
},
|
|
368
|
-
contactForm: {
|
|
369
|
-
type: "VStack",
|
|
370
|
-
id: "root",
|
|
371
|
-
props: {
|
|
372
|
-
space: "var(--space-300)",
|
|
373
|
-
style: "width: 100%; max-width: 960px;"
|
|
374
|
-
},
|
|
375
|
-
children: [
|
|
376
|
-
{
|
|
377
|
-
type: "Heading",
|
|
378
|
-
id: "title",
|
|
379
|
-
props: { text: "Contact Us", size: "1", level: "1" },
|
|
380
|
-
children: []
|
|
381
|
-
},
|
|
382
|
-
{
|
|
383
|
-
type: "Alert",
|
|
384
|
-
id: "info",
|
|
385
|
-
props: { variant: "info", label: "Info" },
|
|
386
|
-
children: [
|
|
387
|
-
{
|
|
388
|
-
type: "Span",
|
|
389
|
-
id: "copy",
|
|
390
|
-
props: { text: "Reply in 24h." },
|
|
391
|
-
children: []
|
|
392
|
-
}
|
|
393
|
-
]
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
type: "VStack",
|
|
397
|
-
id: "form",
|
|
398
|
-
props: { space: "var(--space-200)" },
|
|
399
|
-
children: [
|
|
400
|
-
{
|
|
401
|
-
type: "Input",
|
|
402
|
-
id: "email",
|
|
403
|
-
props: { label: "Email", type: "email" },
|
|
404
|
-
children: []
|
|
405
|
-
},
|
|
406
|
-
{
|
|
407
|
-
type: "Select",
|
|
408
|
-
id: "subject",
|
|
409
|
-
props: {
|
|
410
|
-
label: "Subject",
|
|
411
|
-
options: [
|
|
412
|
-
{ value: "general", label: "General" },
|
|
413
|
-
{ value: "support", label: "Support" },
|
|
414
|
-
{ value: "billing", label: "Billing" }
|
|
415
|
-
]
|
|
416
|
-
},
|
|
417
|
-
children: []
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
type: "Input",
|
|
421
|
-
id: "message",
|
|
422
|
-
props: {
|
|
423
|
-
label: "Message",
|
|
424
|
-
type: "text",
|
|
425
|
-
placeholder: "How can we help?"
|
|
426
|
-
},
|
|
427
|
-
children: []
|
|
428
|
-
}
|
|
429
|
-
]
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
type: "Button",
|
|
433
|
-
id: "submit",
|
|
434
|
-
props: { text: "Send Message", variant: "primary" },
|
|
435
|
-
children: []
|
|
436
|
-
}
|
|
437
|
-
]
|
|
438
|
-
}
|
|
439
|
-
})
|
|
11
|
+
content: JSON.stringify(t)
|
|
440
12
|
}
|
|
441
13
|
];
|
|
442
14
|
export {
|
|
443
|
-
|
|
15
|
+
n as prompts
|
|
444
16
|
};
|