picocrank 1.28.1 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",

package/styles/picocrank-extensions.css

@@ -90,6 +90,8 @@
 	--danger-zone-summary-hover-bg: var(--karma-bad-tint);
 	--danger-zone-warning-fg: var(--muted-text-color);
 	--danger-zone-focus-outline: var(--karma-bad-border);
+
+	--picocrank-fixed-header-offset: 4em;
 }
 
 table thead th {
@@ -103,7 +105,17 @@ section .section-content {
 	min-width: 0;
 }
 
-/* Femtocrank 2.7 compacts section toolbars; keep pre-upgrade default button padding. */
+/*
+ * Femtocrank 2.7 compacts section toolbars; keep pre-upgrade default button padding.
+ * Toolbar is a flex row beside the section title — buttons must not shrink when a
+ * search or filter control shares the row (avoid width: 100% on flex siblings).
+ */
+section .section-header [role="toolbar"] {
+	flex: 1 1 auto;
+	min-width: 0;
+	justify-content: flex-end;
+}
+
 section .section-header [role="toolbar"] button,
 section .section-header [role="toolbar"] .button {
 	padding-top: .4em;
@@ -112,6 +124,12 @@ section .section-header [role="toolbar"] .button {
 	padding-right: 1em;
 	min-width: 0;
 	line-height: normal;
+	flex-shrink: 0;
+}
+
+section .section-header [role="toolbar"] > :not(button):not(.button) {
+	flex: 1 1 auto;
+	min-width: 0;
 }
 
 section.narrow {
@@ -152,6 +170,27 @@ select.field-invalid:focus-visible {
 	outline: 2px solid var(--karma-bad-border);
 	outline-offset: 2px;
 }
+
+/*
+ * Fixed header layout: pin the app header and offset sidebar + main content.
+ * Apply .layout-fixed-header on a wrapper whose direct children are header and #layout.
+ */
+.layout-fixed-header > header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 5;
+}
+
+.layout-fixed-header > #layout aside {
+	z-index: 3;
+	padding-top: var(--picocrank-fixed-header-offset);
+}
+
+.layout-fixed-header > #layout main {
+	padding-top: var(--picocrank-fixed-header-offset);
+}
 }
 
 /*

package/vue/components/Pagination.vue

@@ -108,12 +108,12 @@ const props = defineProps({
 const emit = defineEmits(['page-change', 'page-size-change', 'update:page', 'update:pageSize'])
 
 const localPageSize = ref(props.pageSize)
-const localCurrentPage = ref(props.currentPage)
 
-// Computed property to get the current page value (supports both v-model and regular props)
 const currentPageValue = computed(() => {
-  // When using v-model, the page prop will be reactive and change
-  // When using regular props, currentPage will be reactive
+  // `page` supports v-model; `currentPage` is the plain prop. Both default to 1.
+  if (props.currentPage !== 1) {
+    return props.currentPage
+  }
   return props.page
 })
 
@@ -124,28 +124,18 @@ const endItem = computed(() => Math.min(currentPageValue.value * localPageSize.v
 
 function goToPage(page) {
   if (page >= 1 && page <= totalPages.value && page !== currentPageValue.value) {
-    localCurrentPage.value = page
     emit('page-change', page)
     emit('update:page', page)
   }
 }
 
 function handlePageSizeChange() {
-  localCurrentPage.value = 1
   emit('page-size-change', localPageSize.value)
   emit('update:pageSize', localPageSize.value)
   emit('page-change', 1)
   emit('update:page', 1)
 }
 
-watch(() => props.currentPage, (newPage) => {
-  localCurrentPage.value = newPage
-})
-
-watch(() => props.page, (newPage) => {
-  localCurrentPage.value = newPage
-})
-
 watch(() => props.pageSize, (newSize) => {
   localPageSize.value = newSize
 })

package/vue/components/ReadOnlyTextArea.vue

@@ -1,19 +1,28 @@
 <template>
 	<div class="readonly-textarea">
-		<div v-if="label || showCopyButton" class="readonly-textarea-header">
+		<div v-if="showHeader" class="readonly-textarea-header">
 			<label v-if="label" :for="textareaId">{{ label }}</label>
-			<div v-else class="fg1" />
-			<button
-				v-if="showCopyButton"
-				type="button"
-				class="readonly-textarea-copy"
-				:title="copied ? 'Copied' : 'Copy to clipboard'"
-				:disabled="!modelValue"
-				@click="copy"
+			<div v-if="pushActionsEnd" class="fg1" />
+			<div
+				v-if="showActions"
+				class="readonly-textarea-actions"
+				:class="{ 'readonly-textarea-actions--leading': hasActions }"
 			>
-				<HugeiconsIcon :icon="copied ? CopyCheckIcon : Copy01Icon" width="1em" height="1em" />
-				<span>{{ copied ? copiedLabel : copyLabel }}</span>
-			</button>
+				<div v-if="hasActions" class="readonly-textarea-actions-slot">
+					<slot name="actions" />
+				</div>
+				<button
+					v-if="showCopyButton"
+					type="button"
+					class="readonly-textarea-copy"
+					:title="copied ? 'Copied' : 'Copy to clipboard'"
+					:disabled="!modelValue"
+					@click="copy"
+				>
+					<HugeiconsIcon :icon="copied ? CopyCheckIcon : Copy01Icon" width="1em" height="1em" />
+					<span>{{ copied ? copiedLabel : copyLabel }}</span>
+				</button>
+			</div>
 		</div>
 		<textarea
 			:id="textareaId"
@@ -28,7 +37,7 @@
 </template>
 
 <script setup>
-import { ref, computed, useId, watch } from 'vue'
+import { ref, computed, useId, useSlots, watch, Comment } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
 
@@ -85,6 +94,26 @@ const props = defineProps({
 
 const emit = defineEmits(['copy', 'copy-error', 'update:modelValue'])
 
+const slots = useSlots()
+
+const hasActions = computed(() => {
+	const render = slots.actions
+	if (!render) {
+		return false
+	}
+	return render().some((vnode) => vnode.type !== Comment)
+})
+
+const showActions = computed(() => hasActions.value || props.showCopyButton)
+
+const showHeader = computed(
+	() => Boolean(props.label) || showActions.value,
+)
+
+const pushActionsEnd = computed(
+	() => showActions.value && !hasActions.value,
+)
+
 const generatedId = useId()
 const textareaId = props.id || `readonly-textarea-${generatedId}`
 const textareaRef = ref(null)
@@ -180,12 +209,13 @@ defineExpose({
 	flex-direction: column;
 	gap: 0.5rem;
 	width: 100%;
+	min-width: 0;
+	max-width: 100%;
 }
 
 .readonly-textarea-header {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	gap: 0.75rem;
 }
 
@@ -195,22 +225,46 @@ defineExpose({
 
 .fg1 {
 	flex: 1;
+	min-width: 0;
+}
+
+.readonly-textarea-actions {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.readonly-textarea-actions--leading {
+	margin-left: 0;
+}
+
+.readonly-textarea-actions-slot {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	flex-wrap: wrap;
 }
 
 .readonly-textarea-copy {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.35em;
+	flex-shrink: 0;
 }
 
 .readonly-textarea textarea {
 	width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
 	resize: vertical;
 	margin: 0;
 }
 
 .readonly-textarea textarea.monospace {
 	font-family: monospace;
-	white-space: pre;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
 }
 </style>

package/vue/components/Sidebar.vue

@@ -107,7 +107,8 @@ import { HugeiconsIcon } from '@hugeicons/vue'
 import { Pin02Icon, PinIcon, ArrowDown01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
 import SidebarNavLink from './SidebarNavLink.vue'
 
-const STORAGE_KEY = 'picocrank-nav-sections-collapsed'
+const COLLAPSED_SECTIONS_STORAGE_KEY = 'picocrank-nav-sections-collapsed'
+const STUCK_STORAGE_KEY = 'picocrank-sidebar-stuck'
 const SIDEBAR_PANEL_ID = 'picocrank-sidebar'
 const TOGGLER_ID = 'sidebar-toggler-button'
 
@@ -118,8 +119,16 @@ const props = defineProps({
 	},
 })
 
+function loadStuckPreference() {
+	try {
+		return localStorage.getItem(STUCK_STORAGE_KEY) === 'true'
+	} catch {
+		return false
+	}
+}
+
 const isOpen = ref(false)
-const isStuck = ref(false)
+const isStuck = ref(loadStuckPreference())
 const sidebarRef = ref(null)
 const route = useRoute()
 const headingId = useId()
@@ -156,7 +165,7 @@ function isActive(link) {
 
 function loadCollapsedSections() {
 	try {
-		const raw = localStorage.getItem(STORAGE_KEY)
+		const raw = localStorage.getItem(COLLAPSED_SECTIONS_STORAGE_KEY)
 		if (!raw) return new Set()
 		const parsed = JSON.parse(raw)
 		return new Set(Array.isArray(parsed) ? parsed : [])
@@ -168,7 +177,7 @@ function loadCollapsedSections() {
 const collapsedSections = ref(loadCollapsedSections())
 
 function saveCollapsedSections() {
-	localStorage.setItem(STORAGE_KEY, JSON.stringify([...collapsedSections.value]))
+	localStorage.setItem(COLLAPSED_SECTIONS_STORAGE_KEY, JSON.stringify([...collapsedSections.value]))
 }
 
 function isSectionCollapsed(sectionId) {
@@ -244,6 +253,14 @@ watch(() => route.fullPath, () => {
 	expandSectionContainingActiveRoute()
 }, { immediate: true })
 
+watch(isStuck, (stuck) => {
+	try {
+		localStorage.setItem(STUCK_STORAGE_KEY, stuck ? 'true' : 'false')
+	} catch {
+		// ignore storage errors (private mode, quota, etc.)
+	}
+})
+
 function toggleStick() {
 	isStuck.value = !isStuck.value
 }

package/vue/examples/ReadOnlyTextAreaExample.vue

@@ -18,7 +18,11 @@
 				label="Application log"
 				:rows="10"
 				@copy="onCopy"
-			/>
+			>
+				<template #actions>
+					<button type="button" @click="refreshDiagnostics">Refresh log</button>
+				</template>
+			</ReadOnlyTextArea>
 
 			<ReadOnlyTextArea
 				v-model="environmentInfo"