@ewanc26/ui

@ewanc26/ui is the Svelte component library extracted from ewancroft.uk. It provides layout components, a rich set of card types, UI primitives, SEO tags, Svelte stores, badge helpers, and a central multi-theme configuration — all built for SvelteKit 2 + Svelte 5 + Tailwind CSS 4. Part of the @ewanc26/pkgs monorepo. Installation Requires svelte >= 5, @sveltejs/kit >= 2, and tailwindcss >= 4 as peer dependencies. @ewanc26/atproto is an optional peer dependency needed for the AT Protocol card components. Components Layout Toggles Layout: Main Cards The AT Protocol card components accept typed props from @ewanc26/atproto: FeedCard FeedCard is a generic, protocol-agnostic feed list card. Pass any array of FeedItem objects and it renders a titled list with avatar/icon slots, optional descriptions, relative timestamps, optional badges, and clickable rows — all using the same hover-state pattern as the rest of the card family. The FeedItem interface: | Field | Type | Required | Description | |-------|------|----------|-------------| | id | string | No | Unique key for Svelte's keyed {#each}. Falls back to title + index. | | title | string | Yes | Primary row label. | | description | string | No | Secondary copy, clamped to two lines. | | href | string | No | When present, the row renders as an . | | avatarUrl | string | No | Image URL shown in the leading avatar slot. | | iconFallback | string | No | Emoji or initials shown when avatarUrl is absent. | | timestamp | string | No | ISO-8601 string rendered as a relative time label. | | badge | string | No | Short label shown as a trailing badge. | Props on FeedCard: | Prop | Type | Default | Description | |------|------|---------|-------------| | items | FeedItem[] \| null | null | null triggers the loading skeleton. | | title | string | 'Feed' | Section heading inside the card. | | emptyMessage | string | 'Nothing here yet.' | Copy shown when items is an empty array. | UI Primitives - Card — base card wrapper - InternalCard — card variant for internal links and interactive rows - DocumentCard — Standard.site document preview - BlogPostCard — blog post listing item with badges - Dropdown — accessible dropdown menu - Pagination — numbered page navigation - SearchBar — text search input - Tabs — tab bar with active state - PostsGroupedView — posts grouped by year/month with tag filtering SEO Stores | Store | Type | Description | |-------|------|-------------| | wolfMode | Writable | Activates wolf mode text transformation | | colorTheme | Writable | Active colour theme value | | colorThemeDropdownOpen | Writable | Controls theme picker dropdown visibility | | happyMacStore | Writable | Happy Mac easter egg state | Theme Configuration 12 named themes across four categories, using OKLCH colour values: Categories: neutral (Sage, Monochrome, Slate), warm (Ruby, Coral, Sunset, Amber), cool (Forest, Teal, Ocean), vibrant (Lavender, Rose). Helpers Post Badges Post Utilities Types Tech Stack Svelte 5, SvelteKit 2, Tailwind CSS 4, TypeScript 5.9+, @lucide/svelte. Built with svelte-package. Licence AGPL-3.0-only — see the pkgs monorepo.