Blocks

A block is a finished section — a news list, a schedule table, a login form — built from Blessing components and shipped as source you copy into your project, not a package you import. Copy the folder, rename what you like, and point its data at your backend — the offline api.ts where a block has one, otherwise the arrays at the top of index.vue.

Every block follows one contract:

• index.vue — the block; imports only from blessing-ui and its own folder
• parts/ — sub-components when the block outgrows one file
• use<Name>.ts — state and behaviour, plain Vue composable
• domain.ts / api.ts — types, pure helpers, and a port with an offline mock

Nothing crosses block folders. Delete one and the others still build.

Two sets

Official site blocks are the sections of an anime-official-site front page — the shapes Blessing was drawn for. App blocks are the everyday product screens: sign-in, dashboards, settings, data pages.

Official site

• News — Dated news rows with NEW! badges and category tabs under an oversized watermark — the front page of an official site.
• On Air — Broadcast schedule as a station table, with streaming services below — stacks into label/value rows on a phone.
• Character — A grid of character cards; each opens a hash-routed modal with the profile and cast. Deep links survive reload.
• Staff & Cast — Credits as two definition lists side by side — roles in ink labels, names beside them; stacked on a phone.
• Release — Blu-ray / CD release cards with cover, price, date and a purchase button, soonest first; the grid reflows on phones.
• Story — Episode list: number, title, air date and a synopsis that expands, under a short premise.
• Full site — All six official-site sections inside BlessStage — sidebar nav with scroll-spy, key-visual background, drawer on phones. Opens full-page.

App

• Sign in — Email + password with native validation, remember-me, a forgot link and a divider to OAuth — the form every app starts with.
• Dashboard — Sidebar + toolbar shell with a stats row, a trend chart and recent orders; on a phone the sidebar becomes a strip that scrolls sideways.
• Settings — Profile, notifications and a danger zone as stacked panels in one form — Enter saves, Discard restores — with a sticky save bar.
• Data page — Breadcrumb, title row with primary action, a status filter and a sortable, searchable, selectable data table whose bulk Remove can be undone.
• Page states — The three non-happy paths every list needs — loading skeleton, empty with a call to action, and error with retry — behind one `state` switch.
• Pricing — Three tiers with a monthly/yearly switch, a highlighted recommended plan and a feature checklist.
• Inbox — Two-pane mail: a list with unread indicators and a reading pane whose Archive and Delete can be undone. Collapses to one pane on a phone with a back button.
• Chat — A conversation thread that sticks to the bottom, with a composer that sends on Enter (never mid-IME conversion) and a typing indicator.
• Onboarding — Three-step first-run wizard — workspace name, invite teammates, pick a palette — with a progress header and a finish screen.