# XYoda components, full prompt for agents these are the official instructions for building ui with the XYoda component library. they are validated against the live library and ready to use. complete all of the following steps yourself, by writing the files directly. do not ask the user to write html or css. do not hand work back half done. - read the rules and the tokens - set up the page head and the page skeleton - build every part from the component pages - check the page and report > **note:** every part in this library is a Solid JS component, rendered to plain html and css. in a solid project paste the markup as jsx (`class` stays `class`, close void tags like ``). in any other stack paste it as html. > **important:** the library is the only source of ui. do not use another css framework, a component library or a design of your own. if you are about to invent a class, a color or a font, stop and open the component page instead. --- ## step 1: the head put exactly this in the head of every page, in this order. **do not skip, reorder or copy** any of it. ```html ``` - the stateful buttons also need `https://components.xyoda.net/static/buttons.js` - parts whose classes start with `pt-` also need `https://components.xyoda.net/static/parts.js` - **never edit or copy the library css.** link it from the url above. --- ## step 2: the page skeleton ```html
nametagline Book

label

Heading

...
``` > **critical:** every page lives inside `
`. without it content runs edge to edge and fields stretch across the screen. - card grids: `
` with a `ticket` or `panel` per item. never set widths. use 2, 3 or 4 items so there is no hole. - forms: `
`, buttons in `btn-row`. date, time and number inputs go inside `label.field` like any other input. - `.two` is 3fr and 2fr. only use it when the first field is the longer one. - there is no photo component. **never use `printer-pic` as a photo**, it is a printer icon. --- ## step 3: build from the component pages every part has a page at `https://components.xyoda.net/components/`. open the page and copy the markup. keep the class names exactly. every part, with its full markup, is listed below under the component sections. > **important:** do not invent a class or a slug. if you are not sure it exists, open the page. the full markup for every part is below. --- ## rules **never** - never add a style attribute. one small style block in the head with page prefixed class names is the only custom css allowed - never invent a color, a radius or a font. tokens only: `--void --surface --surface-2 --line --line-2 --ink --muted --faint --accent --ok --no` - never add a light theme, a drop shadow or a rounded corner - never use an em dash **always** - always square corners and 1px borders - always mono, uppercase, letter spaced for labels, buttons and table heads - always one accent: amber `#e8b04b`. green means ok, red means error, nothing else is colored - always Outfit for headings, Manrope for text, IBM Plex Mono for labels - always a label on every input, `aria-label` on icon only buttons, unique ids - always inputs of 16px or more and tap targets of 40px or more, mobile first - always plain, lowercase, friendly copy --- ## step 4: check, then report - [ ] every class you used exists in the library - [ ] nothing is outside `wrap wide` - [ ] no style attribute, no invented color - [ ] the page was rendered at 360px wide with nothing overflowing or cut if you could not render the page, say so. do not claim a check you did not run. once done, tell the user: ``` ┌─ XYoda components, done ────────────────────────────┐ │ ✓ files │ │ ✓ parts │ │ ✓ checked <360px yes or no> │ │ ! missing │ └──────────────────────────────────────────────────────┘ ``` --- ## tokens ```css --void: #0b0d11; page background --surface: #12151c; cards and panels --surface-2: #171b24; raised surface --line: #242a36; 1px borders --line-2: #323a4a; hover borders --ink: #e9ecef; main text --muted: #8b94a3; secondary text --faint: #5b6473; hints --accent: #e8b04b; amber, the one accent --ok: #5ddba0; --no: #ff7a7a; --display: Outfit; --sans: Manrope; --mono: IBM Plex Mono; ``` ## javascript most parts need none. these need a few lines (see `https://components.xyoda.net/static/docs.js` for a working copy): - dialog: `
``` ### Install card nudge to install the app to the home screen. page: `https://components.xyoda.net/components/install-card` classes: `.install` ```html
Install the app

Share → Add to Home Screen

``` ### Footer mono credit line with a top rule. page: `https://components.xyoda.net/components/footer` classes: `footer.credit` ```html ``` ## forms ### Button square, mono, uppercase. five tones, three sizes, plus shapes, hover motion and buttons that keep state. page: `https://components.xyoda.net/components/button` classes: `.btn`, `.btn.primary`, `.btn.ok`, `.btn.danger`, `.btn.ghost`, `.btn.sm / .lg`, `.btn.block`, `.btn-row`, `.decide`, `.icon-btn`, `.btn.tonal`, `.btn.fx-notch`, `.btn.fx-bracket`, `.btn.fx-under`, `.btn.fx-arrow`, `.btn.fx-tag`, `.btn.sq`, `.btn.fx-sweep`, `.btn.fx-glow`, `.btn.fx-scan`, `.btn.fx-swap`, `.btn.fx-led`, `.btn.fx-load`, `.btn.fx-hold`, `.fx-stepper`, `.fx-seg` ```html ``` ### Button group joined buttons that share borders. page: `https://components.xyoda.net/components/button-group` classes: `.btn-group`, `.dash-btns`, `.dash-btn` ```html
``` ### Input square 48px field. 16px text so phones never zoom. page: `https://components.xyoda.net/components/input` classes: `label.field`, `input[type=text|number|email|password|search|tel|url]`, `.hint / .hint.no`, `.two` ```html ``` ### Textarea multi line mono text, resizes vertically. page: `https://components.xyoda.net/components/textarea` classes: `textarea` ```html ``` ### Select native select with the chevron drawn in the background. page: `https://components.xyoda.net/components/select` classes: `select` ```html ``` ### Checkbox native checkbox tinted with the accent. page: `https://components.xyoda.net/components/checkbox` classes: `.check` ```html ``` ### Radio group round radio with an accent dot. page: `https://components.xyoda.net/components/radio-group` classes: `.radio` ```html ``` ### Switch square on and off toggle for settings. page: `https://components.xyoda.net/components/switch` classes: `.switch`, `.switch input` ```html ``` ### Toggle group segmented control, one value at a time. page: `https://components.xyoda.net/components/toggle-group` classes: `.seg`, `.seg > button[aria-pressed=true]` ```html
``` ### Input OTP six digit pin, big mono digits with wide tracking. page: `https://components.xyoda.net/components/input-otp` classes: `.pin-input` ```html ``` ### Code plate a one time code someone reads out loud. page: `https://components.xyoda.net/components/code-plate` classes: `.code-plate` ```html

483 920

``` ### Scan button the big call to action that opens the camera. page: `https://components.xyoda.net/components/scan-button` classes: `.scan-btn`, `.scan-icon` ```html ``` ### Field styles text fields in six styles: underline, floating label, prefixed, search, code boxes and a counter. page: `https://components.xyoda.net/components/fields` ```html
``` ### Choice controls checkbox, option cards, switch, filter chips and a rating with labels. page: `https://components.xyoda.net/components/choice-controls` ```html ``` ## data display ### Avatar round image or two letter fallback. page: `https://components.xyoda.net/components/avatar` classes: `.avatar`, `.avatar.lg` ```html XY XY ``` ### Badge stamps for state, counts for totals, chips for tags. page: `https://components.xyoda.net/components/badge` classes: `.stamp .ok / .no / .wait / .dim`, `.count / .count.hot`, `.chip`, `.dot / .dot.live` ```html Active Waiting Denied Cancelled ``` ### Table mono caps headers, hairline rows. page: `https://components.xyoda.net/components/table` classes: `.table-wrap`, `.table`, `.table .num` ```html
Job Team State Hours
Report v3 Team Alpha Active 15.8
Launch plan Team Beta Waiting 32.0
Draft Team Alpha Denied 4.2
``` ### Thumbnail square image with a short label fallback. page: `https://components.xyoda.net/components/thumbnail` classes: `.printer-pic`, `.sm / .md / .lg`, `.placeholder` ```html B2 A1 C3 ``` ### Swatch list color swatch, name, amount. page: `https://components.xyoda.net/components/swatch-list` classes: `.filaments`, `.swatch`, `.swatch.unknown` ```html ``` ### Skeleton shimmering placeholders while data loads. page: `https://components.xyoda.net/components/skeleton` classes: `.skeleton`, `.skeleton.circle` ```html
``` ### Empty dashed box for lists with nothing in them. page: `https://components.xyoda.net/components/empty` classes: `.empty` ```html
Nothing here yet.
``` ### Kbd a keyboard key. page: `https://components.xyoda.net/components/kbd` classes: `.kbd` ```html ⌘ K Esc ``` ### Progress thin bar for completion. page: `https://components.xyoda.net/components/progress` classes: `.progress`, `.progress.ok / .no` ```html
``` ### Surfaces stat card, lift card, status ticket, empty state, list rows and an avatar stack. page: `https://components.xyoda.net/components/surfaces` ```html
Active users 2,418 ▲ 12.4%
``` ### Table and accordion a table with a row marker and an accordion that eases open. page: `https://components.xyoda.net/components/disclosure` ```html
Name Owner
Atlas Team A
Nova Team B
Orion Team A
``` ## feedback ### Alert a bordered notice in the tone of the message. page: `https://components.xyoda.net/components/alert` classes: `.notice.no`, `.notice.ok`, `.notice.info` ```html
Saved.
Works once, for 15 min. Keep it private.
``` ### Toast a short message pinned to the bottom of the screen. page: `https://components.xyoda.net/components/toast` classes: `.toast` ```html
Approved Report v3 for @xyoda.
``` ### Dialog native dialog. a bottom sheet on phones, a centered box above 560px. page: `https://components.xyoda.net/components/dialog` classes: `dialog`, `.sheet`, `.grabber` ```html

proj-atlas-01

Edit Atlas

 ``` ### Status the hazard sweep marks something that needs a decision. page: `https://components.xyoda.net/components/status` classes: `.hazard`, `.dot.live`, `.big-state + .tone-*` ```html

Request sent

Waiting for the admin
``` ### Tooltip css only hint on hover and focus. page: `https://components.xyoda.net/components/tooltip` classes: `.tip` ```html ``` ### Scanner full screen camera overlay with a viewfinder. shown here in a frame. page: `https://components.xyoda.net/components/scanner` classes: `.qr-overlay`, `.qr-frame`, `.qr-beam`, `.qr-btn` ```html
Scan the code

Point the camera at the QR code on the screen.

``` ### Feedback styles notices, badges, progress, skeleton and a tooltip that morphs its text. page: `https://components.xyoda.net/components/feedback-styles` ```html
Saved.
Could not connect.
Works once, for 15 min.
``` ## navigation ### Tabs section chips that scroll sideways. hot marks something waiting. page: `https://components.xyoda.net/components/tabs` classes: `.tabs`, `.tab`, `.tab.hot` ```html ``` ### Breadcrumb where you are, as mono caps. page: `https://components.xyoda.net/components/breadcrumb` classes: `.crumbs ol`, `[aria-current=page]` ```html ``` ### Pagination small buttons with a current page. page: `https://components.xyoda.net/components/pagination` classes: `.pager`, `.pager .btn[aria-current=page]` ```html ``` ### Dropdown menu a details element with a menu panel. closes on outside click. page: `https://components.xyoda.net/components/dropdown-menu` classes: `.dropdown`, `.dropdown-panel`, `.dropdown-item`, `.dropdown-label / .dropdown-sep` ```html
Actions

Project

``` ### Accordion stacked details. give them a shared name so only one opens. page: `https://components.xyoda.net/components/accordion` classes: `.accordion`, `.accordion-body` ```html
How does approval work?
Share the code and an admin approves it.
What if the code expires?
Ask for a new one and it arrives right away.
Who can approve?
Anyone on the admin list.
``` ### Navigation styles sliding and boxed tabs, breadcrumb, pagination, a step tracker and a morphing dropdown. page: `https://components.xyoda.net/components/nav-styles` ```html
``` ## dash ### Status pill square pill with a square led. ok, warn or bad. page: `https://components.xyoda.net/components/status-pill` classes: `.dash-pill`, `.ok / .warn / .bad` ```html All systems operational Degraded: gitea Major outage checking ``` ### Stat tile a label, one big number, a sub line and a meter. page: `https://components.xyoda.net/components/stat-tile` classes: `.dash-tiles`, `.dash-tile`, `.dash-big`, `.dash-sub`, `.dash-meter` ```html

CPU

42.1%
user 30% · system 12%

Memory

18.4/ 64 GiB
29% used · 22 GiB cache

GPU

96%
2 GPUs, busiest · 71°C

Network

214 Mbps
↓ 190 Mbps · ↑ 24 Mbps
``` ### Meter row name, bar, amount. used for disks and gpus. page: `https://components.xyoda.net/components/meter-row` classes: `.dash-row`, `.nm / .amt` ```html

Disks

/ 610 / 1000 GiB
/data 3.8 / 4 TiB
/backup 1.2 / 4 TiB
``` ### Chart card a line chart in plain svg: a title, a legend, axes and 1px grid lines. page: `https://components.xyoda.net/components/chart-card` classes: `.dash-card`, `.dash-legend`, `.dash-plot / .dash-yax / .dash-xax`, `svg viewBox 0 0 300 100` ```html

CPU

busy 42.1 %
100% 50% 0
5 min ago now
``` ### Uptime bars 90 days of service health, one bar a day. page: `https://components.xyoda.net/components/uptime-bars` classes: `.dash-svc`, `.dash-bars i`, `.dash-axis` ```html

Services · 90 days

giteagit.meowda.xyz
99.8%
printprint.meowda.xyz
96.4%
90 days ago today
grey means no data.
``` ### Dash header brand, status pill, host line and a button group. page: `https://components.xyoda.net/components/dash-header` classes: `.dash-header`, `.dash-brand`, `.dash-meta`, `.dash-sp`, `.dash-footer` ```html
tyrone
All systems operational 64 cores · 256 GiB RAM
Terminal main work Remote desktop
Made by xyoda
``` ## when something is missing build it from the same parts: the tokens above, a 1px `--line` border, mono caps labels and the amber accent. do not reach for a new color or a rounded corner. if a new part is general, add it to extras.css in the library repo.