picocrank 1.30.0 → 1.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.30.0",
+  "version": "1.31.1",
   "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

@@ -91,7 +91,13 @@
 	--danger-zone-warning-fg: var(--muted-text-color);
 	--danger-zone-focus-outline: var(--karma-bad-border);
 
-	--picocrank-fixed-header-offset: 4em;
+	/* Matches Femtocrank header min-height (logo 2em + .5em padding). */
+	--picocrank-fixed-header-offset: 3em;
+}
+
+/* No fixed header → no sidebar/main offset. */
+html:not(:has(header.fixed)) {
+	--picocrank-fixed-header-offset: 0px;
 }
 
 table thead th {
@@ -172,9 +178,23 @@ select.field-invalid:focus-visible {
 }
 
 /*
- * 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.
+ * Fixed header layout: pin the app header and offset main content.
+ * Prefer Header's `fixed` prop (adds Femtocrank `.fixed` on <header>).
+ * Sidebar top/height use --picocrank-fixed-header-offset in Sidebar.vue
+ * (unlayered) so they are not overridden by stuck-mode defaults.
+ * Alternatively wrap with .layout-fixed-header when header and #layout are direct children.
  */
+header.fixed {
+	top: 0;
+	left: 0;
+	z-index: 5;
+}
+
+header.fixed ~ aside,
+header.fixed ~ #layout aside {
+	z-index: 3;
+}
+
 .layout-fixed-header > header {
 	position: fixed;
 	top: 0;
@@ -183,15 +203,20 @@ select.field-invalid:focus-visible {
 	z-index: 5;
 }
 
+.layout-fixed-header > aside,
 .layout-fixed-header > #layout aside {
 	z-index: 3;
-	padding-top: var(--picocrank-fixed-header-offset);
+}
 }
 
-.layout-fixed-header > #layout main {
+/*
+ * Unlayered so this wins over @layer components (same issue as Sidebar offsets).
+ * Pads #content below a fixed header — clears the chrome and leaves a readable gap.
+ */
+header.fixed ~ #layout > #content,
+.layout-fixed-header > #layout > #content {
 	padding-top: var(--picocrank-fixed-header-offset);
 }
-}
 
 /*
  * Responsive column priorities: classes col-priority-1 … col-priority-5 on th/td only

package/vue/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-	<header>
+	<header :class="{ fixed }">
 		<div
 			:id = "showSidebarChrome ? 'sidebar-button' : null"
 			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !showSidebarChrome && showBranding }]"
@@ -146,6 +146,10 @@
 			type: Boolean,
 			default: false,
 		},
+		fixed: {
+			type: Boolean,
+			default: true,
+		},
 		navigation: {
 			type: Object,
 			default: null,

package/vue/components/ReadOnlyTextArea.vue

@@ -6,11 +6,21 @@
 			<div
 				v-if="showActions"
 				class="readonly-textarea-actions"
-				:class="{ 'readonly-textarea-actions--leading': hasActions }"
 			>
 				<div v-if="hasActions" class="readonly-textarea-actions-slot">
 					<slot name="actions" />
 				</div>
+				<button
+					v-if="showClearButton"
+					type="button"
+					class="readonly-textarea-clear neutral"
+					title="Clear contents"
+					:disabled="!modelValue"
+					@click="clear"
+				>
+					<HugeiconsIcon :icon="Delete02Icon" width="1em" height="1em" />
+					<span>{{ clearLabel }}</span>
+				</button>
 				<button
 					v-if="showCopyButton"
 					type="button"
@@ -39,7 +49,7 @@
 <script setup>
 import { ref, computed, useId, useSlots, watch, Comment } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
+import { Copy01Icon, CopyCheckIcon, Delete02Icon } from '@hugeicons/core-free-icons'
 
 const props = defineProps({
 	modelValue: {
@@ -70,6 +80,10 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showClearButton: {
+		type: Boolean,
+		default: false,
+	},
 	copyLabel: {
 		type: String,
 		default: 'Copy',
@@ -78,6 +92,10 @@ const props = defineProps({
 		type: String,
 		default: 'Copied',
 	},
+	clearLabel: {
+		type: String,
+		default: 'Clear',
+	},
 	copiedFeedbackMs: {
 		type: Number,
 		default: 2000,
@@ -92,27 +110,40 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['copy', 'copy-error', 'update:modelValue'])
+const emit = defineEmits(['copy', 'copy-error', 'clear', 'update:modelValue'])
 
 const slots = useSlots()
 
-const hasActions = computed(() => {
+const slotActionCount = computed(() => {
 	const render = slots.actions
 	if (!render) {
-		return false
+		return 0
 	}
-	return render().some((vnode) => vnode.type !== Comment)
+	return render().filter((vnode) => vnode.type !== Comment).length
 })
 
-const showActions = computed(() => hasActions.value || props.showCopyButton)
+const hasActions = computed(() => slotActionCount.value > 0)
+
+const builtInActionCount = computed(() => {
+	let count = 0
+	if (props.showClearButton) count++
+	if (props.showCopyButton) count++
+	return count
+})
+
+const actionButtonCount = computed(
+	() => slotActionCount.value + builtInActionCount.value,
+)
+
+const showActions = computed(
+	() => actionButtonCount.value > 0,
+)
 
 const showHeader = computed(
 	() => Boolean(props.label) || showActions.value,
 )
 
-const pushActionsEnd = computed(
-	() => showActions.value && !hasActions.value,
-)
+const pushActionsEnd = computed(() => showActions.value)
 
 const generatedId = useId()
 const textareaId = props.id || `readonly-textarea-${generatedId}`
@@ -156,6 +187,7 @@ function appendSection(sectionName) {
 function clear() {
 	content.value = ''
 	emit('update:modelValue', content.value)
+	emit('clear')
 }
 
 function getContentAsString() {
@@ -236,10 +268,6 @@ defineExpose({
 	flex-shrink: 0;
 }
 
-.readonly-textarea-actions--leading {
-	margin-left: 0;
-}
-
 .readonly-textarea-actions-slot {
 	display: inline-flex;
 	align-items: center;
@@ -247,7 +275,8 @@ defineExpose({
 	flex-wrap: wrap;
 }
 
-.readonly-textarea-copy {
+.readonly-textarea-copy,
+.readonly-textarea-clear {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.35em;

package/vue/components/Section.vue

@@ -7,9 +7,6 @@
 						<HugeiconsIcon
 							:icon="icon"
 							class="section-title-icon"
-							width="1.1em"
-							height="1.1em"
-							:strokeWidth="2"
 							aria-hidden="true"
 						/>
 						<span class="section-title-text">

package/vue/components/Sidebar.vue

@@ -3,7 +3,7 @@
 		:id="SIDEBAR_PANEL_ID"
 		ref="sidebarRef"
 		class="sidebar"
-		:class="{ 'shown': isOpen, 'stuck': isStuck }"
+		:class="{ 'shown': isVisible, 'stuck': isStuck }"
 		aria-label="Sidebar"
 		:aria-hidden="isVisible ? undefined : 'true'"
 		:inert="isVisible ? undefined : true"
@@ -25,14 +25,14 @@
 						:icon="Pin02Icon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 					<HugeiconsIcon
 						v-else
 						:icon="PinIcon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 				</span>
 			</button>
@@ -274,8 +274,13 @@ function unstick() {
 }
 
 function toggle() {
+	if (isStuck.value) {
+		isStuck.value = false
+		isOpen.value = false
+		return
+	}
+
 	isOpen.value = !isOpen.value
-	isStuck.value = false
 }
 
 function open() {
@@ -284,7 +289,6 @@ function open() {
 
 function close() {
 	isOpen.value = false
-	isStuck.value = false
 }
 
 function isLinkActive(link) {
@@ -397,6 +401,34 @@ defineExpose({
 </script>
 
 <style scoped>
+.sidebar {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	/*
+	 * Sit fully below a fixed Header (Navigation, pin, and scrollbar).
+	 * Offset is 0 when no header.fixed is present (see picocrank-extensions).
+	 */
+	top: var(--picocrank-fixed-header-offset);
+	height: calc(100vh - var(--picocrank-fixed-header-offset));
+	max-height: calc(100vh - var(--picocrank-fixed-header-offset));
+}
+
+/*
+ * Stuck mode: same viewport band as overlay mode; scroll the whole contents
+ * instead of growing with content (Femtocrank defaults to height: auto).
+ */
+.sidebar.stuck {
+	align-self: flex-start;
+	position: sticky;
+	top: var(--picocrank-fixed-header-offset);
+	height: calc(100vh - var(--picocrank-fixed-header-offset));
+	max-height: calc(100vh - var(--picocrank-fixed-header-offset));
+}
+
 h2 {
 	padding: .75em;
 }
@@ -410,6 +442,28 @@ button {
 	border: 0;
 }
 
+.stick-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	align-self: stretch;
+	flex-shrink: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 1em;
+	padding-right: 1em;
+	border-radius: 0;
+	color: var(--text-color);
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.stick-toggle:hover,
+.stick-toggle:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
+	color: var(--hover-text-color);
+}
+
 .navigation-links,
 .nav-section-links {
 	list-style: none;

package/vue/components/StatusCard.vue

@@ -0,0 +1,211 @@
+<template>
+	<component
+		:is="rootComponent"
+		v-bind="rootBindings"
+		:class="rootClasses"
+	>
+		<div
+			v-if="karma"
+			class="status-card-bar"
+			:class="{ 'status-card-bar--labeled': Boolean(barLabel) }"
+		>
+			<span
+				v-if="barLabel"
+				class="status-card-bar-label"
+			>{{ barLabel }}</span>
+		</div>
+		<div class="status-card-body">
+			<slot />
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps({
+	karma: {
+		type: String,
+		default: '',
+		validator: (value) => (
+			value === ''
+			|| ['info', 'note', 'success', 'good', 'warning', 'severe', 'critical', 'error', 'bad', 'old'].includes(value)
+		),
+	},
+	barLabel: {
+		type: String,
+		default: '',
+	},
+	align: {
+		type: String,
+		default: 'start',
+		validator: (value) => ['start', 'center'].includes(value),
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	to: {
+		type: [String, Object],
+		default: null,
+	},
+	href: {
+		type: String,
+		default: '',
+	},
+})
+
+const isLink = computed(() => Boolean(props.to || props.href))
+
+const rootComponent = computed(() => {
+	if (props.to) {
+		return RouterLink
+	}
+	if (props.href) {
+		return 'a'
+	}
+	return 'div'
+})
+
+const rootBindings = computed(() => {
+	if (props.to) {
+		return { to: props.to }
+	}
+	if (props.href) {
+		return { href: props.href }
+	}
+	return {}
+})
+
+const rootClasses = computed(() => ({
+	'status-card': true,
+	'status-card--link': isLink.value,
+	[`status-card--${props.karma}`]: Boolean(props.karma),
+	[`status-card--align-${props.align}`]: true,
+	'status-card--compact': props.compact,
+}))
+</script>
+
+<style scoped>
+.status-card {
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	padding: 0;
+	overflow: hidden;
+	background: transparent;
+	border: 1px solid var(--nav-grid-border);
+	border-radius: 8px;
+	color: inherit;
+	text-align: left;
+	transition: all 0.2s ease;
+}
+
+a.status-card {
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.status-card:hover {
+	border-color: var(--nav-grid-accent-fg);
+	background: var(--nav-grid-hover-bg);
+	color: var(--text-color);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 8px var(--nav-grid-hover-shadow);
+}
+
+.status-card-bar {
+	position: relative;
+	flex: 0 0 0.35em;
+	width: 0.35em;
+}
+
+.status-card-bar--labeled {
+	flex-basis: 1.35em;
+	width: 1.35em;
+}
+
+.status-card-bar-label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(270deg);
+	font-size: 0.65em;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	line-height: 1;
+	text-transform: uppercase;
+	white-space: nowrap;
+	color: var(--text-color);
+	user-select: none;
+}
+
+.status-card-body {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: flex-start;
+	gap: 0.25rem;
+	min-width: 0;
+	padding: 1.25rem 0.75rem;
+}
+
+.status-card--compact .status-card-body {
+	padding: 0.75rem 0.5rem;
+	gap: 0.15rem;
+}
+
+.status-card--align-start .status-card-body {
+	align-items: flex-start;
+	text-align: left;
+}
+
+.status-card--align-center .status-card-body {
+	align-items: center;
+	text-align: center;
+}
+
+.status-card-body :deep(h4) {
+	margin: 0;
+}
+
+.status-card-body :deep(.subtle) {
+	margin-top: 0.35rem;
+}
+
+.status-card--compact .status-card-body :deep(.subtle) {
+	margin-top: 0.2rem;
+}
+
+.status-card--good .status-card-bar,
+.status-card--success .status-card-bar {
+	background-color: var(--karma-good-tint);
+}
+
+.status-card--bad .status-card-bar,
+.status-card--critical .status-card-bar,
+.status-card--error .status-card-bar {
+	background-color: var(--karma-bad-tint);
+}
+
+.status-card--warning .status-card-bar {
+	background-color: var(--karma-warning-tint);
+}
+
+.status-card--severe .status-card-bar {
+	background-color: var(--karma-severe-tint);
+}
+
+.status-card--note .status-card-bar {
+	background-color: var(--karma-note-tint);
+}
+
+.status-card--info .status-card-bar {
+	background-color: var(--karma-info-tint);
+}
+
+.status-card--old .status-card-bar {
+	background-color: var(--karma-old-tint);
+}
+</style>

package/vue/examples/Admin.vue

@@ -8,67 +8,99 @@
 			<div class="admin-section">
 				<h3>System Overview</h3>
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
+
+				<FormLayout @submit.prevent>
+					<FormField
+						label="Grid"
+						component-has-label
+						description="How many StatusCard columns to show."
+					>
+						<RadioGroup
+							v-model="gridLayout"
+							name="status-card-grid"
+							variant="boolean"
+							:options="gridLayoutOptions"
+						/>
+					</FormField>
+
+					<FormField label="Content align" component-has-label>
+						<RadioGroup
+							v-model="cardAlign"
+							name="status-card-align"
+							variant="boolean"
+							:options="alignOptions"
+						/>
+					</FormField>
+
+					<FormField label="Bar labels" component-has-label>
+						<RadioGroup
+							v-model="showBarLabels"
+							name="status-card-bar-labels"
+							variant="boolean"
+							:options="showHideOptions"
+						/>
+					</FormField>
+
+					<FormField label="Compact" component-has-label>
+						<RadioGroup
+							v-model="cardCompact"
+							name="status-card-compact"
+							variant="boolean"
+							:options="onOffOptions"
+						/>
+					</FormField>
+				</FormLayout>
 				
-				<div class="grid-boxed">
-					<div class="stat-display good">
-						<h4>Total Users</h4>
-						<span class="stat">1,247</span>
-						<span class="subtle">+12% from last month</span>
-					</div>
-					
-					<div class="stat-display bad">
-						<h4>Active Sessions</h4>
-						<span class="stat">89</span>
-						<span class="subtle">-3% from last hour</span>
-					</div>
-					
-					<div class="stat-display warning">
-						<h4>System Load</h4>
-						<span class="stat">67%</span>
-						<span class="subtle">Moderate</span>
-					</div>
-					
-					<div class="stat-display good">
-						<h4>Storage Used</h4>
-						<span class="stat">2.4 GB</span>
-						<span class="subtle">45% of total</span>
-					</div>
+				<div :class="gridClass">
+					<StatusCard
+						v-for="card in overviewCards"
+						:key="card.title"
+						:karma="card.karma"
+						:bar-label="showBarLabels ? card.barLabel : ''"
+						:align="cardAlign"
+						:compact="cardCompact"
+						:to="card.to"
+					>
+						<h4>{{ card.title }}</h4>
+						<span class="stat">{{ card.stat }}</span>
+						<span class="subtle">{{ card.subtle }}</span>
+					</StatusCard>
 				</div>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Recent Activity</h3>
-				<div class="activity-list">
-					<div class="activity-item">
-						<span class="activity-time">2 minutes ago</span>
-						<span class="activity-text">User "john.doe" logged in</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">5 minutes ago</span>
-						<span class="activity-text">New user account created</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">12 minutes ago</span>
-						<span class="activity-text">System backup completed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">1 hour ago</span>
-						<span class="activity-text">Database maintenance performed</span>
-					</div>
-					<div class="activity-item">
-						<span class="activity-time">2 hours ago</span>
-						<span class="activity-text">User "admin" updated settings</span>
-					</div>
-				</div>
+				<ul>
+					<li>
+						<span class="subtle">2 minutes ago</span>
+						— User "john.doe" logged in
+					</li>
+					<li>
+						<span class="subtle">5 minutes ago</span>
+						— New user account created
+					</li>
+					<li>
+						<span class="subtle">12 minutes ago</span>
+						— System backup completed
+					</li>
+					<li>
+						<span class="subtle">1 hour ago</span>
+						— Database maintenance performed
+					</li>
+					<li>
+						<span class="subtle">2 hours ago</span>
+						— User "admin" updated settings
+					</li>
+				</ul>
 			</div>
 			
 			<div class="admin-section">
 				<h3>Quick Actions</h3>
-				<div role = "toolbar">
-					<button class="action-btn">Create User</button>
-					<button class="action-btn">System Backup</button>
-					<button class="action-btn">View Logs</button>
-					<button class="action-btn">Settings</button>
+				<div role="toolbar">
+					<button type="button">Create User</button>
+					<button type="button">System Backup</button>
+					<button type="button">View Logs</button>
+					<button type="button">Settings</button>
 				</div>
 			</div>
 		</div>
@@ -76,6 +108,69 @@
 </template>
 
 <script setup>
-	// This is a placeholder admin view with dummy content
-	// No functionality implemented yet
+import { computed, ref } from 'vue'
+
+const showBarLabels = ref(true)
+const cardCompact = ref(false)
+const cardAlign = ref('start')
+const gridLayout = ref('3')
+
+const showHideOptions = [
+	{ label: 'Shown', value: true },
+	{ label: 'Hidden', value: false },
+]
+
+const onOffOptions = [
+	{ label: 'On', value: true },
+	{ label: 'Off', value: false },
+]
+
+const alignOptions = [
+	{ value: 'start', label: 'Start' },
+	{ value: 'center', label: 'Center' },
+]
+
+const gridLayoutOptions = [
+	{ value: '3', label: '3 columns' },
+	{ value: '2', label: '2 columns' },
+]
+
+const gridClass = computed(() => (
+	gridLayout.value === '2' ? 'grid-boxed-2' : 'grid-boxed'
+))
+
+const overviewCards = [
+	{
+		karma: 'good',
+		barLabel: 'Users',
+		title: 'Total Users',
+		stat: '1,247',
+		subtle: '+12% from last month',
+		to: { name: 'UserDetails' },
+	},
+	{
+		karma: 'bad',
+		barLabel: 'Live',
+		title: 'Active Sessions',
+		stat: '89',
+		subtle: '-3% from last hour',
+		to: { name: 'TableExample' },
+	},
+	{
+		karma: 'warning',
+		barLabel: 'Load',
+		title: 'System Load',
+		stat: '67%',
+		subtle: 'Moderate',
+		to: { name: 'StatusExample' },
+	},
+	{
+		karma: 'good',
+		barLabel: 'Disk',
+		title: 'Storage Used',
+		stat: '2.4 GB',
+		subtle: '45% of total',
+		to: { name: 'ViewItem', params: { id: '1' } },
+	},
+]
 </script>

package/vue/examples/App.vue

@@ -222,11 +222,6 @@
 		registerSidebarNavigation(navigation.value, { onHelloWorld: helloWorld })
 		registerTopBarNavigation(topBarNavigation.value)
 
-		if (sidebar.value) {
-			sidebar.value.open();
-			sidebar.value.stick();
-		}
-
 		registerQuickSearchItems()
 	});
 

package/vue/examples/ReadOnlyTextAreaExample.vue

@@ -17,7 +17,9 @@
 				v-model="diagnosticLog"
 				label="Application log"
 				:rows="10"
+				show-clear-button
 				@copy="onCopy"
+				@clear="onClear"
 			>
 				<template #actions>
 					<button type="button" @click="refreshDiagnostics">Refresh log</button>
@@ -28,6 +30,7 @@
 				v-model="environmentInfo"
 				label="Environment (JSON)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="json"
 			/>
@@ -37,14 +40,99 @@
 				v-model="yamlConfig"
 				label="Configuration (YAML)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="yaml"
 			/>
 
-			<ReadOnlyTextArea
-				:rows="4"
-				placeholder="No diagnostics available."
-			/>
+			<div class="readonly-playground">
+				<p class="readonly-playground-intro">
+					Toggle options on the playground instance below to explore every
+					<code>ReadOnlyTextArea</code> prop and the actions slot.
+				</p>
+
+				<div
+					class="readonly-playground-controls"
+					role="group"
+					aria-label="ReadOnlyTextArea playground options"
+				>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.labelEnabled" type="checkbox" />
+						Label
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showCopyButton" type="checkbox" />
+						Copy button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showClearButton" type="checkbox" />
+						Clear button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showActions" type="checkbox" />
+						Actions slot
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.monospace" type="checkbox" />
+						Monospace
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.markdownTicks" type="checkbox" />
+						Markdown ticks
+					</label>
+					<label class="readonly-example-toggle">
+						<input
+							v-model="playground.markdownLangJson"
+							type="checkbox"
+							:disabled="!playground.markdownTicks"
+						/>
+						Markdown lang: json
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.usePlaceholder" type="checkbox" />
+						Placeholder
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.customButtonLabels" type="checkbox" />
+						Custom button labels
+					</label>
+					<label class="readonly-example-toggle readonly-playground-rows">
+						<span>Rows</span>
+						<input
+							v-model.number="playground.rows"
+							type="number"
+							min="2"
+							max="24"
+						/>
+					</label>
+				</div>
+
+				<ReadOnlyTextArea
+					v-model="playgroundContent"
+					:label="playground.labelEnabled ? 'Playground output' : ''"
+					:rows="playground.rows"
+					:placeholder="playground.usePlaceholder ? 'No diagnostics available.' : ''"
+					:monospace="playground.monospace"
+					:show-copy-button="playground.showCopyButton"
+					:show-clear-button="playground.showClearButton"
+					:copy-label="playground.customButtonLabels ? 'Copy all' : undefined"
+					:copied-label="playground.customButtonLabels ? 'Copied!' : undefined"
+					:clear-label="playground.customButtonLabels ? 'Reset' : undefined"
+					:markdown-ticks="playground.markdownTicks"
+					:markdown-lang="playground.markdownTicks && playground.markdownLangJson ? 'json' : ''"
+					@copy="onPlaygroundCopy"
+					@clear="onPlaygroundClear"
+					@copy-error="onPlaygroundCopyError"
+				>
+					<template v-if="playground.showActions" #actions>
+						<button type="button" @click="fillPlaygroundContent">Fill sample</button>
+					</template>
+				</ReadOnlyTextArea>
+
+				<p v-if="playgroundFeedback" class="copy-feedback subtle">
+					{{ playgroundFeedback }}
+				</p>
+			</div>
 
 			<p v-if="lastCopied" class="copy-feedback subtle">
 				Copied {{ lastCopied.length > 60 ? `${lastCopied.slice(0, 60)}…` : lastCopied }}
@@ -62,8 +150,40 @@ const diagnosticLog = ref('')
 const environmentInfo = ref('')
 const yamlConfig = ref('')
 const lastCopied = ref('')
+const playgroundFeedback = ref('')
 const yamlConfigRef = ref(null)
 
+const playground = ref({
+	labelEnabled: false,
+	showCopyButton: true,
+	showClearButton: false,
+	showActions: false,
+	monospace: true,
+	markdownTicks: false,
+	markdownLangJson: false,
+	usePlaceholder: false,
+	customButtonLabels: false,
+	rows: 4,
+})
+
+function buildPlaygroundSample() {
+	return [
+		'Playground sample output',
+		'Toggle the checkboxes above to try label, buttons, markdown fences, and monospace.',
+		'',
+		'status: ok',
+		'items: 3',
+	].join('\n')
+}
+
+const playgroundContent = ref(buildPlaygroundSample())
+
+function fillPlaygroundContent() {
+	playground.value.usePlaceholder = false
+	playgroundContent.value = buildPlaygroundSample()
+	playgroundFeedback.value = 'Filled playground with sample content.'
+}
+
 function buildDiagnosticLog() {
 	const now = new Date().toISOString()
 	return [
@@ -122,6 +242,23 @@ function onCopy(value) {
 	lastCopied.value = value.split('\n')[0]
 }
 
+function onClear() {
+	lastCopied.value = ''
+}
+
+function onPlaygroundCopy(value) {
+	playgroundFeedback.value = `Copied ${value.split('\n').length} line(s).`
+}
+
+function onPlaygroundClear() {
+	playgroundContent.value = ''
+	playgroundFeedback.value = 'Playground cleared.'
+}
+
+function onPlaygroundCopyError(error) {
+	playgroundFeedback.value = `Copy failed: ${error?.message ?? error}`
+}
+
 refreshDiagnostics()
 </script>
 
@@ -140,4 +277,34 @@ refreshDiagnostics()
 	margin: 0;
 	font-size: 0.875rem;
 }
+
+.readonly-playground {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.readonly-playground-intro {
+	margin: 0;
+}
+
+.readonly-example-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.875rem;
+	cursor: pointer;
+	user-select: none;
+}
+
+.readonly-playground-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem 1rem;
+}
+
+.readonly-playground-rows input[type='number'] {
+	width: 4rem;
+	padding: 0.15rem 0.35rem;
+}
 </style>