picocrank 1.24.0 → 1.25.1

package/vue/examples/TableRemoteExample.vue

@@ -1,14 +1,17 @@
 <template>
 	<Section
 		title="Remote table"
-		subtitle="Server-style pagination with fetchRows. Filters, sort, and page changes are sent to the callback. Right-click or long-press a column header to filter."
+		:icon="CloudServerIcon"
+		subtitle="Server-style pagination with fetchRows. Filter queries, sort, and page changes are sent to the callback. Right-click or long-press a column header to filter. Layout save/load uses server callbacks instead of localStorage."
 		:padding="false"
 	>
 		<p v-if="lastQuerySummary" class="subtle query-summary">{{ lastQuerySummary }}</p>
 
 		<Table
+			row-key="name"
 			:headers="headers"
 			:fetch-rows="fetchRows"
+			:layout-presets="layoutPresets"
 			:show-pagination="true"
 			:remote-debounce-ms="250"
 		/>
@@ -17,8 +20,13 @@
 
 <script setup>
 import { ref } from 'vue'
+import { CloudServerIcon } from '@hugeicons/core-free-icons'
 import { getExampleTableRows } from '../data/examplePeople.js'
-import { applyFilters, sortRows } from '../composables/tableFilters.js'
+import {
+	applyFilterQuery,
+	countActiveFilterQuery,
+} from '../composables/tableFilterQuery.js'
+import { sortRows } from '../composables/tableFilters.js'
 
 const allRows = getExampleTableRows()
 
@@ -41,7 +49,107 @@ const headers = ref([
 
 const lastQuerySummary = ref('')
 
+const remoteLayoutStore = ref({
+	defaultPresetId: null,
+	presets: [],
+})
+
+let remotePresetCounter = 0
+
+function createRemotePresetId() {
+	remotePresetCounter += 1
+	return `remote-preset-${remotePresetCounter}`
+}
+
+const layoutPresets = {
+	async list() {
+		return {
+			presets: remoteLayoutStore.value.presets.map((preset) => ({ ...preset })),
+			defaultPresetId: remoteLayoutStore.value.defaultPresetId,
+		}
+	},
+
+	async getDefault() {
+		const { defaultPresetId, presets } = remoteLayoutStore.value
+		if (!defaultPresetId) {
+			return { ok: true, preset: null }
+		}
+
+		const preset = presets.find((item) => item.id === defaultPresetId) ?? null
+		return { ok: true, preset: preset ? { ...preset } : null }
+	},
+
+	async save({ name, state, setAsDefault = false }) {
+		const trimmedName = String(name ?? '').trim()
+		if (!trimmedName) {
+			return { ok: false, error: 'Preset name is required.' }
+		}
+
+		const preset = {
+			id: createRemotePresetId(),
+			name: trimmedName,
+			savedAt: new Date().toISOString(),
+			state: JSON.parse(JSON.stringify(state)),
+		}
+
+		remoteLayoutStore.value.presets = [...remoteLayoutStore.value.presets, preset]
+		if (setAsDefault) {
+			remoteLayoutStore.value.defaultPresetId = preset.id
+		}
+
+		console.info('[remote table] saved layout preset', preset)
+		return {
+			ok: true,
+			preset,
+			defaultPresetId: remoteLayoutStore.value.defaultPresetId,
+		}
+	},
+
+	async load(presetId) {
+		const preset = remoteLayoutStore.value.presets.find((item) => item.id === presetId)
+		if (!preset) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		console.info('[remote table] loaded layout preset', preset)
+		return { ok: true, preset: { ...preset } }
+	},
+
+	async delete(presetId) {
+		const nextPresets = remoteLayoutStore.value.presets.filter((item) => item.id !== presetId)
+		if (nextPresets.length === remoteLayoutStore.value.presets.length) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		remoteLayoutStore.value.presets = nextPresets
+		if (remoteLayoutStore.value.defaultPresetId === presetId) {
+			remoteLayoutStore.value.defaultPresetId = null
+		}
+
+		console.info('[remote table] deleted layout preset', presetId)
+		return { ok: true, defaultPresetId: remoteLayoutStore.value.defaultPresetId }
+	},
+
+	async setDefault(presetId) {
+		if (presetId === null) {
+			remoteLayoutStore.value.defaultPresetId = null
+			return { ok: true, defaultPresetId: null }
+		}
+
+		const preset = remoteLayoutStore.value.presets.find((item) => item.id === presetId)
+		if (!preset) {
+			return { ok: false, error: 'Preset not found.' }
+		}
+
+		remoteLayoutStore.value.defaultPresetId = presetId
+		console.info('[remote table] set default layout preset', presetId)
+		return { ok: true, defaultPresetId: presetId }
+	},
+}
+
 async function fetchRows(query, { signal } = {}) {
+	console.log('[remote table] filterQuery', query.filterQuery)
+
 	await new Promise((resolve, reject) => {
 		const timer = window.setTimeout(resolve, 200)
 		if (!signal) {
@@ -58,12 +166,12 @@ async function fetchRows(query, { signal } = {}) {
 		signal.addEventListener('abort', onAbort, { once: true })
 	})
 
-	const filtered = applyFilters(allRows, headers.value, query.filters)
+	const filtered = applyFilterQuery(allRows, headers.value, query.filterQuery)
 	const sorted = sortRows(filtered, query.sortBy, query.sortDir)
 	const start = (query.page - 1) * query.pageSize
 	const rows = sorted.slice(start, start + query.pageSize)
 
-	lastQuerySummary.value = `Last query: page ${query.page}, ${Object.keys(query.filters ?? {}).length} active filter(s), ${sorted.length} matching row(s).`
+	lastQuerySummary.value = `Last query: page ${query.page}, ${countActiveFilterQuery(query.filterQuery, headers.value, allRows)} active filter(s), ${sorted.length} matching row(s).`
 
 	return {
 		rows,

package/vue/examples/ThemePreview.vue

@@ -4,33 +4,28 @@
 		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
+			Themes live under <code>public/themes/&lt;name&gt;/theme.css</code> (app themes) and
+			optionally <code>supplemental-themes/</code> (Catppuccin, Dracula / Alucard, Gruvbox, waffles). 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>.
+			<code>index.json</code> and applies them with <code>useCustomTheme()</code> or
+			<code>ThemeSwitcher</code> in the examples app header toolbar. Supplemental themes are bundled by default but only
+			listed when <code>include-supplemental-themes</code> is enabled.
 		</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">
+		<p class="subtle">
+			Use the theme dropdown in the header (next to the light/dark toggle) to switch drop-in themes.
 			Preference is stored in localStorage and applies across the whole examples site.
-			Light/dark mode (header sun/moon) is separate from drop-in themes.
+			Light/dark mode switches Femtocrank defaults, or the dual-variant supplemental themes when active.
 		</p>
+
+		<button
+			type="button"
+			class="neutral open-theme-switcher-button"
+			:disabled="!themeSwitcherEnabled"
+			@click="openThemeSwitcher"
+		>
+			Open theme switcher
+		</button>
 	</Section>
 
 	<Section title="Buttons" subtitle="Default and karma variants">
@@ -111,37 +106,49 @@
 					<td><code>--karma-*</code></td>
 					<td>Status backgrounds and accents</td>
 				</tr>
+				<tr>
+					<td><code>--link-color</code></td>
+					<td>Links, active tabs, sort/filter column headers</td>
+				</tr>
+				<tr>
+					<td><code>--muted-text-color</code></td>
+					<td>Secondary text and inactive tab labels</td>
+				</tr>
+				<tr>
+					<td><code>--header-fg-color</code></td>
+					<td>Header chrome text and icons</td>
+				</tr>
+				<tr>
+					<td><code>--input-bg-color</code> / <code>--input-fg-color</code></td>
+					<td>Form fields</td>
+				</tr>
 			</tbody>
 		</table>
 	</Section>
 </template>
 
 <script setup>
+import { inject } from 'vue'
 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()
+import { HEADER_THEME_SWITCHER_SELECT_ID } from '../components/ThemeSwitcher.vue'
 
-discoverThemes()
+const themeSwitcherEnabled = inject('themeSwitcherEnabled')
 
-function onThemeChange(event) {
-	setTheme(event.target.value)
+function openThemeSwitcher() {
+	const select = document.getElementById(HEADER_THEME_SWITCHER_SELECT_ID)
+	if (!(select instanceof HTMLSelectElement)) {
+		return
+	}
+	select.focus()
+	select.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </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;
+.open-theme-switcher-button {
+	margin-top: 0.75rem;
 }
 
 .preview-row {

package/public/themes/catppuccin/theme.css

@@ -1,195 +0,0 @@
-/*
- * Catppuccin Mocha sample theme for PicoCrank / Femtocrank.
- * Palette: https://catppuccin.com/palette/ (Mocha)
- *
- * Asset URLs must be absolute, e.g.:
- *   background-image: url('/themes/catppuccin/background.png');
- */
-
-:root,
-html {
-	color-scheme: dark;
-
-	--ctp-rosewater: #f5e0dc;
-	--ctp-flamingo: #f2cdcd;
-	--ctp-pink: #f5c2e7;
-	--ctp-mauve: #cba6f7;
-	--ctp-red: #f38ba8;
-	--ctp-maroon: #eba0ac;
-	--ctp-peach: #fab387;
-	--ctp-yellow: #f9e2af;
-	--ctp-green: #a6e3a1;
-	--ctp-teal: #94e2d5;
-	--ctp-sky: #89dceb;
-	--ctp-sapphire: #74c7ec;
-	--ctp-blue: #89b4fa;
-	--ctp-lavender: #b4befe;
-	--ctp-text: #cdd6f4;
-	--ctp-subtext1: #bac2de;
-	--ctp-subtext0: #a6adc8;
-	--ctp-overlay2: #9399b2;
-	--ctp-overlay1: #7f849c;
-	--ctp-overlay0: #6c7086;
-	--ctp-surface2: #585b70;
-	--ctp-surface1: #45475a;
-	--ctp-surface0: #313244;
-	--ctp-base: #1e1e2e;
-	--ctp-mantle: #181825;
-	--ctp-crust: #11111b;
-
-	--text-color: var(--ctp-text);
-	--border-color: var(--ctp-surface1);
-	--standout-bg-color: var(--ctp-mantle);
-	--hover-background-color: var(--ctp-surface0);
-	--hover-text-color: var(--ctp-text);
-	--header-hover-background-color: var(--ctp-surface1);
-	--header-hover-text-color: var(--ctp-text);
-	--disabled-background-color: var(--ctp-surface0);
-	--disabled-text-color: var(--ctp-overlay0);
-
-	--karma-good: var(--ctp-green);
-	--karma-bad: var(--ctp-red);
-	--karma-warning: var(--ctp-yellow);
-	--karma-severe: var(--ctp-maroon);
-	--karma-important: var(--ctp-peach);
-	--karma-note: var(--ctp-sapphire);
-	--karma-info: var(--ctp-surface1);
-	--karma-old: var(--ctp-overlay0);
-
-	--karma-good-fg: var(--ctp-green);
-	--karma-bad-fg: var(--ctp-red);
-	--karma-warning-fg: var(--ctp-yellow);
-	--karma-severe-fg: var(--ctp-maroon);
-	--karma-important-fg: var(--ctp-peach);
-	--karma-note-fg: var(--ctp-sapphire);
-	--karma-info-fg: var(--ctp-subtext0);
-	--karma-old-fg: var(--ctp-overlay1);
-}
-
-body {
-	background-color: var(--ctp-base);
-	color: var(--ctp-text);
-}
-
-header {
-	background-color: var(--ctp-crust);
-	border-bottom: 1px solid var(--ctp-surface0);
-	box-shadow: none;
-	color: var(--ctp-text);
-}
-
-#sidebar-toggler-button,
-#sidebar-toggler-button.neutral,
-header .theme-toggle,
-header .theme-toggle.neutral,
-header .search-trigger,
-header .search-trigger.neutral {
-	background-color: transparent;
-	border: 0;
-	color: var(--ctp-text);
-}
-
-#sidebar-toggler-button:hover,
-header .theme-toggle:hover,
-header .search-trigger:hover,
-header .user-info:hover {
-	background-color: var(--header-hover-background-color);
-	color: var(--header-hover-text-color);
-}
-
-aside,
-#sidebar {
-	background-color: var(--ctp-mantle);
-	color: var(--ctp-text);
-	border-color: var(--ctp-surface0);
-	/* Replace Femtocrank's light gray glow — it reads as a haze on Mocha */
-	box-shadow: 0.15em 0 0.6em rgba(17, 17, 27, 0.65);
-}
-
-aside a,
-aside a:visited {
-	color: var(--ctp-text);
-}
-
-aside a:hover,
-aside :is(ul, menu) li a:hover,
-aside .nav-section-header:hover {
-	background-color: var(--ctp-surface0);
-	color: var(--ctp-text);
-}
-
-section {
-	background-color: var(--ctp-mantle);
-	color: var(--ctp-text);
-	box-shadow: 0 0 0.5em var(--ctp-crust);
-	border-color: var(--ctp-surface0);
-}
-
-section .section-header,
-section .section-subheader {
-	background-color: var(--ctp-mantle);
-	border-bottom-color: var(--ctp-surface0);
-	color: var(--ctp-text);
-}
-
-button,
-.button {
-	background-color: var(--ctp-surface0);
-	border: 1px solid var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-button:hover,
-.button:hover {
-	background-color: var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-button.good,
-.button.good {
-	background-color: var(--ctp-green);
-	border-color: var(--ctp-green);
-	color: var(--ctp-crust);
-}
-
-button.bad,
-.button.bad {
-	background-color: var(--ctp-red);
-	border-color: var(--ctp-red);
-	color: var(--ctp-crust);
-}
-
-button.warning,
-.button.warning {
-	background-color: var(--ctp-yellow);
-	border-color: var(--ctp-yellow);
-	color: var(--ctp-crust);
-}
-
-button.neutral,
-.button.neutral {
-	background-color: var(--ctp-surface1);
-	border-color: var(--ctp-surface2);
-	color: var(--ctp-text);
-}
-
-input,
-select,
-textarea {
-	background-color: var(--ctp-surface0);
-	border: 1px solid var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-a {
-	color: var(--ctp-blue);
-}
-
-footer {
-	color: var(--ctp-subtext0);
-	border-top-color: var(--ctp-surface0);
-}
-
-.subtle {
-	color: var(--ctp-subtext0);
-}

package/public/themes/dracula/theme.css

@@ -1,181 +0,0 @@
-/*
- * Dracula sample theme for PicoCrank / Femtocrank.
- * Palette: https://draculatheme.com/ / https://spec.draculatheme.com/
- *
- * Asset URLs must be absolute, e.g.:
- *   background-image: url('/themes/dracula/background.png');
- */
-
-:root,
-html {
-	color-scheme: dark;
-
-	--dracula-background: #282a36;
-	--dracula-current-line: #44475a;
-	--dracula-foreground: #f8f8f2;
-	--dracula-comment: #6272a4;
-	--dracula-cyan: #8be9fd;
-	--dracula-green: #50fa7b;
-	--dracula-orange: #ffb86c;
-	--dracula-pink: #ff79c6;
-	--dracula-purple: #bd93f9;
-	--dracula-red: #ff5555;
-	--dracula-yellow: #f1fa8c;
-	--dracula-selection: #44475a;
-	--dracula-ansi-black: #21222c;
-
-	--text-color: var(--dracula-foreground);
-	--border-color: var(--dracula-current-line);
-	--standout-bg-color: var(--dracula-ansi-black);
-	--hover-background-color: var(--dracula-selection);
-	--hover-text-color: var(--dracula-foreground);
-	--header-hover-background-color: var(--dracula-selection);
-	--header-hover-text-color: var(--dracula-foreground);
-	--disabled-background-color: var(--dracula-current-line);
-	--disabled-text-color: var(--dracula-comment);
-
-	--karma-good: var(--dracula-green);
-	--karma-bad: var(--dracula-red);
-	--karma-warning: var(--dracula-yellow);
-	--karma-severe: var(--dracula-orange);
-	--karma-important: var(--dracula-purple);
-	--karma-note: var(--dracula-cyan);
-	--karma-info: var(--dracula-current-line);
-	--karma-old: var(--dracula-comment);
-
-	--karma-good-fg: var(--dracula-green);
-	--karma-bad-fg: var(--dracula-red);
-	--karma-warning-fg: var(--dracula-yellow);
-	--karma-severe-fg: var(--dracula-orange);
-	--karma-important-fg: var(--dracula-purple);
-	--karma-note-fg: var(--dracula-cyan);
-	--karma-info-fg: var(--dracula-comment);
-	--karma-old-fg: var(--dracula-comment);
-}
-
-body {
-	background-color: var(--dracula-background);
-	color: var(--dracula-foreground);
-}
-
-header {
-	background-color: var(--dracula-ansi-black);
-	border-bottom: 1px solid var(--dracula-current-line);
-	box-shadow: none;
-	color: var(--dracula-foreground);
-}
-
-#sidebar-toggler-button,
-#sidebar-toggler-button.neutral,
-header .theme-toggle,
-header .theme-toggle.neutral,
-header .search-trigger,
-header .search-trigger.neutral {
-	background-color: transparent;
-	border: 0;
-	color: var(--dracula-foreground);
-}
-
-#sidebar-toggler-button:hover,
-header .theme-toggle:hover,
-header .search-trigger:hover,
-header .user-info:hover {
-	background-color: var(--header-hover-background-color);
-	color: var(--header-hover-text-color);
-}
-
-aside,
-#sidebar {
-	background-color: var(--dracula-ansi-black);
-	color: var(--dracula-foreground);
-	border-color: var(--dracula-current-line);
-	box-shadow: 0.15em 0 0.6em rgba(33, 34, 44, 0.85);
-}
-
-aside a,
-aside a:visited {
-	color: var(--dracula-foreground);
-}
-
-aside a:hover,
-aside :is(ul, menu) li a:hover,
-aside .nav-section-header:hover {
-	background-color: var(--dracula-selection);
-	color: var(--dracula-foreground);
-}
-
-section {
-	background-color: var(--dracula-ansi-black);
-	color: var(--dracula-foreground);
-	box-shadow: 0 0 0.5em rgba(33, 34, 44, 0.9);
-	border-color: var(--dracula-current-line);
-}
-
-section .section-header,
-section .section-subheader {
-	background-color: var(--dracula-ansi-black);
-	border-bottom-color: var(--dracula-current-line);
-	color: var(--dracula-foreground);
-}
-
-button,
-.button {
-	background-color: var(--dracula-current-line);
-	border: 1px solid var(--dracula-comment);
-	color: var(--dracula-foreground);
-}
-
-button:hover,
-.button:hover {
-	background-color: var(--dracula-selection);
-	color: var(--dracula-foreground);
-}
-
-button.good,
-.button.good {
-	background-color: var(--dracula-green);
-	border-color: var(--dracula-green);
-	color: var(--dracula-ansi-black);
-}
-
-button.bad,
-.button.bad {
-	background-color: var(--dracula-red);
-	border-color: var(--dracula-red);
-	color: var(--dracula-foreground);
-}
-
-button.warning,
-.button.warning {
-	background-color: var(--dracula-yellow);
-	border-color: var(--dracula-yellow);
-	color: var(--dracula-ansi-black);
-}
-
-button.neutral,
-.button.neutral {
-	background-color: var(--dracula-selection);
-	border-color: var(--dracula-comment);
-	color: var(--dracula-foreground);
-}
-
-input,
-select,
-textarea {
-	background-color: var(--dracula-background);
-	border: 1px solid var(--dracula-current-line);
-	color: var(--dracula-foreground);
-}
-
-a {
-	color: var(--dracula-pink);
-}
-
-footer {
-	color: var(--dracula-comment);
-	border-top-color: var(--dracula-current-line);
-}
-
-.subtle {
-	color: var(--dracula-comment);
-}