pict-section-recordset 1.1.0 → 1.2.0

package/example_applications/bookstore/views/PictView-Bookstore-Navigation.js

@@ -1,228 +0,0 @@
-const libPictView = require('pict-view');
-
-const _ViewConfiguration =
-{
-	ViewIdentifier: "Bookstore-Navigation",
-
-	DefaultRenderable: "Bookstore-Navigation-Content",
-	DefaultDestinationAddress: "#Bookstore-Navigation-Container",
-
-	AutoRender: false,
-
-	CSS: /*css*/`
-		#Bookstore-Navigation-Container .pure-menu-heading
-		{
-			font-size: 110%;
-			color: var(--theme-color-background-panel, #fff);
-			margin: 0;
-			background: #E76F51;
-			padding: 0.75em 0.6em;
-		}
-		.bookstore-nav-session
-		{
-			padding: 0.6em;
-			border-top: 1px solid var(--theme-color-text-primary, #333);
-			font-size: 0.8rem;
-			color: var(--theme-color-text-muted, #999);
-		}
-		.bookstore-nav-session .dot
-		{
-			display: inline-block;
-			width: 8px;
-			height: 8px;
-			border-radius: 50%;
-			background: #2A9D8F;
-			box-shadow: 0 0 4px rgba(42,157,143,0.5);
-			margin-right: 0.35em;
-		}
-		.bookstore-nav-session-name
-		{
-			display: block;
-			color: #D4A373;
-			font-weight: 600;
-			margin-top: 0.25em;
-		}
-		.bookstore-nav-logout
-		{
-			display: block;
-			margin-top: 0.5em;
-			background: #E76F51;
-			color: var(--theme-color-background-panel, #fff);
-			border: none;
-			padding: 0.35em 0.75em;
-			border-radius: 4px;
-			font-size: 0.75rem;
-			font-weight: 600;
-			cursor: pointer;
-			width: 100%;
-			text-align: center;
-		}
-		.bookstore-nav-logout:hover
-		{
-			background: #C45A3E;
-		}
-		/* Preprocessor toggle section */
-		.bookstore-nav-preprocessor
-		{
-			padding: 0.6em;
-			border-top: 1px solid var(--theme-color-text-primary, #333);
-			font-size: 0.75rem;
-			color: var(--theme-color-text-muted, #999);
-		}
-		.bookstore-nav-preprocessor-label
-		{
-			display: block;
-			margin-bottom: 0.35em;
-			font-weight: 600;
-			color: #D4A373;
-			font-size: 0.7rem;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-		}
-		.bookstore-preprocessor-toggle
-		{
-			position: relative;
-			display: inline-block;
-			width: 36px;
-			height: 20px;
-			vertical-align: middle;
-		}
-		.bookstore-preprocessor-toggle input
-		{
-			opacity: 0;
-			width: 0;
-			height: 0;
-		}
-		.bookstore-preprocessor-slider
-		{
-			position: absolute;
-			cursor: pointer;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background-color: var(--theme-color-text-secondary, #555);
-			transition: background-color 0.2s;
-			border-radius: 20px;
-		}
-		.bookstore-preprocessor-slider:before
-		{
-			position: absolute;
-			content: "";
-			height: 14px;
-			width: 14px;
-			left: 3px;
-			bottom: 3px;
-			background-color: var(--theme-color-background-panel, #fff);
-			transition: transform 0.2s;
-			border-radius: 50%;
-		}
-		.bookstore-preprocessor-toggle input:checked + .bookstore-preprocessor-slider
-		{
-			background-color: #2A9D8F;
-		}
-		.bookstore-preprocessor-toggle input:checked + .bookstore-preprocessor-slider:before
-		{
-			transform: translateX(16px);
-		}
-		.bookstore-preprocessor-status
-		{
-			display: inline-block;
-			margin-left: 0.35em;
-			vertical-align: middle;
-			font-size: 0.7rem;
-			color: var(--theme-color-text-muted, #999);
-		}
-	`,
-
-	Templates:
-	[
-		{
-			Hash: "Bookstore-Navigation-Template",
-			Template: /*html*/`
-<span class="pure-menu-heading">Bookstore</span>
-<ul class="pure-menu-list">
-	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Dashboard')" class="pure-menu-link">Dashboard</a></li>
-	<li class="pure-menu-item menu-item-divided"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Books')" class="pure-menu-link">Books</a></li>
-	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Authors')" class="pure-menu-link">Authors</a></li>
-	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/BookStores')" class="pure-menu-link">Stores</a></li>
-	<li class="pure-menu-item menu-item-divided"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/About')" class="pure-menu-link">About</a></li>
-	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Legal')" class="pure-menu-link">Legal</a></li>
-</ul>
-<div class="bookstore-nav-preprocessor">
-	<span class="bookstore-nav-preprocessor-label">Template Preprocessor</span>
-	<label class="bookstore-preprocessor-toggle">
-		<input type="checkbox" id="Bookstore-Preprocessor-Toggle" onclick="{~P~}.PictApplication.togglePreprocessor()">
-		<span class="bookstore-preprocessor-slider"></span>
-	</label>
-	<span class="bookstore-preprocessor-status" id="Bookstore-Preprocessor-Status">Off</span>
-</div>
-<div class="bookstore-nav-session">
-	<span class="dot"></span> Signed in
-	<span class="bookstore-nav-session-name" id="Bookstore-Nav-UserName"></span>
-	<button class="bookstore-nav-logout" type="button" onclick="{~P~}.PictApplication.doLogout()">Log out</button>
-</div>
-`
-		}
-	],
-
-	Renderables:
-	[
-		{
-			RenderableHash: "Bookstore-Navigation-Content",
-			TemplateHash: "Bookstore-Navigation-Template",
-			DestinationAddress: "#Bookstore-Navigation-Container"
-		}
-	]
-};
-
-class BookstoreNavigationView extends libPictView
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, pOptions, pServiceHash);
-	}
-
-	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
-	{
-		// Populate the user name from session data
-		let tmpSession = this.pict.AppData.Session;
-		let tmpDisplayName = '';
-
-		if (tmpSession && tmpSession.UserRecord)
-		{
-			tmpDisplayName = tmpSession.UserRecord.FullName
-				|| tmpSession.UserRecord.LoginID
-				|| '';
-		}
-
-		let tmpUserNameElements = this.services.ContentAssignment.getElement('#Bookstore-Nav-UserName');
-		if (tmpUserNameElements && tmpUserNameElements.length > 0)
-		{
-			tmpUserNameElements[0].textContent = tmpDisplayName;
-		}
-
-		// Sync the preprocessor toggle state with the application's current state
-		let tmpApp = this.pict.PictApplication;
-		let tmpEnabled = tmpApp && tmpApp.isPreprocessorEnabled && tmpApp.isPreprocessorEnabled();
-
-		let tmpToggleElements = this.services.ContentAssignment.getElement('#Bookstore-Preprocessor-Toggle');
-		if (tmpToggleElements && tmpToggleElements.length > 0)
-		{
-			tmpToggleElements[0].checked = !!tmpEnabled;
-		}
-
-		let tmpStatusElements = this.services.ContentAssignment.getElement('#Bookstore-Preprocessor-Status');
-		if (tmpStatusElements && tmpStatusElements.length > 0)
-		{
-			tmpStatusElements[0].textContent = tmpEnabled ? 'On' : 'Off';
-			tmpStatusElements[0].style.color = tmpEnabled ? '#2A9D8F' : '#999';
-		}
-
-		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
-	}
-}
-
-module.exports = BookstoreNavigationView;
-
-module.exports.default_configuration = _ViewConfiguration;

package/example_applications/index.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Examples - Pict Example</title>
-	<!-- Red Rock Mesa Theme — Pict Example App -->
-	<style>
-		*, *::before, *::after { box-sizing: border-box; }
-		body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
-
-		/* --- Header Bar --- */
-		.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
-		.pict-example-badge { background: #E76F51; color: var(--theme-color-background-panel, #fff); padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
-		.pict-example-badge svg { width: 14px; height: 14px; fill: var(--theme-color-background-panel, #fff); flex-shrink: 0; }
-		.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
-		.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
-
-		/* --- Content Area --- */
-		.pict-example-content { padding: 1.5rem; }
-		.pict-example-content h1 { color: #264653; font-size: 1.5rem; margin: 0 0 1.25rem; }
-
-		/* --- Example List --- */
-		.example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
-		.example-list li { background: var(--theme-color-background-panel, #fff); border: 1px solid #D4A373; border-left: 4px solid #E76F51; border-radius: 4px; transition: border-color 0.15s, box-shadow 0.15s; }
-		.example-list li:hover { border-left-color: #264653; box-shadow: 0 2px 8px rgba(38,70,83,0.1); }
-		.example-list a { display: block; padding: 0.75rem 1rem; text-decoration: none; color: #264653; font-weight: 500; font-size: 0.95rem; }
-		.example-list a:hover { color: #E76F51; }
-	</style>
-</head>
-<body>
-	<div class="pict-example-header">
-		<div class="pict-example-badge">
-			<svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
-			Pict Example
-		</div>
-		<div class="pict-example-app-name">Example Index</div>
-		<div class="pict-example-module">pict-section-recordset</div>
-	</div>
-	<div class="pict-example-content">
-		<h1>Example Applications</h1>
-		<ul class="example-list">
-			<li><a href="simple_entity/dist/index.html">Simple Entity (Books &amp; Authors)</a></li>
-			<li><a href="mocks/list-view.html">Mock: List View</a></li>
-			<li><a href="mocks/book-read-view.html">Mock: Book Read View</a></li>
-			<li><a href="mocks/book-edit-view.html">Mock: Book Edit View</a></li>
-		</ul>
-	</div>
-</body>
-</html>

package/example_applications/mocks/book-edit-view.html

@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Book Edit View Mock - Pict Example</title>
-	<!-- Red Rock Mesa Theme — Pict Example App -->
-	<style>
-		*, *::before, *::after { box-sizing: border-box; }
-		body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
-
-		/* --- Header Bar --- */
-		.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
-		.pict-example-badge { background: #E76F51; color: var(--theme-color-background-panel, #fff); padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
-		.pict-example-badge svg { width: 14px; height: 14px; fill: var(--theme-color-background-panel, #fff); flex-shrink: 0; }
-		.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
-		.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
-
-		/* --- Content Area --- */
-		.pict-example-content { padding: 1.5rem; }
-
-		/* --- Record Header --- */
-		#RSP-Header-Container { margin-bottom: 1rem; }
-		#RSP-Header-Container input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 1.5rem; font-weight: 700; color: #264653; width: 100%; margin-bottom: 1rem; }
-		#RSP-Header-Container input[type="text"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
-
-		/* --- Tab Navigation --- */
-		.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
-		.grid-item { background: var(--theme-color-background-panel, #fff); padding: 0.65rem 1rem; text-align: center; border: 1px solid #D4A373; border-bottom: 2px solid #D4A373; list-style-type: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
-		.grid-item a { text-decoration: none; color: #264653; font-weight: 500; font-size: 0.9rem; }
-		.grid-item:hover { background: #FFF9F0; }
-		.grid-item.active { background: #264653; border-color: #264653; border-bottom-color: #E76F51; }
-		.grid-item.active a { color: #FAEDCD; }
-
-		/* --- Record Content --- */
-		#RSP-Record-Container article { background: var(--theme-color-background-panel, #fff); border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 0 0 6px 6px; padding: 1.25rem; margin: 0 0 1rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
-		#RSP-Record-Container h3 { color: #264653; font-size: 1.1rem; margin: 0 0 0.75rem; }
-		#RSP-Record-Container h4 { color: #264653; font-size: 0.95rem; margin: 1rem 0 0.5rem; }
-		#RSP-Record-Container textarea { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; min-height: 80px; font-family: inherit; }
-		#RSP-Record-Container textarea:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
-		#RSP-Record-Container input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; }
-		#RSP-Record-Container input[type="text"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
-		#RSP-Record-Container ul { padding-left: 1.25rem; }
-		#RSP-Record-Container li { padding: 0.35rem 0; color: #264653; font-size: 0.9rem; list-style: none; }
-		#RSP-Record-Container img { max-width: 100%; border-radius: 4px; border: 1px solid #D4A373; margin-bottom: 0.5rem; }
-		#RSP-Record-Image-Button { background: #264653; color: #FAEDCD; border: none; padding: 0.4rem 1rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; cursor: pointer; margin-bottom: 0.5rem; }
-		#RSP-Record-Image-Button:hover { background: #1A3340; }
-
-		/* --- Footer --- */
-		#RSP-Footer-Container { padding: 0.5rem 0; }
-		#RSP-Record-Button { background: #E76F51; color: var(--theme-color-background-panel, #fff); border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
-		#RSP-Record-Button:hover { background: #C45A3E; }
-	</style>
-</head>
-<body>
-	<div class="pict-example-header">
-		<div class="pict-example-badge">
-			<svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
-			Pict Example
-		</div>
-		<div class="pict-example-app-name">Book Edit View Mock</div>
-		<div class="pict-example-module">pict-section-recordset</div>
-	</div>
-	<div class="pict-example-content">
-		<!-- START Header template -->
-		<header id="RSP-Header-Container">
-			<!-- START Header-Title template -->
-			<input type="text" value="Book Title" />
-			<!-- END Header-Title template -->
-			<!-- START Header-Nav template -->
-			<nav id="RSP-Header-Nav">
-				<ul class="grid-container">
-					<li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
-					<li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
-					<li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
-				</ul>
-			</nav>
-			<!-- END Header-Nav template -->
-		</header>
-		<!-- END Header template -->
-
-		<!-- START Record template -->
-		<section id="RSP-Record-Container">
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-1">
-				<!-- START Record Content-Description template -->
-				<textarea>Book Description</textarea>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Image template -->
-				<img src="image.jpg" alt="Book Image">
-				<button type="button" id="RSP-Record-Image-Button">Change Image</button>
-				<!-- END Record Content-Image template -->
-				<!-- START Record Content-Details template -->
-				<h4>Book Metadata:</h4>
-				<ul>
-					<li><input type="text" value="Info 1" /></li>
-					<li><input type="text" value="Info 2" /></li>
-					<li><input type="text" value="Info 3" /></li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-2" style="display:none;">
-				<!-- START Record Content-Title template -->
-				<input type="text" value="Joined Entity 1 Title" />
-				<!-- END Record Content-Title template -->
-				<!-- START Record Content-Description template -->
-				<textarea>Joined Entity 1 Description</textarea>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Details template -->
-				<ul>
-					<li><input type="text" value="Detail A" /></li>
-					<li><input type="text" value="Detail B" /></li>
-					<li><input type="text" value="Detail C" /></li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-3" style="display:none;">
-				<!-- START Record Content-Title template -->
-				<input type="text" value="Joined Entity 2 Title" />
-				<!-- END Record Content-Title template -->
-				<!-- START Record Content-Description template -->
-				<textarea>Joined Entity 2 Description</textarea>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Details template -->
-				<ul>
-					<li><input type="text" value="Detail X" /></li>
-					<li><input type="text" value="Detail Y" /></li>
-					<li><input type="text" value="Detail Z" /></li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-		</section>
-		<!-- END Record template -->
-
-		<!-- Footer template -->
-		<footer id="RSP-Footer-Container">
-			<!-- NOTE: slot for additional set actions -->
-			<!-- START Record Content-Button template -->
-			<button type="button" id="RSP-Record-Button" onclick="window.location='./book-read-view.html'">Save Changes</button>
-			<!-- END Record Content-Button template -->
-		</footer>
-		<!-- END Footer template -->
-	</div>
-
-	<script>
-		function toggleTabContent(event, contentId) {
-			// Remove 'active' class from all tabs
-			const tabs = document.querySelectorAll('#RSP-Header-Nav .grid-item');
-			tabs.forEach(tab => {
-				tab.classList.remove('active');
-			});
-			// Add 'active' class to the clicked tab
-			event.currentTarget.parentElement.classList.add('active');
-			// Hide all content sections
-			const contents = document.querySelectorAll('article[id^="RSP-Record-Toggleable-Content-"]');
-			contents.forEach(content => {
-				if (content.id === contentId) {
-					content.style.display = 'block';
-				} else {
-					content.style.display = 'none';
-				}
-			});
-		}
-	</script>
-</body>
-</html>

package/example_applications/mocks/book-read-view.html

@@ -1,166 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Book Read View Mock - Pict Example</title>
-	<!-- Red Rock Mesa Theme — Pict Example App -->
-	<style>
-		*, *::before, *::after { box-sizing: border-box; }
-		body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
-
-		/* --- Header Bar --- */
-		.pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
-		.pict-example-badge { background: #E76F51; color: var(--theme-color-background-panel, #fff); padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
-		.pict-example-badge svg { width: 14px; height: 14px; fill: var(--theme-color-background-panel, #fff); flex-shrink: 0; }
-		.pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
-		.pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
-
-		/* --- Content Area --- */
-		.pict-example-content { padding: 1.5rem; }
-
-		/* --- Record Header --- */
-		#RSP-Header-Container { margin-bottom: 1rem; }
-		#RSP-Header-Container h1 { color: #264653; font-size: 1.5rem; margin: 0 0 1rem; }
-
-		/* --- Tab Navigation --- */
-		.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
-		.grid-item { background: var(--theme-color-background-panel, #fff); padding: 0.65rem 1rem; text-align: center; border: 1px solid #D4A373; border-bottom: 2px solid #D4A373; list-style-type: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
-		.grid-item a { text-decoration: none; color: #264653; font-weight: 500; font-size: 0.9rem; }
-		.grid-item:hover { background: #FFF9F0; }
-		.grid-item.active { background: #264653; border-color: #264653; border-bottom-color: #E76F51; }
-		.grid-item.active a { color: #FAEDCD; }
-
-		/* --- Record Content --- */
-		#RSP-Record-Container article { background: var(--theme-color-background-panel, #fff); border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 0 0 6px 6px; padding: 1.25rem; margin: 0 0 1rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
-		#RSP-Record-Container h3 { color: #264653; font-size: 1.1rem; margin: 0 0 0.75rem; }
-		#RSP-Record-Container h4 { color: #264653; font-size: 0.95rem; margin: 1rem 0 0.5rem; }
-		#RSP-Record-Container p { color: #264653; line-height: 1.6; }
-		#RSP-Record-Container ul { padding-left: 1.25rem; }
-		#RSP-Record-Container li { padding: 0.25rem 0; color: #264653; font-size: 0.9rem; }
-		#RSP-Record-Container img { max-width: 100%; border-radius: 4px; border: 1px solid #D4A373; }
-
-		/* --- Footer --- */
-		#RSP-Footer-Container { padding: 0.5rem 0; }
-		#RSP-Record-Button { background: #E76F51; color: var(--theme-color-background-panel, #fff); border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
-		#RSP-Record-Button:hover { background: #C45A3E; }
-	</style>
-</head>
-<body>
-	<div class="pict-example-header">
-		<div class="pict-example-badge">
-			<svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
-			Pict Example
-		</div>
-		<div class="pict-example-app-name">Book Read View Mock</div>
-		<div class="pict-example-module">pict-section-recordset</div>
-	</div>
-	<div class="pict-example-content">
-		<!-- START Header template -->
-		<header id="RSP-Header-Container">
-			<!-- START Header-Title template -->
-			<h1>Book Title</h1>
-			<!-- END Header-Title template -->
-			<!-- START Header-Nav template -->
-			<nav id="RSP-Header-Nav">
-				<ul class="grid-container">
-					<li class="grid-item active"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-1')">Details</a></li>
-					<li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-2')">Author</a></li>
-					<li class="grid-item"><a href="javascript:void(0);" onclick="toggleTabContent(event, 'RSP-Record-Toggleable-Content-3')">Series</a></li>
-				</ul>
-			</nav>
-			<!-- END Header-Nav template -->
-		</header>
-		<!-- END Header template -->
-
-		<!-- START Record template -->
-		<section id="RSP-Record-Container">
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-1">
-				<!-- START Record Content-Description template -->
-				<p>Book Description</p>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Image template -->
-				<img src="image.jpg" alt="Book Image">
-				<!-- END Record Content-Image template -->
-				<!-- START Record Content-Details template -->
-				<h4>Book Metadata:</h4>
-				<ul>
-					<li>Info 1</li>
-					<li>Info 2</li>
-					<li>Info 3</li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-2" style="display:none;">
-				<!-- START Record Content-Title template -->
-				<h3>Joined Entity 1 Title</h3>
-				<!-- END Record Content-Title template -->
-				<!-- START Record Content-Description template -->
-				<p>Joined Entity 1 Description</p>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Details template -->
-				<ul>
-					<li>Detail A</li>
-					<li>Detail B</li>
-					<li>Detail C</li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-
-			<!-- START Record Content -->
-			<article id="RSP-Record-Toggleable-Content-3" style="display:none;">
-				<!-- START Record Content-Title template -->
-				<h3>Joined Entity 2 Title</h3>
-				<!-- END Record Content-Title template -->
-				<!-- START Record Content-Description template -->
-				<p>Joined Entity 2 Description</p>
-				<!-- END Record Content-Description template -->
-				<!-- START Record Content-Details template -->
-				<ul>
-					<li>Detail X</li>
-					<li>Detail Y</li>
-					<li>Detail Z</li>
-				</ul>
-				<!-- END Record Content-Details template -->
-			</article>
-			<!-- END Record Content -->
-		</section>
-		<!-- END Record template -->
-
-		<!-- Footer template -->
-		<footer id="RSP-Footer-Container">
-			<!-- NOTE: slot for additional set actions -->
-			<!-- START Record Content-Button template -->
-			<button type="button" id="RSP-Record-Button" onclick="window.location='./book-edit-view.html'">Edit Record</button>
-			<!-- END Record Content-Button template -->
-		</footer>
-		<!-- END Footer template -->
-	</div>
-
-	<script>
-		function toggleTabContent(event, contentId) {
-			// Remove 'active' class from all tabs
-			const tabs = document.querySelectorAll('#RSP-Header-Nav .grid-item');
-			tabs.forEach(tab => {
-				tab.classList.remove('active');
-			});
-			// Add 'active' class to the clicked tab
-			event.currentTarget.parentElement.classList.add('active');
-			// Hide all content sections
-			const contents = document.querySelectorAll('article[id^="RSP-Record-Toggleable-Content-"]');
-			contents.forEach(content => {
-				if (content.id === contentId) {
-					content.style.display = 'block';
-				} else {
-					content.style.display = 'none';
-				}
-			});
-		}
-	</script>
-</body>
-</html>