Red confirm button, removable rows, gallery, sidebar menu on phones

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+- New snippet: photo gallery, linked photos in a grid of figures that TagAction's viewer steps through (Previous, Next, arrow keys); asked for in the family evaluation, round 1.
+- The dashboard's sidebar folds behind a "Sections" button on phones (TagBrush.css's sidebar menu pattern): at 360px its whole link list used to sit between the top bar and the page.
+- Prices in the landing template and the pricing snippet are written `<strong>$12</strong> <small>per month</small>`, which TagBrush.css 2.0 shows as a large figure and a small muted period (1.x shows it as before).
+- New snippet: repeatable rows, a form where people add rows with TagAction's `--clone` and remove any of them with `--remove` (TagAction's next release). The Add and Remove buttons are written `hidden`, so without JavaScript the first row still works.
+- The confirm dialog's destructive button is red: `data-tone="error"` on the Delete button, and an outlined red opener (TagBrush.css's next release).
+- MkDocs theme: search. `search: titles` (the default) finds pages and sections by title from a box above the sidebar, filtered by TagAction 0.3's search-results list; `search: pagefind` uses Pagefind for full text; `search: false` leaves it out. The README no longer lists callouts as missing: TagBrush.css 1.2 styles `!!! note` once the `admonition` extension is on.
 - A row-actions snippet (`snippets/row-confirm.html`): a button on each table row opens that row's own confirm dialog, which posts the row's action. One dialog per row works with no page script, and the Actions column stays unsortable. The orders agent in the family evaluation worked this out on its own; now it's a pattern to copy.
 - A nonprofit starter site (`starters/nonprofit/`): 13 pages for a small nonprofit, built with `tagkit build` from shared includes, with donation and volunteer forms for static hosts, sortable and filterable event and budget tables, a live gift total, dialogs, a popover, a remembered FAQ, and a GitHub Pages workflow that runs TagCheck before publishing. Copy it with `npx degit kovirlabs/tagkit/starters/nonprofit`. Tests build it and check every page with TagCheck (including contrast and phone overflow), TagAction, links, and JavaScript off.
 - Tested with TagBrush.css 1.2.0.

README.md

@@ -10,7 +10,7 @@ TagKit is part of the Tag family. Its HTML is styled by [TagBrush.css](https://g
 
 **Page templates** (`templates/`): landing page, dashboard, docs page, blog post, sign-up page, admin table. Each is a complete page; open it and copy the source.
 
-**Snippets** (`snippets/`): hero, feature grid, pricing table, testimonials, FAQ, card grid, stat tiles, page header, data table, search bar, confirm dialog, user menu, contact form, callouts, sidebar layout, docs layout, footer columns. Each file starts with a comment that says what it is and where it goes. Most go inside `<main>`; ones marked `(body)` are page-level.
+**Snippets** (`snippets/`): hero, feature grid, pricing table, testimonials, FAQ, card grid, stat tiles, page header, data table, search bar, confirm dialog (with a red destructive button), user menu, contact form, repeatable rows (add and remove), photo gallery, callouts, sidebar layout, docs layout, footer columns. Each file starts with a comment that says what it is and where it goes. Most go inside `<main>`; ones marked `(body)` are page-level.
 
 **Starter sites** (`starters/`): a whole multi-page site to copy and make your own. The [nonprofit starter](starters/nonprofit/) has 13 pages (home, about, programs, events, news, get involved, donate, contact, financials, privacy, 404), with donation and volunteer forms that work on any static host, built with `tagkit build`, checked with TagCheck, and published to GitHub Pages by an included workflow: `npx degit kovirlabs/tagkit/starters/nonprofit my-site`.
 

ai/AGENTS.md

@@ -45,7 +45,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -54,16 +54,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.

ai/claude/tagkit/SKILL.md

@@ -50,7 +50,7 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Admin table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/admin-table.html): a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
 - [Blog post](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/blog-post.html): an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
-- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
+- [Dashboard](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/dashboard.html): an app page with a full-height sidebar (a menu button on phones), a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
 - [Docs page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/docs.html): breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
 - [Landing page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/landing.html): a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
 - [Sign-up page](https://raw.githubusercontent.com/kovirlabs/tagkit/main/templates/signup.html): a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.
@@ -59,16 +59,18 @@ Then build: `npx @kovirlabs/tagkit build site/ public/` (`--check` also runs Tag
 
 - [Callouts](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/callout.html): highlighted notes inside an article. A bold first word labels them; data-tone colors them.
 - [Card grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/card-grid.html): a section of linked cards, such as blog posts, projects, or products. Each card is an <article>.
-- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it.
+- [Confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/confirm-dialog.html): a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. The destructive action is a red button (data-tone="error").
 - [Contact form](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/contact-form.html): labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button.
 - [Data table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/data-table.html): sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>.
 - [Docs layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/docs-layout.html) (page-level: goes directly in `<body>`): a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links.
 - [FAQ](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/faq.html): an accordion where one answer is open at a time (the shared name), and the page remembers which.
 - [Feature grid](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/feature-grid.html): three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts.
 - [Footer columns](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/footer-columns.html) (page-level: goes directly in `<body>`): a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page.
+- [Photo gallery](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/gallery.html): linked photos in a grid of figures. TagAction opens a photo in a viewer and steps through the section's photos with Previous, Next, and the arrow keys; without JavaScript each link opens the full-size photo.
 - [Hero](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/hero.html) (page-level: goes directly in `<body>`): the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page.
 - [Page header](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/page-header.html): a title and subtitle with action buttons on the same row. Put it first in <main>.
 - [Pricing table](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/pricing.html): three plans as cards, with a price, what's included, and a button.
+- [Repeatable rows](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/repeatable-rows.html): a form where people add as many rows as they need and remove any of them (TagAction's --clone and --remove). Without JavaScript the first row still works and the Add and Remove buttons stay hidden.
 - [Row actions with a confirm dialog](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/row-confirm.html): each table row has a button that opens its own small dialog, which posts that row's action. One dialog per row works with no page script; put them after the table. data-tagaction="off" keeps the Actions column unsortable.
 - [Search bar](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/search-bar.html): a search field with filters and a button in one row, sent to the server as a GET form.
 - [Sidebar layout](https://raw.githubusercontent.com/kovirlabs/tagkit/main/snippets/sidebar-layout.html) (page-level: goes directly in `<body>`): an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>.