picocrank 1.21.5 → 1.22.0

package/vue/views/PageStructure.vue

@@ -10,103 +10,132 @@
 	</Section>
 
 	<Section title="Header" subtitle="Branding, search, and top navigation">
-		<dl>
-			<dt>Logo and title</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="brandingEnabled"
-						@change="toggleBrandingEnabled"
-					/>
-					<span>Show logo and title in the header</span>
-				</label>
-			</dd>
-
-			<dt>QuickSearch</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="quickSearchEnabled"
-						@change="toggleQuickSearchEnabled"
-					/>
-					<span>Show QuickSearch in the header toolbar</span>
-				</label>
-				<p class="subtle">
-					On narrow screens it collapses to a search button that opens search in an overlay.
-				</p>
-			</dd>
-
-			<dt>Top bar</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="topBarEnabled"
-						@change="toggleTopBarEnabled"
+		<FormLayout @submit.prevent>
+			<FormField label="Logo and title" fake>
+				<RadioGroup
+					name="ps-branding"
+					variant="boolean"
+					aria-label="Logo and title"
+					:model-value="brandingEnabled"
+					:options="showHideOptions"
+					@update:model-value="setBrandingEnabled"
+				/>
+			</FormField>
+
+			<FormField label="QuickSearch" fake>
+				<RadioGroup
+					name="ps-quicksearch"
+					variant="boolean"
+					aria-label="QuickSearch"
+					:model-value="quickSearchEnabled"
+					:options="showHideOptions"
+					@update:model-value="setQuickSearchEnabled"
+				/>
+			</FormField>
+
+			<FormField label="Dummy background search" fake :disabled="!quickSearchEnabled">
+				<div>
+					<RadioGroup
+						name="ps-dummy-search"
+						variant="boolean"
+						aria-label="Dummy background search"
+						:model-value="dummySearchFetchEnabled"
+						:options="onOffOptions"
+						:disabled="!quickSearchEnabled"
+						@update:model-value="setDummySearchFetchEnabled"
 					/>
-					<span>Show horizontal navigation links below the header</span>
-				</label>
-				<p class="subtle">
-					On narrow screens: if both are on, the sidebar takes precedence and the top bar is hidden.
-					If only the top bar is on, Header collapses it into a mobile sidebar automatically.
-				</p>
-			</dd>
-
-			<dt>Breadcrumbs</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="breadcrumbsEnabled"
-						@change="toggleBreadcrumbsEnabled"
+					<p class="subtle">
+						Turns on QuickSearch’s background-fetch loading UI. Local matches still
+						appear immediately while the dummy request runs.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Dark/Light mode button" fake>
+				<RadioGroup
+					name="ps-theme-toggle"
+					variant="boolean"
+					aria-label="Dark/Light mode button"
+					:model-value="themeToggleEnabled"
+					:options="showHideOptions"
+					@update:model-value="setThemeToggleEnabled"
+				/>
+			</FormField>
+
+			<FormField label="Top bar" fake>
+				<div>
+					<RadioGroup
+						name="ps-topbar"
+						variant="boolean"
+						aria-label="Top bar"
+						:model-value="topBarEnabled"
+						:options="showHideOptions"
+						@update:model-value="setTopBarEnabled"
 					/>
-					<span>Show route breadcrumbs in the header</span>
-				</label>
-			</dd>
-		</dl>
+					<p class="subtle">
+						On narrow screens: if both are on, the sidebar takes precedence and the top bar is hidden.
+						If only the top bar is on, Header collapses it into a mobile sidebar automatically.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Breadcrumbs" fake>
+				<RadioGroup
+					name="ps-breadcrumbs"
+					variant="boolean"
+					aria-label="Breadcrumbs"
+					:model-value="breadcrumbsEnabled"
+					:options="showHideOptions"
+					@update:model-value="setBreadcrumbsEnabled"
+				/>
+			</FormField>
+		</FormLayout>
 	</Section>
 
 	<Section title="Sidebar" subtitle="Primary navigation panel">
-		<dl>
-			<dt>Sidebar navigation</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="sidebarEnabled"
-						@change="toggleSidebarEnabled"
+		<FormLayout @submit.prevent>
+			<FormField label="Sidebar navigation" fake>
+				<div>
+					<RadioGroup
+						name="ps-sidebar"
+						variant="boolean"
+						aria-label="Sidebar navigation"
+						:model-value="sidebarEnabled"
+						:options="showHideOptions"
+						@update:model-value="setSidebarEnabled"
 					/>
-					<span>Show the sidebar navigation panel</span>
-				</label>
-				<p class="subtle">
-					When enabled, use the menu button in the header to open and pin the sidebar.
-				</p>
-			</dd>
-
-			<dt>Example link states</dt>
-			<dd>
-				<label class="page-structure-control">
-					<input
-						type="checkbox"
-						:checked="exampleLinksEnabled"
-						@change="toggleExampleLinks"
+					<p class="subtle">
+						When enabled, use the menu button in the header to open and pin the sidebar.
+					</p>
+				</div>
+			</FormField>
+
+			<FormField label="Example link states" fake>
+				<div>
+					<RadioGroup
+						name="ps-example-links"
+						variant="boolean"
+						aria-label="Example link states"
+						:model-value="exampleLinksEnabled"
+						:options="onOffOptions"
+						@update:model-value="setExampleLinks"
 					/>
-					<span>Add example links that demonstrate indicator, count, and disabled states</span>
-				</label>
-				<p class="subtle">
-					Adds a “Link states” section to the sidebar with an attention indicator,
-					a notification count badge, and a disabled item.
-				</p>
-			</dd>
-		</dl>
+					<p class="subtle">
+						Adds a “Link states” section to the sidebar with an attention indicator,
+						a notification count badge, and a disabled item.
+					</p>
+				</div>
+			</FormField>
+		</FormLayout>
 	</Section>
 </template>
 
 <script setup>
 import { inject, ref, onBeforeUnmount } from 'vue'
 import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
+import FormField from '../components/FormField.vue'
+import RadioGroup from '../components/RadioGroup.vue'
 import {
 	Notification01Icon,
 	Alert02Icon,
@@ -121,12 +150,26 @@ const EXAMPLE_LINK_NAMES = [
 	'example-disabled',
 ]
 
+const showHideOptions = [
+	{ label: 'Shown', value: true },
+	{ label: 'Hidden', value: false },
+]
+
+const onOffOptions = [
+	{ label: 'On', value: true },
+	{ label: 'Off', value: false },
+]
+
 const sidebarEnabled = inject('sidebarEnabled')
 const toggleSidebarEnabled = inject('toggleSidebarEnabled')
 const brandingEnabled = inject('brandingEnabled')
 const toggleBrandingEnabled = inject('toggleBrandingEnabled')
 const quickSearchEnabled = inject('quickSearchEnabled')
 const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled')
+const dummySearchFetchEnabled = inject('dummySearchFetchEnabled')
+const toggleDummySearchFetchEnabled = inject('toggleDummySearchFetchEnabled')
+const themeToggleEnabled = inject('themeToggleEnabled')
+const toggleThemeToggleEnabled = inject('toggleThemeToggleEnabled')
 const topBarEnabled = inject('topBarEnabled')
 const toggleTopBarEnabled = inject('toggleTopBarEnabled')
 const breadcrumbsEnabled = inject('breadcrumbsEnabled')
@@ -135,6 +178,40 @@ const navigation = inject('navigation', null)
 
 const exampleLinksEnabled = ref(false)
 
+function setFlag(flag, toggle, want) {
+	if (flag.value !== want) {
+		toggle()
+	}
+}
+
+function setBrandingEnabled(want) {
+	setFlag(brandingEnabled, toggleBrandingEnabled, want)
+}
+
+function setQuickSearchEnabled(want) {
+	setFlag(quickSearchEnabled, toggleQuickSearchEnabled, want)
+}
+
+function setDummySearchFetchEnabled(want) {
+	setFlag(dummySearchFetchEnabled, toggleDummySearchFetchEnabled, want)
+}
+
+function setThemeToggleEnabled(want) {
+	setFlag(themeToggleEnabled, toggleThemeToggleEnabled, want)
+}
+
+function setTopBarEnabled(want) {
+	setFlag(topBarEnabled, toggleTopBarEnabled, want)
+}
+
+function setBreadcrumbsEnabled(want) {
+	setFlag(breadcrumbsEnabled, toggleBreadcrumbsEnabled, want)
+}
+
+function setSidebarEnabled(want) {
+	setFlag(sidebarEnabled, toggleSidebarEnabled, want)
+}
+
 function removeExampleLinks() {
 	if (!navigation) {
 		return
@@ -178,9 +255,12 @@ function addExampleLinks() {
 	})
 }
 
-function toggleExampleLinks() {
-	exampleLinksEnabled.value = !exampleLinksEnabled.value
-	if (exampleLinksEnabled.value) {
+function setExampleLinks(want) {
+	if (exampleLinksEnabled.value === want) {
+		return
+	}
+	exampleLinksEnabled.value = want
+	if (want) {
 		if (!sidebarEnabled.value) {
 			toggleSidebarEnabled()
 		}
@@ -198,14 +278,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.page-structure-control {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	cursor: pointer;
-}
-
-.page-structure-control + .subtle {
+.subtle {
 	margin-top: 0.5rem;
 }
 </style>

package/vue/views/TableExample.vue

@@ -30,6 +30,7 @@
 
 <script setup>
 	import { ref, onMounted } from 'vue'
+	import { getExampleTableRows } from '../data/examplePeople.js'
 
 	const headers = ref([
 		{ key: "name", label: "Name", sortable: true, hidden: false, width: "20%" },
@@ -40,81 +41,6 @@
 	const data = ref([])
 
 	onMounted(() => {
-		data.value = [
-			{ name: "Alice", age: 30, city: "New York", foo: "bar" },
-			{ name: "Bob", age: 25, city: "Los Angeles" },
-			{ name: "Charlie", age: 35, city: "Chicago" },
-			{ name: "David", age: 28, city: "Houston" },
-			{ name: "Eve", age: 22, city: "Phoenix" },
-			{ name: "Frank", age: 40, city: "Philadelphia" },
-			{ name: "Grace", age: 29, city: "San Antonio" },
-			{ name: "Hannah", age: 32, city: "San Diego" },
-			{ name: "Ian", age: 27, city: "Dallas" },
-			{ name: "Jack", age: 31, city: "San Jose" },
-			{ name: "Kathy", age: 26, city: "Austin" },
-			{ name: "Leo", age: 33, city: "Jacksonville" },
-			{ name: "Mia", age: 24, city: "Fort Worth" },
-			{ name: "Nina", age: 38, city: "Columbus" },
-			{ name: "Oscar", age: 36, city: "Charlotte" },
-			{ name: "Paul", age: 34, city: "San Francisco" },
-			{ name: "Quinn", age: 23, city: "Indianapolis" },
-			{ name: "Rita", age: 37, city: "Seattle" },
-			{ name: "Sam", age: 39, city: "Denver" },
-			{ name: "Tina", age: 21, city: "Washington D.C." },
-			{ name: "Uma", age: 28, city: "Miami" },
-			{ name: "Victor", age: 30, city: "Portland" },
-			{ name: "Wendy", age: 29, city: "Nashville" },
-			{ name: "Xavier", age: 31, city: "Oklahoma City" },
-			{ name: "Yara", age: 27, city: "Tampa" },
-			{ name: "Zane", age: 32, city: "Albuquerque" },
-			{ name: "Ava", age: 26, city: "Las Vegas" },
-			{ name: "Ben", age: 33, city: "New Orleans" },
-			{ name: "Cara", age: 25, city: "San Francisco" },
-			{ name: "Drew", age: 34, city: "Seattle" },
-			{ name: "Ethan", age: 28, city: "Denver" },
-			{ name: "Fiona", age: 30, city: "Washington D.C." },
-			{ name: "George", age: 29, city: "Miami" },
-			{ name: "Hannah", age: 32, city: "San Diego" },
-			{ name: "Ian", age: 27, city: "Dallas" },
-			{ name: "Jack", age: 31, city: "San Jose" },
-			{ name: "Kathy", age: 26, city: "Austin" },
-			{ name: "Leo", age: 33, city: "Jacksonville" },
-			{ name: "Mia", age: 24, city: "Fort Worth" },
-			{ name: "Nina", age: 38, city: "Columbus" },
-			{ name: "Oscar", age: 36, city: "Charlotte" },
-			{ name: "Paul", age: 34, city: "San Francisco" },
-			{ name: "Quinn", age: 23, city: "Indianapolis" },
-			{ name: "Rita", age: 37, city: "Seattle" },
-			{ name: "Sam", age: 39, city: "Denver" },
-			{ name: "Tina", age: 21, city: "Washington D.C." },
-			{ name: "Uma", age: 28, city: "Miami" },
-			{ name: "Victor", age: 30, city: "Portland" },
-			{ name: "Wendy", age: 29, city: "Nashville" },
-			{ name: "Xavier", age: 31, city: "Oklahoma City" },
-			{ name: "Yara", age: 27, city: "Tampa" },
-			{ name: "Zane", age: 32, city: "Albuquerque" },
-			{ name: "Ava", age: 26, city: "Las Vegas" },
-			{ name: "Ben", age: 33, city: "New Orleans" },
-			{ name: "Cara", age: 25, city: "San Francisco" },
-			{ name: "Drew", age: 34, city: "Seattle" },
-			{ name: "Ethan", age: 28, city: "Denver" },
-			{ name: "Fiona", age: 30, city: "Washington D.C." },
-			{ name: "George", age: 29, city: "Miami" },
-			{ name: "Hannah", age: 32, city: "San Diego" },
-			{ name: "Ian", age: 27, city: "Dallas" },
-			{ name: "Jack", age: 31, city: "San Jose" },
-			{ name: "Kathy", age: 26, city: "Austin" },
-			{ name: "Leo", age: 33, city: "Jacksonville" },
-			{ name: "Mia", age: 24, city: "Fort Worth" },
-			{ name: "Nina", age: 38, city: "Columbus" },
-			{ name: "Oscar", age: 36, city: "Charlotte" },
-			{ name: "Paul", age: 34, city: "San Francisco" },
-			{ name: "Quinn", age: 23, city: "Indianapolis" },
-			{ name: "Rita", age: 37, city: "Seattle" },
-			{ name: "Sam", age: 39, city: "Denver" },
-			{ name: "Tina", age: 21, city: "Washington D.C." },
-			{ name: "Uma", age: 28, city: "Miami" },
-			{ name: "Victor", age: 30, city: "Portland" },
-		]
+		data.value = getExampleTableRows()
 	})
 </script>

package/vue/views/ThemePreview.vue

@@ -0,0 +1,172 @@
+<template>
+	<Section
+		title="Theme Switcher"
+		subtitle="Drop-in themes layered on Femtocrank — not part of the Vite CSS/JS bundle"
+	>
+		<p>
+			Themes live under <code>public/themes/&lt;name&gt;/theme.css</code>. Drop a folder
+			in and restart the dev server (or rebuild); PicoCrank discovers themes from
+			<code>index.json</code> and applies them with <code>useCustomTheme()</code>.
+		</p>
+
+		<label class="theme-picker">
+			<span>Active theme</span>
+			<select :value="themePreference" @change="onThemeChange">
+				<option value="">Default (Femtocrank)</option>
+				<option
+					v-for="name in availableThemes"
+					:key="name"
+					:value="name"
+				>
+					{{ name }}
+				</option>
+			</select>
+		</label>
+
+		<p v-if="availableThemes.length === 0" class="subtle">
+			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
+			and restart Vite.
+		</p>
+		<p v-else class="subtle">
+			Preference is stored in localStorage and applies across the whole examples site.
+			Light/dark mode (header sun/moon) is separate from drop-in themes.
+		</p>
+	</Section>
+
+	<Section title="Buttons" subtitle="Default and karma variants">
+		<div role="toolbar" class="preview-row">
+			<button type="button">Default</button>
+			<button type="button" class="neutral">Neutral</button>
+			<button type="button" class="good">Good</button>
+			<button type="button" class="bad">Bad</button>
+			<button type="button" class="warning">Warning</button>
+			<button type="button" disabled>Disabled</button>
+		</div>
+	</Section>
+
+	<Section title="Notifications" subtitle="Block-level karma status">
+		<div class="notification show good" role="status">
+			<strong>GOOD:</strong> Theme tokens are applying to karma backgrounds.
+		</div>
+		<div class="notification show bad" role="status">
+			<strong>BAD:</strong> Check contrast on error surfaces.
+		</div>
+		<div class="notification show warning" role="status">
+			<strong>WARNING:</strong> Accent and border colors should stay readable.
+		</div>
+		<p class="fg-success show inline-notification">
+			<strong>SUCCESS:</strong> Inline notification with foreground karma.
+		</p>
+		<p class="fg-warning show inline-notification">
+			<strong>WARNING:</strong> Another inline status line.
+		</p>
+	</Section>
+
+	<Section title="Form controls" subtitle="Inputs inherit theme variables">
+		<FormLayout @submit.prevent>
+			<FormField label="Name" for="theme-preview-name">
+				<input id="theme-preview-name" type="text" value="PicoCrank" />
+			</FormField>
+			<FormField label="Status" for="theme-preview-status">
+				<select id="theme-preview-status">
+					<option>Ready</option>
+					<option>Busy</option>
+				</select>
+			</FormField>
+			<FormField label="Notes" for="theme-preview-notes">
+				<textarea id="theme-preview-notes" rows="3">Override Femtocrank tokens in theme.css</textarea>
+			</FormField>
+			<template #actions>
+				<button type="submit" class="good">Save</button>
+				<button type="button" class="neutral">Cancel</button>
+			</template>
+		</FormLayout>
+	</Section>
+
+	<Section title="Content chrome" subtitle="Sections, links, and muted text">
+		<p>
+			Body copy should pick up <code>--text-color</code>.
+			<a href="#">Sample link</a> uses the theme link color.
+		</p>
+		<p class="subtle">
+			Muted / subtle text uses secondary contrast — useful for captions and hints.
+		</p>
+		<table class="preview-table">
+			<thead>
+				<tr>
+					<th>Token</th>
+					<th>Role</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code>--border-color</code></td>
+					<td>Borders and rules</td>
+				</tr>
+				<tr>
+					<td><code>--standout-bg-color</code></td>
+					<td>Raised / standout surfaces</td>
+				</tr>
+				<tr>
+					<td><code>--karma-*</code></td>
+					<td>Status backgrounds and accents</td>
+				</tr>
+			</tbody>
+		</table>
+	</Section>
+</template>
+
+<script setup>
+import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
+import FormField from '../components/FormField.vue'
+import { useCustomTheme } from '../composables/useCustomTheme.js'
+
+const { availableThemes, themePreference, setTheme, discoverThemes } = useCustomTheme()
+
+discoverThemes()
+
+function onThemeChange(event) {
+	setTheme(event.target.value)
+}
+</script>
+
+<style scoped>
+.theme-picker {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.75rem;
+	margin: 1rem 0;
+}
+
+.theme-picker select {
+	min-width: 14rem;
+}
+
+.preview-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.preview-table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.preview-table th,
+.preview-table td {
+	text-align: left;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid var(--border-color, #d7d7d7);
+}
+
+.notification {
+	margin-bottom: 0.5rem;
+}
+
+.inline-notification {
+	margin: 0.5rem 0;
+}
+</style>

package/vue/views/UserDetails.vue

@@ -0,0 +1,39 @@
+<template>
+	<Section
+		title="User details"
+		subtitle="Signed-in account for this example app"
+	>
+		<p class="subtle">
+			This is a minimal profile page used by the header username control.
+		</p>
+
+		<dl>
+			<dt>Display name</dt>
+			<dd>{{ user.displayName }}</dd>
+
+			<dt>Username</dt>
+			<dd>{{ user.username }}</dd>
+
+			<dt>Email</dt>
+			<dd><a :href="`mailto:${user.email}`">{{ user.email }}</a></dd>
+
+			<dt>Role</dt>
+			<dd>{{ user.role }}</dd>
+
+			<dt>Status</dt>
+			<dd><span class="tag good">{{ user.status }}</span></dd>
+		</dl>
+	</Section>
+</template>
+
+<script setup>
+import Section from '../components/Section.vue'
+
+const user = {
+	displayName: 'Guest User',
+	username: 'guest',
+	email: 'guest@example.com',
+	role: 'Viewer',
+	status: 'Active',
+}
+</script>

package/vue/views/Welcome.vue

@@ -110,6 +110,12 @@ const { show: showPopup } = useNotificationPopups()
 const welcomeNavigation = ref(null)
 
 const popularExamples = [
+	{
+		name: 'ThemePreview',
+		category: 'Layouts',
+		label: 'Theme Switcher',
+		description: 'Switch drop-in themes live',
+	},
 	{
 		name: 'TableExample',
 		category: 'Data display',
@@ -128,12 +134,6 @@ const popularExamples = [
 		label: 'Buttons',
 		description: 'Variants, toolbars, and form actions',
 	},
-	{
-		name: 'StatusExample',
-		category: 'Feedback',
-		label: 'Status',
-		description: 'Inline messages and notification popups',
-	},
 ]
 
 function showWelcomeToast() {
@@ -156,6 +156,9 @@ onMounted(() => {
 	nav.addRouterLink('PageStructure', 'Page structure', {
 		description: 'Sidebar, header, QuickSearch, and breadcrumbs',
 	})
+	nav.addRouterLink('ThemePreview', 'Theme Switcher', {
+		description: 'Drop-in themes on Femtocrank',
+	})
 	nav.addRouterLink('TableExample', 'Table', {
 		description: 'Lists with sorting and pagination',
 	})