Components
The web part imports Hodi's components from hodi:sdk. They are the app's own, with their sizes, their colours and their three themes: the plugin looks like it belongs to Hodi.
ButtonsWith a label or an icon, the AI's and the reader's.Settings and pagesA settings page, its cards, its rows, the end of a long list and the Overview cards.Step pagesThe pages of setup and of I have a code: a step, tiles, the buttons.FieldsText, password, codes, switches and choices.Dialogs and messagesWindows, messages in the page and empty lists.Small elementsChips, filters, a source's avatar and a household's.
web/index.tsx
import { Button, SettingRow, SettingsCard } from 'hodi:sdk'Each page shows the component's real render, the code that draws it, then all its props. Icons come from lucide-react, which the plugin adds to its own dependencies.
The rules
- No inline styles: Hodi's page refuses inline styles. The plugin's CSS goes in a file, with classes prefixed by its id.
- Hodi's colours: the tokens, never a hard-coded colour.
- A Hodi component first: the plugin only draws its own component for what no Hodi component does.