@pixelated-tech/components 3.11.8 → 3.12.0

package/dist/components/general/global-error.js

@@ -3,10 +3,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import './global-error.css';
+/**
+ * GlobalErrorUI — displays a global error state with message, retry action and optional maintainer contact link.
+ *
+ * @param {any} [props.error] - Error object; may include message and stack for diagnostics.
+ * @param {function} [props.reset] - Optional retry/reset callback to attempt the failed action again.
+ * @param {object} [props.siteInfo] - Site-level information (used to render contact email/link when available).
+ * @param {string} [props.className] - Additional CSS class(es) to apply to the root element.
+ */
 GlobalErrorUI.propTypes = {
+    /** Error object; message and stack will be shown when details are expanded. */
     error: PropTypes.any,
+    /** Optional retry/reset function called when the user clicks 'Try again'. */
     reset: PropTypes.func,
+    /** Optional site information (used to build a contact mailto link when an email is available). */
     siteInfo: PropTypes.object,
+    /** Additional class names to apply to the component root. */
     className: PropTypes.string,
 };
 export function GlobalErrorUI({ error = null, reset, siteInfo, className = '' }) {

package/dist/components/general/hero.js

@@ -1,11 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import "./hero.css";
+/**
+ * Hero — Full-width hero section rendered using a background image.
+ *
+ * @param {string} [props.img] - Background image URL (required).
+ * @param {string} [props.imgAlt] - Alternative text for the background image (optional).
+ * @param {oneOf} [props.variant] - Layout variant: 'static' (background image only) or 'anchored' (anchored content).
+ * @param {oneOfType} [props.height] - Height for the hero (e.g., '60vh' or a numeric pixel value).
+ * @param {node} [props.children] - Optional content rendered inside the hero container.
+ */
 Hero.propTypes = {
+    /** Background image URL (required) */
     img: PropTypes.string.isRequired,
     // imgAlt: PropTypes.string.isRequired,
+    /** Layout variant: 'static' or 'anchored' */
     variant: PropTypes.oneOf(['static', 'anchored']),
+    /** Height for hero section (string like '60vh' or number) */
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Child nodes to render over the background */
     children: PropTypes.node,
 };
 export function Hero({ img, /* imgAlt, */ variant = 'static', height = '60vh', children }) {

package/dist/components/general/loading.js

@@ -7,11 +7,20 @@ https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webk
 https://www.andreaverlicchi.eu/blog/css-3-only-spinning-loading-animation/
 */
 /* ========== MARKDOWN ========== */
-Loading.propTypes = {};
+/**
+ * Loading — provides a spinner/loading indicator used across the UI.
+ *
+ * This component renders a CSS spinner; use `ToggleLoading` to control visibility programmatically.
+ */
+/** Loading.propTypes — No props (component renders a CSS spinner).
+ * @param {any} [props] - No props are accepted by Loading.
+ */
+Loading.propTypes = { /** no props */};
 export function Loading(props) {
     return (_jsx(_Fragment, { children: _jsx("div", { id: "loadingSpinner", className: "loading", children: _jsxs("div", { className: "spinner", children: [_jsx("div", { className: "bar1" }), _jsx("div", { className: "bar2" }), _jsx("div", { className: "bar3" }), _jsx("div", { className: "bar4" }), _jsx("div", { className: "bar5" }), _jsx("div", { className: "bar6" }), _jsx("div", { className: "bar7" }), _jsx("div", { className: "bar8" }), _jsx("div", { className: "bar9" }), _jsx("div", { className: "bar10" }), _jsx("div", { className: "bar11" }), _jsx("div", { className: "bar12" })] }) }) }));
 }
 ToggleLoading.propTypes = {
+    /** When true shows the global loading spinner; false hides it; omitted toggles the current state. */
     show: PropTypes.bool,
 };
 export function ToggleLoading(props) {

package/dist/components/general/markdown.js

@@ -5,7 +5,13 @@ import { SmartImage } from "./smartimage";
 import { usePixelatedConfig } from "../config/config.client";
 import "./markdown.css";
 /* ========== MARKDOWN ========== */
+/**
+ * Markdown — Renders a simplified markdown string into HTML (supports headings, lists, links, images, inline code).
+ *
+ * @param {string} [props.markdowndata] - Markdown input string to be parsed and rendered as HTML.
+ */
 Markdown.propTypes = {
+    /** Markdown input (string) to render */
     markdowndata: PropTypes.string.isRequired,
 };
 export function Markdown(props) {

package/dist/components/general/menu-accordion.js

@@ -36,8 +36,16 @@ function generateMenuItems({ menuData, state = "hide" }) {
     }
     return myItems;
 }
+/**
+ * MenuAccordion — Accordion-style navigational menu that supports nested menu groups and individual items.
+ *
+ * @param {arrayOf} [props.menuItems] - Array (or object) of menu items; items should include { name, path?, target?, hidden?, routes? }.
+ * @param {boolean} [props.showHidden] - When true, items marked as `hidden` will be shown.
+ */
 MenuAccordion.propTypes = {
+    /** Array of menu items (can contain nested `routes`) */
     menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
+    /** Show items marked `hidden` */
     showHidden: PropTypes.bool,
 };
 export function MenuAccordion(props) {
@@ -152,11 +160,19 @@ export function MenuAccordion(props) {
     return (_jsx("div", { className: "accordionMenuWrapper accordionUp", suppressHydrationWarning: true, children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
 }
 /* ========== MENU GROUP ========== */
+/**
+ * MenuAccordionGroup — Renders a group of menu items (may be a single item with `routes` or an array of items).
+ *
+ * @param {oneOfType} [props.menuItems] - A menu item object or an array of menu items (used for nested groups).
+ * @param {string} [props.state] - Optional visibility state ('hide' or 'show').
+ */
 MenuAccordionGroup.propTypes = {
+    /** Menu item or array of menu items (routes) */
     menuItems: PropTypes.oneOfType([
         menuItemShape,
         PropTypes.arrayOf(menuItemShape)
     ]).isRequired,
+    /** Visibility state 'hide' | 'show' */
     state: PropTypes.string,
 };
 export function MenuAccordionGroup(props) {
@@ -164,9 +180,19 @@ export function MenuAccordionGroup(props) {
     return (_jsx("ul", { className: (props.state === "hide" ? "menuHide" : "menuShow"), children: generateMenuItems({ menuData: myMenuItems, state: props.state ?? "hide" }) }, "menu-group-" + props.menuItems.name));
 }
 /* ========== MENU ITEM ========== */
+/**
+ * MenuAccordionItem — Single menu entry used by the accordion.
+ *
+ * @param {string} [props.name] - Display text for the menu item.
+ * @param {string} [props.href] - Destination href (empty string for expand/collapse toggles).
+ * @param {string} [props.target] - Optional link target (e.g., '_self' or '_blank').
+ */
 MenuAccordionItem.propTypes = {
+    /** Display text for the menu item */
     name: PropTypes.string.isRequired,
+    /** Link href (or empty string for toggle items) */
     href: PropTypes.string.isRequired,
+    /** Optional link target attribute */
     target: PropTypes.string,
 };
 export function MenuAccordionItem(props) {
@@ -178,7 +204,10 @@ export function MenuAccordionItem(props) {
 /*
 https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html-and-css
 */
-MenuAccordionButton.propTypes = {};
+/** MenuAccordionButton — Mobile menu toggle button.
+ * @param {any} [props] - No props are accepted by MenuAccordionButton.
+ */
+MenuAccordionButton.propTypes = { /** no props */};
 export function MenuAccordionButton(props) {
     function slideMobilePanel() {
         if (typeof window !== 'undefined' && window.moveMenu) {

package/dist/components/general/menu-expando.js

@@ -4,12 +4,24 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { SmartImage } from './smartimage';
 import './menu-expando.css';
+/**
+ * MenuExpando — collapsible navigation menu with optional nested sections for mobile and compact navigation.
+ *
+ * @param {oneOfType} [props.menuItems] - Either an object map of name->href or an array of items that may include nested `routes`.
+ * @param {string} [props.name] - Name of a menu item when using the array format.
+ * @param {string} [props.path] - Href/path for a menu item when using the array format.
+ * @param {array} [props.routes] - Optional nested route array to create expandable submenus.
+ */
 MenuExpando.propTypes = {
+    /** Menu items can be provided as { name: href } or as an array of items with optional nested routes. */
     menuItems: PropTypes.oneOfType([
         PropTypes.objectOf(PropTypes.string),
         PropTypes.arrayOf(PropTypes.shape({
+            /** Menu item display name */
             name: PropTypes.string.isRequired,
+            /** Href/path for the menu item */
             path: PropTypes.string.isRequired,
+            /** Optional nested routes (array of route objects) */
             routes: PropTypes.array,
         }))
     ]).isRequired
@@ -124,14 +136,25 @@ export function MenuExpando(props) {
     }
     return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menu-expando-wrapper", id: "menu-expando-wrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
 }
+/**
+ * MenuExpandoItem — simple menu item renderer for `MenuExpando`.
+ *
+ * @param {string} [props.name] - Display name for the menu entry.
+ * @param {string} [props.href] - Destination href for the menu entry.
+ */
 MenuExpandoItem.propTypes = {
+    /** Display text for the menu item. */
     name: PropTypes.string.isRequired,
+    /** Href or path for the menu item. */
     href: PropTypes.string.isRequired
 };
 export function MenuExpandoItem(props) {
     return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
 }
-MenuExpandoButton.propTypes = {};
+/** MenuExpandoButton.propTypes — No props (menu expando toggle).
+ * @param {any} [props] - No props are accepted by MenuExpandoButton.
+ */
+MenuExpandoButton.propTypes = { /** no props */};
 export function MenuExpandoButton(props) {
     function handleMenuExpandoButtonClick(event) {
         event.preventDefault();

package/dist/components/general/menu-simple.js

@@ -10,7 +10,13 @@ const menuItemShape = PropTypes.shape({
     hidden: PropTypes.bool,
     routes: PropTypes.array,
 });
+/**
+ * MenuSimple — renders a simple flat navigation menu from an array of items.
+ *
+ * @param {arrayOf} [props.menuItems] - Array of menu item objects ({ name, path, target, hidden, routes }).
+ */
 MenuSimple.propTypes = {
+    /** Array of menu items to render (flat list). */
     menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
 };
 export function MenuSimple(props) {
@@ -20,6 +26,7 @@ export function MenuSimple(props) {
             const myItem = props.menuItems[itemKey];
             if (!myItem)
                 continue; // Skip null/undefined items
+            // if (myItem.hidden) continue; // Skip nested routes
             if (myItem.routes)
                 continue; // Skip nested routes
             myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path || '', target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
@@ -43,11 +50,25 @@ export function MenuSimple(props) {
     return (_jsx("div", { className: "menu-wrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
 }
 /* ========== MENU ITEM ========== */
+/**
+ * MenuSimpleItem — Single entry for the flat `MenuSimple` menu.
+ *
+ * @param {string} [props.name] - Display text for the item.
+ * @param {string} [props.path] - Destination href or path for the item.
+ * @param {string} [props.target] - Optional link target (e.g., '_self' or '_blank').
+ * @param {boolean} [props.hidden] - When true, the item is treated as hidden (applies CSS to hide it).
+ * @param {array} [props.routes] - Optional nested routes (not used by `MenuSimpleItem` but accepted for compatibility).
+ */
 MenuSimpleItem.propTypes = {
+    /** Display text for the item */
     name: PropTypes.string.isRequired,
+    /** Destination href or path */
     path: PropTypes.string.isRequired,
+    /** Optional link target */
     target: PropTypes.string,
+    /** When true, the item is hidden */
     hidden: PropTypes.bool,
+    /** Optional nested routes (ignored by this renderer) */
     routes: PropTypes.array,
 };
 export function MenuSimpleItem(props) {

package/dist/components/general/metadata.components.js

@@ -1,7 +1,17 @@
 import PropTypes from "prop-types";
+/**
+ * setClientMetadata — updates document head metadata (title, description, keywords, og:title, og:description).
+ *
+ * @param {string} [props.title] - Document title to set.
+ * @param {string} [props.description] - Meta description content to set.
+ * @param {string} [props.keywords] - Comma-separated keywords string to set in the meta keywords tag.
+ */
 setClientMetadata.propTypes = {
+    /** Title to set as document.title and og:title. */
     title: PropTypes.string.isRequired,
+    /** Meta description text applied to several description tags. */
     description: PropTypes.string.isRequired,
+    /** Comma-separated keywords string applied to meta[name='keywords']. */
     keywords: PropTypes.string.isRequired,
 };
 export function setClientMetadata(props) {

package/dist/components/general/microinteractions.js

@@ -9,15 +9,37 @@ import './microinteractions.css';
  * @param props - Configuration props for enabling/disabling interactions
  * @returns A cleanup function if scrollfadeElements is used
  */
+/**
+ * MicroInteractions — enables or disables lightweight UI micro-interactions by toggling body classes and initializing scroll-fade behavior.
+ *
+ * @param {boolean} [props.buttonring] - Enable pulsing ring animations on buttons.
+ * @param {boolean} [props.cartpulse] - Enable cart pulse animation for add-to-cart actions.
+ * @param {boolean} [props.formglow] - Enable focus-glow styles for form controls.
+ * @param {boolean} [props.grayscalehover] - Enable grayscale-to-color hover effects on images.
+ * @param {boolean} [props.imgscale] - Enable subtle image scaling on hover.
+ * @param {boolean} [props.imgtwist] - Enable small rotation animation on hover for images.
+ * @param {boolean} [props.imghue] - Enable hue-shift effects on hover for images.
+ * @param {boolean} [props.simplemenubutton] - Enable simplified menu button microinteractions.
+ * @param {string} [props.scrollfadeElements] - CSS selector for elements to apply scroll-fade animations to.
+ */
 MicroInteractions.propTypes = {
+    /** Enable ring animation on buttons. */
     buttonring: PropTypes.bool,
+    /** Enable pulse animation on cart icon or similar. */
     cartpulse: PropTypes.bool,
+    /** Enable glow effects on focused form elements. */
     formglow: PropTypes.bool,
+    /** Enable grayscale hover-to-color transitions on elements. */
     grayscalehover: PropTypes.bool,
+    /** Enable scale-up animation on image hover. */
     imgscale: PropTypes.bool,
+    /** Enable slight twist/rotation on image hover. */
     imgtwist: PropTypes.bool,
+    /** Enable hue-shift color changes on hover. */
     imghue: PropTypes.bool,
+    /** Toggle simplified menu button interactions. */
     simplemenubutton: PropTypes.bool,
+    /** Selector for elements that should receive the scroll-fade animation. */
     scrollfadeElements: PropTypes.string,
 };
 export function MicroInteractions(props) {

package/dist/components/general/modal.js

@@ -6,10 +6,22 @@ import './modal.css';
 /*
 https://www.w3schools.com/howto/howto_css_modals.asp
 */
+/**
+ * Modal — accessible modal overlay component that can use either DOM events or a React close callback.
+ *
+ * @param {node} [props.modalContent] - Content to render inside the modal dialog (usually React nodes).
+ * @param {string} [props.modalID] - Optional suffix used to form DOM ids for compatibility with legacy event-based controls.
+ * @param {boolean} [props.isOpen] - Whether the modal is currently open and visible.
+ * @param {function} [props.handleCloseEvent] - Optional callback to close the modal (used by React-driven consumers).
+ */
 Modal.propTypes = {
+    /** Content rendered inside the modal dialog. */
     modalContent: PropTypes.node.isRequired,
+    /** Optional id suffix for the modal; used for legacy DOM-style open/close helpers. */
     modalID: PropTypes.string,
+    /** Flag indicating whether the modal is visible. */
     isOpen: PropTypes.bool,
+    /** Optional close callback invoked by escape key, overlay click, or controls. */
     handleCloseEvent: PropTypes.func,
 };
 export function Modal({ modalContent, modalID, isOpen = false, handleCloseEvent }) {

package/dist/components/general/nerdjoke.js

@@ -6,7 +6,15 @@ import "../../css/pixelated.grid.scss";
 import "./nerdjoke.css";
 const debug = false;
 const TIME_LIMIT = 15;
-NerdJoke.propTypes = {};
+/**
+ * NerdJoke — fetches and displays short Q/A 'nerd' jokes on a timer with controls to pause/advance.
+ *
+ * Props are primarily internal to the fetching implementation; the component exposes control buttons to pause or fetch the next joke.
+ */
+/** NerdJoke.propTypes — No props (fetches/show jokes internally).
+ * @param {any} [props] - No props are accepted by NerdJoke.
+ */
+NerdJoke.propTypes = { /** no props */};
 export function NerdJoke(props) {
     const [joke, setJoke] = useState({ question: "", answer: "" });
     const timerIntervalRef = useRef(null);
@@ -98,7 +106,9 @@ export function NerdJoke(props) {
     return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: formatTimeLeft(timeLeftRef.current) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", joke.answer, " "] })] })] })] }) }));
 }
 JokeButton.propTypes = {
+    /** Click handler invoked when the button is pressed (e.g., pause or fetch next). */
     clickFunction: PropTypes.func.isRequired,
+    /** Label text to render inside the button. */
     buttonText: PropTypes.string.isRequired,
 };
 function JokeButton(props) {

package/dist/components/general/proxy-handler.js

@@ -1,4 +1,11 @@
 import { NextResponse } from "next/server";
+/**
+ * STANDARD_PROXY_MATCHER
+ *
+ * A statically analyzable matcher array for Next.js middleware.
+ * Excludes static assets, images, API routes, and favicons from proxy processing.
+ */
+export const STANDARD_PROXY_MATCHER = ["/((?!_next/image|_next/static|api|favicon.ico).*)"];
 /**
  * handlePixelatedProxy
  *
@@ -8,13 +15,6 @@ import { NextResponse } from "next/server";
  * TODO: Future enhancement - Accept an options object to allow per-site CSP overrides,
  * enabling/disabling specific permissions (e.g., camera access), or setting custom rate limits.
  */
-/**
- * STANDARD_PROXY_MATCHER
- *
- * A statically analyzable matcher array for Next.js middleware.
- * Excludes static assets, images, API routes, and favicons from proxy processing.
- */
-export const STANDARD_PROXY_MATCHER = ["/((?!_next/image|_next/static|api|favicon.ico).*)"];
 export function handlePixelatedProxy(req) {
     const path = req.nextUrl.pathname + (req.nextUrl.search || "");
     const origin = req.nextUrl?.origin ?? new URL(req.url).origin;

package/dist/components/general/recipe.js

@@ -55,10 +55,20 @@ export function mapSchemaRecipeToDisplay(schemaRecipe) {
     };
 }
 /* ========== RECIPE BOOK ========== */
+/**
+ * RecipeBook — renders a browsable collection of recipes grouped by category with deep-linking support.
+ *
+ * @param {shape} [props.recipeData] - Object containing recipe items in schema.org/Recipe format.
+ * @param {array} [props.items] - Array of recipe items (used internally by recipeData.items).
+ * @param {array} [props.recipeCategories] - Array of category names used to group and render recipes.
+ */
 RecipeBook.propTypes = {
+    /** Object containing recipe items (schema.org/Recipe objects). */
     recipeData: PropTypes.shape({
+        /** Array of recipe items used to render the book. */
         items: PropTypes.array.isRequired
     }).isRequired,
+    /** Categories used to group recipes in the book (array of strings). */
     recipeCategories: PropTypes.array.isRequired
 };
 export function RecipeBook(props) {
@@ -129,10 +139,22 @@ export function RecipeBook(props) {
     return (_jsxs("div", { id: "recipes", children: [_jsx(BackToTop, {}), _jsx(RecipePickList, { recipeData: props.recipeData, recipeCategories: props.recipeCategories, handleRecipePickListChange: onRecipePickListChange }), outputElems] }));
 }
 /* ========== RECIPE CATEGORY ========== */
+/**
+ * RecipeCategory — renders a category heading for a group of recipes.
+ *
+ * @param {string} [props.id] - DOM id for the category heading element.
+ * @param {string} [props.className] - CSS class names for the heading element.
+ * @param {string} [props.category] - Category name displayed to users.
+ * @param {string} [props.showOnly] - Optional filter key used to hide/show categories via deep link or selection.
+ */
 RecipeCategory.propTypes = {
+    /** DOM id for the category heading. */
     id: PropTypes.string.isRequired,
+    /** CSS class names to apply to the heading. */
     className: PropTypes.string.isRequired,
+    /** Category display name. */
     category: PropTypes.string.isRequired,
+    /** Filter token used to show only a specific recipe or category. */
     showOnly: PropTypes.string.isRequired
 };
 export function RecipeCategory(props) {
@@ -142,9 +164,19 @@ export function RecipeCategory(props) {
     return (_jsx("h2", { id: props.id, className: props.className, style: isHidden, children: props.category }));
 }
 /* ========== RECIPE ========== */
+/**
+ * RecipeBookItem — displays a single recipe including image, ingredients and instructions.
+ *
+ * @param {object} [props.recipeData] - Normalized recipe data used for rendering (name, photo, ingredients, instructions, etc.).
+ * @param {string} [props.id] - DOM id for deep-linking to this recipe.
+ * @param {string} [props.showOnly] - Filter token used to hide/show the item for deep-linking.
+ */
 RecipeBookItem.propTypes = {
+    /** Normalized recipe data object used to render the recipe view. */
     recipeData: PropTypes.object.isRequired,
+    /** DOM id used for deep-linking. */
     id: PropTypes.string.isRequired,
+    /** Filter token used when deep-linking or scoping displayed recipes. */
     showOnly: PropTypes.string.isRequired
 };
 export function RecipeBookItem(props) {
@@ -160,9 +192,19 @@ export function RecipeBookItem(props) {
     return (_jsxs("article", { id: props.id, className: "h-recipe", style: isHidden, children: [_jsx("h3", { className: "p-name", children: _jsx("a", { id: props.id, href: `#${props.id}`, onClick: () => { return false; }, children: recipe.name }) }), recipeImage, _jsx("p", { className: "p-summary", children: recipe.summary }), _jsx("p", { children: "\u00A0" }), _jsxs("p", { className: "p-author", children: ["Author: ", recipe.author] }), _jsxs("p", { className: "p-published", children: ["Published: ", recipe.published] }), _jsxs("p", { className: "dt-duration", children: ["Duration: ", recipe.duration] }), _jsxs("p", { className: "p-yield", children: ["Yield: ", recipe.yield] }), _jsx("h4", { className: "e-ingredients", children: "Ingredients" }), _jsx("ul", { children: ingredients }), _jsx("h4", { className: "e-instructions", children: "Instructions" }), _jsx("ol", { children: instructions })] }));
 }
 /* ========== RECIPE PICK LIST ========== */
+/**
+ * RecipePickList — renders a select control for picking recipes by category and recipe name.
+ *
+ * @param {object} [props.recipeData] - Object containing recipe items accessible by category.
+ * @param {array} [props.recipeCategories] - Categories used to organize recipes in the select list.
+ * @param {function} [props.handleRecipePickListChange] - Callback invoked when the selected recipe changes (receives selected id).
+ */
 RecipePickList.propTypes = {
+    /** Recipe data object containing items used to build the pick list. */
     recipeData: PropTypes.object.isRequired,
+    /** Array of category names for grouping recipes in the select. */
     recipeCategories: PropTypes.array.isRequired,
+    /** Change handler called with the selected recipe identifier when the pick list changes. */
     handleRecipePickListChange: PropTypes.func.isRequired
 };
 export function RecipePickList(props) {
@@ -203,7 +245,10 @@ export function RecipePickList(props) {
     return (_jsx("form", { children: _jsx("select", { id: "recipe-list", name: "recipe-list", onChange: recipeListChanged, children: recipeOptions }) }));
 }
 /* ========== RECIPE BACK TO TOP ========== */
-BackToTop.propTypes = {};
+/** BackToTop.propTypes — No props (scroll-to-top control).
+ * @param {any} [props] - No props are accepted by BackToTop.
+ */
+BackToTop.propTypes = { /** no props */};
 export function BackToTop() {
     function scrollToTop() {
         window.scroll({