picocrank 1.25.2 → 1.26.0

package/vue/data/navSectionHubs.js

@@ -0,0 +1,196 @@
+import { Pin02Icon } from '@hugeicons/core-free-icons'
+
+export const topBarHubRoutes = [
+	'NavLayoutsHub',
+	'NavDataDisplayHub',
+	'NavFormsInputHub',
+	'NavFeedbackStatusHub',
+	'NavPatternsHub',
+]
+
+export function helloWorld() {
+	alert('Hello World')
+}
+
+export const navSectionHubs = {
+	NavLayoutsHub: {
+		title: 'Layouts',
+		subtitle: 'Page structure, navigation, and application shell',
+		sectionId: 'nav-layouts',
+		links: [
+			{
+				name: 'PageStructure',
+				options: { description: 'Configure the example app shell' },
+			},
+			{
+				name: 'ThemePreview',
+				title: 'Theme Switcher',
+				options: { description: 'Drop-in themes on Femtocrank' },
+			},
+			{
+				name: 'ViewItem',
+				title: 'View item',
+				options: { params: { id: 1 }, description: 'Detail view with breadcrumbs' },
+			},
+			{
+				name: 'NavigationGridExample',
+				title: 'Navigation Grid',
+				options: { description: 'Icon grid for settings hubs' },
+			},
+			{
+				name: 'Admin',
+				options: { description: 'Admin-style section layout' },
+			},
+			{
+				name: 'TabsExample',
+				title: 'Tabs',
+				options: { description: 'Tabbed content regions' },
+			},
+		],
+	},
+	NavDataDisplayHub: {
+		title: 'Data display',
+		subtitle: 'Tables, calendars, and read-only output',
+		sectionId: 'nav-data',
+		links: [
+			{
+				name: 'TableExample',
+				title: 'Table',
+				options: { description: 'Sorting, pagination, and filters' },
+			},
+			{
+				name: 'TableRemoteExample',
+				title: 'Remote table',
+				options: { description: 'Server-style fetchRows pagination and filters' },
+			},
+			{
+				name: 'CalendarExample',
+				title: 'Calendar',
+				options: { description: 'Month view with events' },
+			},
+			{
+				name: 'ReadOnlyTextAreaExample',
+				title: 'Read-only output',
+				options: { description: 'Copyable read-only text areas' },
+			},
+		],
+	},
+	NavFormsInputHub: {
+		title: 'Forms & input',
+		subtitle: 'Buttons, forms, and authentication',
+		sectionId: 'nav-forms',
+		links: [
+			{
+				name: 'ButtonsExample',
+				title: 'Buttons',
+				options: { description: 'Button variants and toolbars' },
+			},
+			{
+				name: 'FormExample',
+				title: 'Forms',
+				options: { description: 'Labels, inputs, and fieldsets' },
+			},
+			{
+				name: 'LoginExample',
+				title: 'Login',
+				options: { description: 'Auth form with OAuth tabs' },
+			},
+		],
+	},
+	NavFeedbackStatusHub: {
+		title: 'Feedback & status',
+		subtitle: 'Notifications, dialogs, and inline status',
+		sectionId: 'nav-feedback',
+		links: [
+			{
+				name: 'StatusExample',
+				title: 'Status & notifications',
+				options: { description: 'Block, inline, and popup notifications' },
+			},
+			{
+				name: 'DialogExample',
+				title: 'Dialog',
+				options: { description: 'Modal dialogs and confirmations' },
+			},
+		],
+	},
+	NavPatternsHub: {
+		title: 'Patterns',
+		subtitle: 'Reusable UI patterns and interactions',
+		sectionId: 'nav-patterns',
+		links: [
+			{
+				type: 'callback',
+				title: 'Callback example',
+				callback: helloWorld,
+				options: {
+					icon: Pin02Icon,
+					description: 'Navigation item that runs a function instead of routing',
+				},
+			},
+		],
+	},
+}
+
+function registerNavLink(nav, link, { onHelloWorld = helloWorld } = {}) {
+	if (link.type === 'callback') {
+		const callback = link.callback ?? onHelloWorld
+		nav.addCallback(link.title, callback, link.options ?? {})
+		return
+	}
+
+	nav.addRouterLink(link.name, link.title ?? null, link.options ?? {})
+}
+
+/** Flat example list for the sidebar — hub routes are not registered here. */
+export function registerSidebarNavigation(nav, { onHelloWorld = helloWorld } = {}) {
+	if (!nav) {
+		return
+	}
+
+	nav.addRouterLink('Welcome')
+
+	for (const routeName of topBarHubRoutes) {
+		const hub = navSectionHubs[routeName]
+		nav.addSection(hub.title, { name: hub.sectionId })
+
+		for (const link of hub.links) {
+			registerNavLink(nav, link, { onHelloWorld })
+		}
+	}
+}
+
+/** Hub category links for the header top bar. */
+export function registerTopBarNavigation(nav) {
+	if (!nav) {
+		return
+	}
+
+	for (const routeName of topBarHubRoutes) {
+		nav.addRouterLink(routeName)
+	}
+}
+
+/** Example links for a single hub page (NavigationGrid). */
+export function registerHubNavigation(nav, hubRouteName, { onHelloWorld = helloWorld } = {}) {
+	const hub = navSectionHubs[hubRouteName]
+	if (!nav || !hub) {
+		return
+	}
+
+	for (const link of hub.links) {
+		registerNavLink(nav, link, { onHelloWorld })
+	}
+}
+
+/** Hub overview grid for the welcome page. */
+export function registerWelcomeHubGrid(nav) {
+	if (!nav) {
+		return
+	}
+
+	for (const routeName of topBarHubRoutes) {
+		const hub = navSectionHubs[routeName]
+		nav.addRouterLink(routeName, hub.title, { description: hub.subtitle })
+	}
+}

package/vue/data/routeBreadcrumbs.js

@@ -0,0 +1,90 @@
+import { navSectionHubs, topBarHubRoutes } from './navSectionHubs.js'
+
+/** Example route name → hub route name (from navSectionHubs). */
+const routeToHub = Object.fromEntries(
+	topBarHubRoutes.flatMap((hubRouteName) =>
+		navSectionHubs[hubRouteName].links
+			.filter((link) => link.name)
+			.map((link) => [link.name, hubRouteName]),
+	),
+)
+
+export function welcomeCrumb() {
+	return { name: 'Welcome', to: { name: 'Welcome' } }
+}
+
+export function hubMenuItems() {
+	return topBarHubRoutes.map((hubRouteName) => {
+		const hub = navSectionHubs[hubRouteName]
+		return {
+			name: hub.title,
+			to: { name: hubRouteName },
+		}
+	})
+}
+
+/** Hub section picker — all example categories in one dropdown. */
+export function hubMenuCrumb(activeHubRouteName) {
+	const hub = navSectionHubs[activeHubRouteName]
+	return {
+		name: hub.title,
+		to: { name: activeHubRouteName },
+		menu: hubMenuItems(),
+	}
+}
+
+export function routeCrumb(routeName, title, params = undefined) {
+	return {
+		name: title,
+		to: params ? { name: routeName, params } : { name: routeName },
+	}
+}
+
+/** Welcome → hub section (hub landing pages). */
+export function hubSectionBreadcrumbs(hubRouteName) {
+	return () => [welcomeCrumb(), hubMenuCrumb(hubRouteName)]
+}
+
+/** Welcome → hub menu → example page (most grid-linked examples). */
+export function hubChildBreadcrumbs(hubRouteName, routeName, title) {
+	return () => [
+		welcomeCrumb(),
+		hubMenuCrumb(hubRouteName),
+		routeCrumb(routeName, title),
+	]
+}
+
+/** Resolve hub for a route name when only the child is known. */
+export function hubForRoute(routeName) {
+	return routeToHub[routeName] ?? null
+}
+
+const viewItemLabels = {
+	1: 'Acme deployment',
+	Alice: 'Alice',
+	Bob: 'Bob',
+}
+
+export function viewItemLabel(id) {
+	const key = String(id)
+	if (viewItemLabels[key]) {
+		return viewItemLabels[key]
+	}
+	return key.charAt(0).toUpperCase() + key.slice(1)
+}
+
+/** Table row detail: Welcome → hub menu → Table → record. */
+export function viewItemBreadcrumbs(route) {
+	const id = route.params.id
+	return [
+		welcomeCrumb(),
+		hubMenuCrumb('NavDataDisplayHub'),
+		routeCrumb('TableExample', 'Table'),
+		routeCrumb('ViewItem', viewItemLabel(id), { id }),
+	]
+}
+
+/** Standalone pages with no hub parent. */
+export function standaloneBreadcrumbs(routeName, title) {
+	return () => [welcomeCrumb(), routeCrumb(routeName, title)]
+}

package/vue/examples/Admin.vue

@@ -10,28 +10,28 @@
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
 				
 				<div class="grid-boxed">
-					<div class="stat-display">
+					<div class="stat-display good">
 						<h4>Total Users</h4>
-						<div class="stat fg-good">1,247</div>
-						<div class="subtle">+12% from last month</div>
+						<span class="stat">1,247</span>
+						<span class="subtle">+12% from last month</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display bad">
 						<h4>Active Sessions</h4>
-						<div class="stat fg-bad">89</div>
-						<div class="subtle">-3% from last hour</div>
+						<span class="stat">89</span>
+						<span class="subtle">-3% from last hour</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display warning">
 						<h4>System Load</h4>
-						<div class="stat fg-warning">67%</div>
-						<div class="subtle">Moderate</div>
+						<span class="stat">67%</span>
+						<span class="subtle">Moderate</span>
 					</div>
 					
-					<div class="stat-display">
+					<div class="stat-display good">
 						<h4>Storage Used</h4>
-						<div class="stat fg-good">2.4 GB</div>
-						<div class="subtle">45% of total</div>
+						<span class="stat">2.4 GB</span>
+						<span class="subtle">45% of total</span>
 					</div>
 				</div>
 			</div>

package/vue/examples/App.vue

@@ -1,6 +1,21 @@
 <template>
 	<Navigation ref="navigation">
-		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" @userClick="goToUserDetails" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="themeToggleEnabled">
+		<Navigation ref="topBarNavigation">
+			<Header
+				username="Guest"
+				@toggleSidebar="toggleSidebar"
+				@logoClick="goToIndex"
+				@userClick="goToUserDetails"
+				title="PicoCrank"
+				:logoUrl="logoUrl"
+				:sidebarEnabled="sidebarEnabled"
+				:navigation="navigation"
+				:topBarNavigation="topBarNavigation"
+				:topBarEnabled="topBarEnabled"
+				:showBranding="brandingEnabled"
+				:breadcrumbs="breadcrumbsEnabled"
+				:themeToggleEnabled="themeToggleEnabled"
+			>
 			<template #toolbar>
 				<ExampleHeaderThemeSwitcher
 					v-if="themeSwitcherEnabled"
@@ -16,6 +31,7 @@
 				/>
 			</template>
 		</Header>
+		</Navigation>
 
 		<div id = "layout">
 			<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
@@ -38,7 +54,7 @@
 <script setup>
 	import { ref, onMounted, provide, watch } from 'vue';
 	import { useRouter } from 'vue-router';
-	import { Pin02Icon, UserIcon } from '@hugeicons/core-free-icons'
+	import { UserIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 	import ExampleHeaderThemeSwitcher from './ExampleHeaderThemeSwitcher.vue'
@@ -48,12 +64,18 @@
 	import '../composables/useTheme.js'
 	import { initCustomTheme } from '../composables/useCustomTheme.js'
 	import { examplePeople } from '../data/examplePeople.js'
+	import {
+		helloWorld,
+		registerSidebarNavigation,
+		registerTopBarNavigation,
+	} from '../data/navSectionHubs.js'
 	import logoUrl from '/logo.png';
 
 	const router = useRouter();
 	const quickSearchRef = ref(null)
 	const sidebar = ref(null);
 	const navigation = ref(null);
+	const topBarNavigation = ref(null);
 	const sidebarEnabled = ref(true);
 	const brandingEnabled = ref(true);
 	const quickSearchEnabled = ref(true);
@@ -62,7 +84,7 @@
 	const themeSwitcherEnabled = ref(true);
 	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
-	const breadcrumbsEnabled = ref(false);
+	const breadcrumbsEnabled = ref(true);
 
 	const { discoverThemes } = initCustomTheme({ includeSupplementalThemes: true });
 
@@ -188,35 +210,8 @@
 	onMounted(() => {
 		discoverThemes()
 
-		if (navigation.value) {
-			navigation.value.addRouterLink('Welcome')
-
-			navigation.value.addSection('Layouts', { name: 'nav-layouts' })
-			navigation.value.addRouterLink('PageStructure', 'Page structure')
-			navigation.value.addRouterLink('ThemePreview', 'Theme Switcher')
-			navigation.value.addRouterLink('ViewItem', 'View item', { params: { id: 1 } })
-			navigation.value.addRouterLink('NavigationGridExample', 'Navigation Grid')
-			navigation.value.addRouterLink('Admin')
-			navigation.value.addRouterLink('TabsExample', 'Tabs')
-
-			navigation.value.addSection('Data display', { name: 'nav-data' })
-			navigation.value.addRouterLink('TableExample', 'Table')
-			navigation.value.addRouterLink('TableRemoteExample', 'Remote table')
-			navigation.value.addRouterLink('CalendarExample', 'Calendar')
-			navigation.value.addRouterLink('ReadOnlyTextAreaExample', 'Read-only output')
-
-			navigation.value.addSection('Forms & input', { name: 'nav-forms' })
-			navigation.value.addRouterLink('ButtonsExample', 'Buttons')
-			navigation.value.addRouterLink('FormExample', 'Forms')
-			navigation.value.addRouterLink('LoginExample', 'Login')
-
-			navigation.value.addSection('Feedback & status', { name: 'nav-feedback' })
-			navigation.value.addRouterLink('StatusExample', 'Status & notifications')
-			navigation.value.addRouterLink('DialogExample', 'Dialog')
-
-			navigation.value.addSection('Patterns', { name: 'nav-patterns' })
-			navigation.value.addCallback('Callback example', helloWorld, { icon: Pin02Icon })
-		}
+		registerSidebarNavigation(navigation.value, { onHelloWorld: helloWorld })
+		registerTopBarNavigation(topBarNavigation.value)
 
 		if (sidebar.value) {
 			sidebar.value.open();
@@ -226,8 +221,4 @@
 		registerQuickSearchItems()
 	});
 
-	function helloWorld() {
-		alert('Hello World')
-	}
-
 </script>

package/vue/examples/CalendarExample.vue

@@ -53,6 +53,20 @@ import {
 	AlertCircleIcon,
 } from '@hugeicons/core-free-icons'
 
+/** Static event palette — background + accessible dark foreground for light pastels in any theme. */
+const EVENT_COLORS = {
+	weekend: { color: '#e8d5f5', foregroundColor: '#4a2d6b' },
+	teamMeeting: { color: '#d1fae5', foregroundColor: '#14532d' },
+	clientCall: { color: '#e0f2fe', foregroundColor: '#075985' },
+	projectReview: { color: '#ede9fe', foregroundColor: '#5b21b6' },
+	lunchBreak: { color: '#ffedd5', foregroundColor: '#9a3412' },
+	codeReview: { color: '#ccfbf1', foregroundColor: '#115e59' },
+	conference: { color: '#d6e8ff', foregroundColor: '#1e40af' },
+	vacation: { color: '#fff0d6', foregroundColor: '#92400e' },
+	holiday: { color: '#ffe0e0', foregroundColor: '#991b1b' },
+	deadline: { color: '#fde8e8', foregroundColor: '#7f1d1d' },
+}
+
 const events = ref([])
 const loading = ref(false)
 const error = ref(null)
@@ -99,30 +113,32 @@ function generateDummyEventsForMonth(monthIndex, year) {
 				date: new Date(year, monthIndex, day, 10, 0),
 				description: 'Relaxing weekend activity',
 				icon: PartyIcon,
-				color: '#e8d5f5',
+				...EVENT_COLORS.weekend,
 			})
 		}
 		
 		// Add some random events
 		if (random() > 0.7) {
 			const eventTypes = [
-				{ title: 'Team Meeting', time: [9, 0], duration: 1 },
-				{ title: 'Client Call', time: [14, 30], duration: 0.5 },
-				{ title: 'Project Review', time: [16, 0], duration: 2 },
-				{ title: 'Lunch Break', time: [12, 0], duration: 1 },
-				{ title: 'Code Review', time: [10, 0], duration: 1.5 }
+				{ title: 'Team Meeting', time: [9, 0], duration: 1, ...EVENT_COLORS.teamMeeting },
+				{ title: 'Client Call', time: [14, 30], duration: 0.5, ...EVENT_COLORS.clientCall },
+				{ title: 'Project Review', time: [16, 0], duration: 2, ...EVENT_COLORS.projectReview },
+				{ title: 'Lunch Break', time: [12, 0], duration: 1, ...EVENT_COLORS.lunchBreak },
+				{ title: 'Code Review', time: [10, 0], duration: 1.5, ...EVENT_COLORS.codeReview },
 			]
 			
 			const eventType = eventTypes[Math.floor(random() * eventTypes.length)]
-			const [hours, minutes] = eventType.time
+			const { title, time, color, foregroundColor } = eventType
+			const [hours, minutes] = time
 			
 			dummyEvents.push({
 				id: `event-${year}-${monthIndex}-${day}-${Math.random().toString(36).substr(2, 9)}`,
-				title: eventType.title,
+				title,
 				date: new Date(year, monthIndex, day, hours, minutes),
-				description: `Scheduled ${eventType.title.toLowerCase()}`,
-				icon: eventType.title === 'Team Meeting' ? MeetingRoomIcon : undefined,
-				color: eventType.title === 'Client Call' ? '#e0f2fe' : undefined,
+				description: `Scheduled ${title.toLowerCase()}`,
+				icon: title === 'Team Meeting' ? MeetingRoomIcon : undefined,
+				color,
+				foregroundColor,
 			})
 		}
 	}
@@ -135,7 +151,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		endDate: new Date(year, monthIndex, 7, 17, 0),
 		description: 'Annual technology conference',
 		icon: Calendar01Icon,
-		color: '#d6e8ff',
+		...EVENT_COLORS.conference,
 	})
 	
 	dummyEvents.push({
@@ -145,7 +161,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		endDate: new Date(year, monthIndex, 18, 23, 59),
 		description: 'Family vacation time',
 		icon: BeachIcon,
-		color: '#fff0d6',
+		...EVENT_COLORS.vacation,
 	})
 	
 	// Add some all-day events
@@ -155,7 +171,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 		date: new Date(year, monthIndex, 1, 0, 0),
 		description: 'National holiday - office closed',
 		icon: PartyIcon,
-		color: '#ffe0e0',
+		...EVENT_COLORS.holiday,
 	})
 	
 	if (daysInMonth >= 25) {
@@ -165,7 +181,7 @@ function generateDummyEventsForMonth(monthIndex, year) {
 			date: new Date(year, monthIndex, 25, 0, 0),
 			description: 'Important project deadline',
 			icon: AlertCircleIcon,
-			color: '#fde8e8',
+			...EVENT_COLORS.deadline,
 		})
 	}
 	
@@ -204,12 +220,6 @@ function getEventsForSurroundingMonths(monthIndex, year) {
 	]
 }
 
-// Generate dummy events for the current month (backward compatibility wrapper)
-function generateDummyEvents() {
-    const now = new Date()
-    return getEventsForMonth(now.getMonth(), now.getFullYear())
-}
-
 function handleEventClick(event) {
     console.log('Event clicked:', event)
     alert(`Event: ${event.title}\nDescription: ${event.description || 'No description'}`)
@@ -232,7 +242,7 @@ function handleDateRangeSelect(start, end) {
 function handleEventMoveRequest({ respond, event, sourceDate, targetDate }) {
 	window.setTimeout(() => {
 		const ok = window.confirm(
-			`Move "${event.title}" to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
+			`Move "${event.title}" from ${sourceDate.toLocaleDateString()} to ${targetDate.toLocaleDateString()}? (Cancel = decline)`
 		)
 		respond(ok)
 	}, 50)

package/vue/examples/ExampleHeaderThemeSwitcher.vue

@@ -56,7 +56,7 @@ header .header-actions .theme-switcher--compact select {
 	border: 0;
 	border-radius: 0;
 	background-color: transparent;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	padding-top: 0;
 	padding-bottom: 0;
 	padding-left: 0.6em;

package/vue/examples/Login.vue

@@ -9,12 +9,9 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
 
-const router = useRouter();
-
 // Handle local login
 function handleLocalLogin(credentials) {
 	console.log('Local login attempt:', {

package/vue/examples/LoginExample.vue

@@ -8,7 +8,7 @@
 			@tab-change="onTabChange"
 		>
 			<!-- Custom tab: Magic Link Login -->
-			<template #tab-magic-link="{ tab }">
+			<template #tab-magic-link>
 				<div class="login-section">
 					<form @submit.prevent="handleMagicLinkLogin" class="magic-link-form">
 						<input
@@ -30,7 +30,7 @@
 			</template>
 
 			<!-- Custom tab: SSO Login -->
-			<template #tab-sso="{ tab }">
+			<template #tab-sso>
 				<div class="login-section">
 					<div class="sso-providers">
 						<button
@@ -54,12 +54,9 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
 
-const router = useRouter();
-
 // Custom tabs configuration
 const customTabs = ref([
 	{ id: 'magic-link', label: 'Magic Link' },
@@ -232,19 +229,10 @@ function handleSSOLogin(provider) {
 }
 
 .magic-link-form input {
-	padding: 0.75rem;
-	border-radius: 4px;
-	font-size: 1em;
 	width: 100%;
 	box-sizing: border-box;
 }
 
-.magic-link-form input:focus {
-	outline: none;
-	border-color: var(--primary-color, #007bff);
-	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
 .magic-link-form button,
 .sso-button {
 	width: 100%;

package/vue/examples/NavSectionHub.vue

@@ -0,0 +1,36 @@
+<template>
+	<Section v-if="hub" :title="hub.title" :subtitle="hub.subtitle">
+		<Navigation ref="localNavigation">
+			<NavigationGrid />
+		</Navigation>
+	</Section>
+	<Section
+		v-else
+		title="Unknown section"
+		subtitle="This navigation hub is not configured."
+	>
+		<p class="subtle">
+			Return to the welcome page and pick an example category from the top bar or sidebar.
+		</p>
+		<router-link :to="{ name: 'Welcome' }" class="button neutral">
+			Back to welcome
+		</router-link>
+	</Section>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import Section from '../components/Section.vue'
+import Navigation from '../components/Navigation.vue'
+import NavigationGrid from '../components/NavigationGrid.vue'
+import { navSectionHubs, registerHubNavigation } from '../data/navSectionHubs.js'
+
+const route = useRoute()
+const localNavigation = ref(null)
+const hub = computed(() => navSectionHubs[route.name])
+
+onMounted(() => {
+	registerHubNavigation(localNavigation.value, route.name)
+})
+</script>