domma-cms 0.84.1 → 0.86.0

package/plugins/shopping-cart/admin/css/index.css

@@ -0,0 +1,224 @@
+/* Shop admin - only --dm-* tokens, so it follows the admin theme (light, dark, custom). */
+.shp, .shp-form, .shp-order { --shp-soft: color-mix(in srgb, var(--dm-text) 5%, transparent); --shp-line: var(--dm-border); }
+.shp [hidden], .shp-form [hidden], .shp-order [hidden] { display: none !important; }
+.shp { display: flex; flex-direction: column; gap: 1rem; }
+.shp-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
+.shp-error { color: var(--dm-danger); }
+.shp-muted, .shp-note { color: var(--dm-text-muted); }
+.shp-note { margin: 0; font-size: var(--dm-text-sm); }
+.shp-note.is-bad { color: var(--dm-danger); }
+.shp-spacer { flex: 1; }
+.shp-loading { color: var(--dm-text-muted); padding: 2rem 0; }
+
+/* Tabs under the banner */
+.shp-nav { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--dm-border); }
+.shp-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; color: var(--dm-text-muted); text-decoration: none;
+    font-size: var(--dm-text-sm); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--dm-radius-sm) var(--dm-radius-sm) 0 0; }
+.shp-nav a:hover { color: var(--dm-text); background: var(--shp-soft); }
+.shp-nav a.is-on { color: var(--dm-primary); border-bottom-color: var(--dm-primary); font-weight: 600; }
+.shp-nav a.is-ext::after { content: 'Pro'; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .05rem .35rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-primary) 15%, transparent); color: var(--dm-primary); }
+
+/* Cards, bars, chips */
+.shp-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem;
+    background: var(--dm-surface, transparent); min-width: 0; }
+.shp-card > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
+.shp-card h3 { margin: 0; font-size: var(--dm-text-base, 1rem); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
+.shp-more { font-size: var(--dm-text-sm); color: var(--dm-primary); text-decoration: none; }
+.shp-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.shp-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.shp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.shp-seg button { border: 0; background: none; color: var(--dm-text); padding: .32rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm);
+    display: inline-flex; align-items: center; gap: .3rem; }
+.shp-seg button + button { border-left: 1px solid var(--dm-border); }
+.shp-seg button b { font-weight: 500; opacity: .6; }
+.shp-seg button:hover { background: var(--shp-soft); }
+.shp-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text, #fff); }
+.shp-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--dm-text-xs); font-weight: 600; padding: .12rem .55rem; border-radius: 999px;
+    white-space: nowrap; background: color-mix(in srgb, var(--dm-text) 9%, transparent); color: var(--dm-text-muted); }
+.shp-chip.is-primary { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); }
+.shp-chip.is-success { background: color-mix(in srgb, var(--dm-success) 15%, transparent); color: var(--dm-success); }
+.shp-chip.is-warning { background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: color-mix(in srgb, var(--dm-warning) 55%, var(--dm-text)); }
+.shp-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+
+/* Rows */
+.shp-list { display: flex; flex-direction: column; }
+.shp-row { display: flex; align-items: center; gap: .85rem; padding: .6rem .4rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; border-radius: var(--dm-radius-sm); }
+.shp-row:last-child { border-bottom: 0; }
+.shp-row:hover, .shp-row:focus-visible { background: var(--shp-soft); outline: none; }
+.shp-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dm-text-muted); min-width: 3.4rem; }
+.shp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.shp-main strong, .shp-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shp-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.shp-amt { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5rem; text-align: right; }
+.shp-kebab { border: 0; background: none; cursor: pointer; font-size: 1.15rem; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .35rem; line-height: 1.6; }
+.shp-kebab:hover { color: var(--dm-primary); background: var(--shp-soft); }
+.shp-thumb { width: 2.6rem; height: 2.6rem; border-radius: var(--dm-radius-sm); overflow: hidden; flex: none; background: var(--shp-soft); }
+.shp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.shp-star { color: var(--dm-warning); font-size: .85em; }
+.shp-stock { font-size: var(--dm-text-xs); color: var(--dm-text-muted); min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
+.shp-stock.is-warning { color: color-mix(in srgb, var(--dm-warning) 55%, var(--dm-text)); font-weight: 600; }
+.shp-stock.is-danger { color: var(--dm-danger); font-weight: 600; }
+@media (max-width: 720px) { .shp-stock, .shp-num { display: none; } .shp-amt { min-width: 0; } }
+
+/* Overview */
+.shp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
+.shp-tile { position: relative; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .9rem 1rem; display: flex; flex-direction: column;
+    gap: .1rem; color: inherit; text-decoration: none; background: var(--dm-surface, transparent); overflow: hidden; }
+a.shp-tile:hover { border-color: var(--dm-primary); }
+.shp-tile-icon { position: absolute; top: .85rem; right: .9rem; color: var(--dm-text-muted); opacity: .7; }
+.shp-tile-label { font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
+.shp-tile-value { font-size: 1.65rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.shp-tile-sub { font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.shp-tile.is-up .shp-tile-sub { color: var(--dm-success); font-weight: 600; }
+.shp-tile.is-down .shp-tile-sub { color: var(--dm-danger); font-weight: 600; }
+.shp-tile.is-attention { border-color: color-mix(in srgb, var(--dm-primary) 50%, var(--dm-border)); box-shadow: inset 3px 0 0 var(--dm-primary); }
+.shp-grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
+@media (max-width: 960px) { .shp-grid2 { grid-template-columns: 1fr; } }
+
+.shp-chart { position: relative; }
+.shp-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
+.shp-chart .shp-gridline { stroke: var(--dm-border); stroke-width: 1; }
+.shp-chart text { fill: var(--dm-text-muted); font-size: 11px; font-family: inherit; }
+.shp-bar path { fill: var(--dm-primary); opacity: .82; transition: opacity .15s; }
+.shp-bar .shp-bar-zero { fill: var(--dm-border); }
+.shp-bar.is-on path, .shp-bar:focus path { opacity: 1; }
+.shp-bar:focus { outline: none; }
+.shp-bar { cursor: default; }
+.shp-tip { position: absolute; top: -.25rem; width: 120px; pointer-events: none; background: var(--dm-surface, #fff); color: var(--dm-text); border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-sm); padding: .35rem .55rem; box-shadow: var(--dm-shadow-md, 0 6px 20px rgba(0,0,0,.15)); display: flex; flex-direction: column; font-size: var(--dm-text-xs); }
+.shp-tip strong { font-size: var(--dm-text-sm); }
+.shp-tip span { color: var(--dm-text-muted); }
+
+.shp-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
+.shp-todo-item { width: 100%; display: flex; align-items: center; gap: .6rem; border: 0; background: var(--shp-soft); color: var(--dm-text); border-radius: var(--dm-radius-sm);
+    padding: .55rem .7rem; cursor: pointer; text-align: left; font: inherit; font-size: var(--dm-text-sm); }
+.shp-todo-item:hover { background: color-mix(in srgb, var(--dm-primary) 10%, transparent); }
+.shp-todo-item > span:nth-child(2) { flex: 1; }
+.shp-todo-item.is-danger > span:first-child { color: var(--dm-danger); }
+.shp-todo-item.is-warning > span:first-child { color: var(--dm-warning); }
+.shp-todo-go { color: var(--dm-text-muted); }
+.shp-all-clear { display: flex; align-items: center; gap: .5rem; color: var(--dm-success); padding: .5rem 0; }
+.shp-mini-list { display: flex; flex-direction: column; }
+.shp-mini { display: flex; align-items: center; gap: .75rem; padding: .5rem .3rem; border-bottom: 1px solid var(--dm-border); color: inherit; text-decoration: none; border-radius: var(--dm-radius-sm); }
+.shp-mini:last-child { border-bottom: 0; }
+.shp-mini:hover { background: var(--shp-soft); }
+.shp-mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.shp-mini-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.shp-mini-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
+.shp-top { display: grid; grid-template-columns: minmax(0, 1fr) 30% auto; gap: .75rem; align-items: center; padding: .4rem 0; }
+.shp-top-name { display: flex; flex-direction: column; min-width: 0; }
+.shp-top-name small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.shp-top-bar { height: 8px; border-radius: 999px; background: var(--shp-soft); overflow: hidden; }
+.shp-top-bar span { display: block; height: 100%; background: var(--dm-primary); border-radius: 0 4px 4px 0; }
+
+.shp-welcome { border: 1px dashed var(--dm-border); border-radius: var(--dm-radius-lg, 14px); padding: 2rem; text-align: center; max-width: 46rem; margin: 1rem auto; }
+.shp-welcome h2 { margin: .5rem 0 .25rem; }
+.shp-welcome-icon { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: var(--dm-primary);
+    background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.shp-steps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; text-align: left; counter-reset: st; }
+.shp-steps li { counter-increment: st; display: grid; grid-template-columns: 2rem 1fr auto; grid-template-rows: auto auto; column-gap: .75rem; align-items: center;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem 1rem; }
+.shp-steps li::before { content: counter(st); grid-row: 1 / 3; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
+    background: var(--shp-soft); font-weight: 700; }
+.shp-steps li.is-done::before { content: '✓'; background: var(--dm-success); color: #fff; }
+.shp-steps li span { grid-column: 2; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.shp-steps li .btn { grid-column: 3; grid-row: 1 / 3; }
+
+/* Forms (slideovers) */
+.shp-form { display: flex; flex-direction: column; gap: .9rem; }
+.shp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
+.shp-wide { grid-column: 1 / -1; }
+@media (max-width: 640px) { .shp-grid { grid-template-columns: 1fr; } }
+.shp-form .form-label { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; }
+.shp-input-lg { font-size: 1.1rem; font-weight: 600; }
+.shp-mono { font-family: var(--dm-font-mono, ui-monospace, monospace); font-size: .88rem; }
+.shp-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.shp-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .3rem; }
+.shp-link { border: 0; background: none; padding: 0; color: var(--dm-primary); cursor: pointer; font: inherit; text-decoration: underline; }
+.shp-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: var(--dm-text-sm); }
+.shp-checks { display: flex; flex-direction: column; gap: .5rem; }
+.shp-toggles { display: flex; align-items: flex-end; padding-bottom: .5rem; }
+.shp-money { display: flex; align-items: stretch; }
+.shp-money > span { display: grid; place-items: center; padding: 0 .6rem; border: 1px solid var(--dm-border); border-right: 0; border-radius: var(--dm-radius-sm) 0 0 var(--dm-radius-sm);
+    background: var(--shp-soft); color: var(--dm-text-muted); font-size: var(--dm-text-xs); font-weight: 600; }
+.shp-money input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.shp-actions { display: flex; align-items: center; gap: .4rem; padding-top: .75rem; border-top: 1px solid var(--dm-border); position: sticky; bottom: 0;
+    background: var(--dm-surface, var(--dm-body-bg, #fff)); padding-bottom: .25rem; }
+.shp-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.shp-sect { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .6rem .9rem; }
+.shp-sect[open] { padding-bottom: .9rem; }
+.shp-sect > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
+.shp-sect[open] > summary { margin-bottom: .6rem; }
+.shp-sect > * + * { margin-top: .6rem; }
+
+.shp-pics { display: flex; flex-wrap: wrap; gap: .5rem; }
+.shp-pic, .shp-pic-add { position: relative; width: 5.5rem; height: 5.5rem; border-radius: var(--dm-radius-md); overflow: hidden; }
+.shp-pic { cursor: grab; background: var(--shp-soft); }
+.shp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.shp-pic-x { position: absolute; top: .25rem; right: .25rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff;
+    cursor: pointer; line-height: 1; opacity: 0; transition: opacity .15s; }
+.shp-pic:hover .shp-pic-x, .shp-pic-x:focus { opacity: 1; }
+.shp-pic-main { position: absolute; left: .25rem; bottom: .25rem; font-size: .62rem; font-weight: 700; background: var(--dm-primary); color: var(--dm-primary-text, #fff);
+    padding: .05rem .35rem; border-radius: 999px; }
+.shp-pic-add { border: 1.5px dashed var(--dm-border); background: none; color: var(--dm-text-muted); cursor: pointer; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: .2rem; font: inherit; font-size: var(--dm-text-xs); }
+.shp-pic-add:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
+.shp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
+.shp-media-tile { border: 2px solid transparent; border-radius: var(--dm-radius-md); padding: 0; background: var(--shp-soft); cursor: pointer; overflow: hidden;
+    display: flex; flex-direction: column; color: var(--dm-text); font: inherit; font-size: var(--dm-text-xs); }
+.shp-media-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
+.shp-media-tile span { padding: .2rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.shp-media-tile.is-on { border-color: var(--dm-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dm-primary) 30%, transparent); }
+
+.shp-variants { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
+.shp-variants-head { display: flex; align-items: center; gap: .5rem; }
+.shp-variants-head .form-label { margin: 0; white-space: nowrap; }
+.shp-optname { max-width: 12rem; }
+.shp-vtable { width: 100%; display: flex; flex-direction: column; gap: .35rem; }
+.shp-vrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr) 1.8rem; gap: .35rem; align-items: center; }
+.shp-vrow.is-head { font-size: var(--dm-text-xs); color: var(--dm-text-muted); font-weight: 600; }
+.shp-vrow .form-input { padding: .35rem .5rem; font-size: var(--dm-text-sm); }
+
+/* An order */
+.shp-order { display: flex; flex-direction: column; gap: 1rem; }
+.shp-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
+.shp-order-acts { display: flex; gap: .35rem; }
+.shp-order-acts .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.shp-lines { width: 100%; border-collapse: collapse; }
+.shp-lines td { padding: .5rem .35rem; border-bottom: 1px solid var(--dm-border); vertical-align: middle; }
+.shp-lines td small { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.shp-lines-img { width: 3rem; }
+.shp-lines-img img { width: 2.6rem; height: 2.6rem; border-radius: var(--dm-radius-sm); object-fit: cover; display: block; }
+.shp-lines .shp-num { text-align: right; white-space: nowrap; color: var(--dm-text-muted); font-weight: 500; }
+.shp-totals { margin: 0 0 0 auto; width: min(22rem, 100%); display: flex; flex-direction: column; gap: .3rem; font-variant-numeric: tabular-nums; }
+.shp-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--dm-text-sm); }
+.shp-totals dt { color: var(--dm-text-muted); } .shp-totals dd { margin: 0; font-weight: 600; }
+.shp-totals .is-included { font-size: var(--dm-text-xs); } .shp-totals .is-included dd { font-weight: 400; color: var(--dm-text-muted); }
+.shp-totals .is-total { border-top: 1px solid var(--dm-border); padding-top: .4rem; font-size: 1.05rem; }
+.shp-totals .is-total dt { color: var(--dm-text); font-weight: 700; } .shp-totals .is-total dd { font-weight: 800; }
+.shp-order-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+@media (max-width: 640px) { .shp-order-cols { grid-template-columns: 1fr; } }
+.shp-order h4 { margin: 0 0 .35rem; font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--dm-text-muted); }
+.shp-order p { margin: 0; }
+.shp-order a { color: var(--dm-primary); }
+.shp-callout { border-left: 3px solid var(--dm-warning); background: color-mix(in srgb, var(--dm-warning) 9%, transparent); padding: .6rem .8rem; border-radius: var(--dm-radius-sm); }
+.shp-callout p { white-space: pre-wrap; margin-top: .25rem; }
+.shp-ref { font-size: var(--dm-text-xs); }
+.shp-ext { display: flex; flex-wrap: wrap; gap: .3rem; }
+.shp-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; border-left: 2px solid var(--dm-border); padding-left: .8rem; }
+.shp-history li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--dm-text-sm); }
+.shp-history li > span:last-child { color: var(--dm-text-muted); }
+
+/* Settings */
+.shp-settings-nav { align-self: flex-start; }
+.shp-countries { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
+.shp-country button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 .2rem; font-size: 1rem; line-height: 1; }
+.shp-add-country { max-width: 16rem; }
+.shp-pay { display: flex; flex-direction: column; gap: .75rem; }
+.shp-provider { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .75rem; }
+.shp-provider-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
+.shp-copy { display: flex; align-items: center; gap: .3rem; background: var(--shp-soft); border-radius: var(--dm-radius-sm); padding: .3rem .5rem; }
+.shp-copy code { flex: 1; overflow-wrap: anywhere; font-size: var(--dm-text-xs); }
+.shp-steps li .shp-step-btns { grid-column: 3; grid-row: 1 / 3; display: flex; gap: .3rem; color: inherit; font-size: inherit; }
+.shp-steps li .shp-step-btns .btn { grid-column: auto; grid-row: auto; }

package/plugins/shopping-cart/admin/lib/kit.js

@@ -0,0 +1,190 @@
+/**
+ * Shop admin - what every screen shares: the admin's helpers (loaded at run
+ * time; a plugin never imports admin/ statically - the updater replaces it),
+ * the API, escaping, money in and out, slideover forms, and rows with a
+ * right-click / ⋮ / Shift+F10 menu.
+ *
+ * @module shopping-cart/admin/lib/kit
+ */
+
+import {formatMoney, fromMinor, toMinor} from '/plugins/shopping-cart/public/lib/money.js';
+
+export const SIDEBAR_URL = '#/plugins/shopping-cart';
+export const BASE = '/api/plugins/shopping-cart';
+
+let kit = null;
+
+/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+export function loadKit() {
+    if (!kit) {
+        kit = Promise.all([
+            import('/admin/js/lib/tool-kit.js').catch(() => ({})),
+            import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+            import('/admin/js/lib/help-popover.js').catch(() => ({}))
+        ]).then(([tk, chrome, help]) => ({
+            onceClosed: tk.onceClosed || ((so, fn) => { const c = so.close.bind(so); so.close = (...a) => { const r = c(...a); fn?.(); return r; }; }),
+            openMenuAt: tk.openMenuAt || ((el) => {
+                const r = el.getBoundingClientRect();
+                el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+            }),
+            viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
+            addBannerAction: chrome.addBannerAction || (() => null),
+            helpPopovers: help.helpPopovers || (() => () => {})
+        }));
+    }
+    return kit;
+}
+
+/** The Shop's API. H attaches the token and refreshes it on a 401; it throws with the server's `error`. */
+const seg = (id) => encodeURIComponent(String(id));
+export const api = {
+    summary: () => H.get(`${BASE}/summary`),
+    extensions: () => H.get(`${BASE}/extensions`),
+    products: {
+        list: () => H.get(`${BASE}/products`),
+        create: (d) => H.post(`${BASE}/products`, d),
+        update: (id, d) => H.put(`${BASE}/products/${seg(id)}`, d),
+        patch: (id, d) => H.patch(`${BASE}/products/${seg(id)}`, d),
+        duplicate: (id) => H.post(`${BASE}/products/${seg(id)}/duplicate`, {}),
+        remove: (id) => H.delete(`${BASE}/products/${seg(id)}`),
+        samples: () => H.post(`${BASE}/samples`, {live: true})
+    },
+    orders: {
+        list: () => H.get(`${BASE}/orders`),
+        get: (id) => H.get(`${BASE}/orders/${seg(id)}`),
+        move: (id, body) => H.put(`${BASE}/orders/${seg(id)}/status`, body),
+        note: (id, body) => H.put(`${BASE}/orders/${seg(id)}/note`, body),
+        refund: (id, body) => H.post(`${BASE}/orders/${seg(id)}/refund`, body),
+        remove: (id) => H.delete(`${BASE}/orders/${seg(id)}`)
+    },
+    settings: {
+        get: () => H.get(`${BASE}/settings`),
+        save: (d) => H.put(`${BASE}/settings`, d),
+        test: (provider, d) => H.post(`${BASE}/settings/test/${seg(provider)}`, d)
+    }
+};
+
+/** A list route's entries, whatever shape they came back in. */
+export const entriesOf = (res) => (Array.isArray(res) ? res : res?.entries ?? res?.data ?? []);
+
+/** E.confirm / titles render HTML: user text goes in escaped. */
+export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/** A small DOM tree from an HTML string that holds NO unescaped user data. */
+export function fragment(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+export const store = {
+    get(k) { try { return S.get(k); } catch { return null; } },
+    set(k, v) { try { S.set(k, v); } catch { /* a convenience */ } }
+};
+
+/** The sidebar re-asks the Shop's badge. */
+export function refreshBadge() {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+}
+
+// ---- Money ------------------------------------------------------------------------
+
+let currency = 'GBP';
+export const setCurrency = (c) => { currency = c || 'GBP'; };
+export const getCurrency = () => currency;
+export const money = (n, opts) => formatMoney(n, currency, opts);
+/** For an input: "12.50". Blank for null. */
+export const moneyIn = (n) => (n === null || n === undefined || n === '' ? '' : fromMinor(n, currency));
+/** From an input: 1250, null when blank, NaN when not an amount. */
+export const moneyOut = (text) => {
+    if (String(text ?? '').trim() === '') return null;
+    const m = toMinor(text, currency);
+    return m === null ? NaN : m;
+};
+
+/** "3 min ago", "26 Sep". */
+export function when(iso) {
+    const t = new Date(iso).getTime();
+    if (!Number.isFinite(t)) return '';
+    const s = (Date.now() - t) / 1000;
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)} min ago`;
+    if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+    if (s < 86400 * 6) return `${Math.round(s / 86400)} d ago`;
+    return new Date(t).toLocaleDateString(undefined, {day: 'numeric', month: 'short', ...(s > 86400 * 300 ? {year: 'numeric'} : {})});
+}
+
+// ---- Slideovers ---------------------------------------------------------------------
+
+/**
+ * Open a slideover holding `html`, bound to `model`. Closing with something
+ * changed asks first (once). Everything is disposed and removed on close.
+ *
+ * @returns {Promise<{so, panel, close: (force?: boolean) => void}>}
+ */
+export async function openPanel({title, size = 'md', html, model = {}, methods = {}, dirty, cleanup = () => {}, before}) {
+    const {onceClosed, helpPopovers} = await loadKit();
+    const so = E.slideover({title: esc(title), size, position: 'right'});
+    const panel = fragment(html);
+    so.element.appendChild(panel);
+    before?.(panel);
+    const disposeHelp = helpPopovers(panel);
+    const handle = M.applyBindings(model, panel, {methods});
+    onceClosed(so, () => { cleanup(); handle.dispose(); disposeHelp(); });
+    const close = so.close.bind(so);
+    let closed = false;
+    let asking = false;
+    so.close = async (force) => {
+        if (!closed && force !== true && dirty?.()) {
+            if (asking) return undefined;
+            asking = true;
+            const ok = await E.confirm('Discard your changes?');
+            asking = false;
+            if (!ok) return undefined;
+        }
+        closed = true;
+        return close();
+    };
+    panel.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && (e.key === 'Enter' || e.key === 's') && methods.save) { e.preventDefault(); methods.save(); }
+    });
+    I.scan(panel);
+    so.open();
+    return {so, panel, close: (force) => so.close(force)};
+}
+
+/**
+ * Rows: click (or Enter) = the main action; right-click, ⋮ or Shift+F10 = the
+ * menu. `scope` receives the teardown.
+ */
+export function wireRows(list, {items, main, openMenuAt, scope, match = '.shp-row'}) {
+    const menu = E.contextMenu(list, {cursor: 'glyph', match, inherit: false, density: 'compact',
+        items: (row) => items(row.dataset.id)});
+    const onClick = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.target.closest('[data-stop]')) return;
+        const kebab = e.target.closest('.shp-kebab');
+        if (kebab) { openMenuAt(kebab); return; }
+        main(row.dataset.id);
+    };
+    const onKey = (e) => {
+        const row = e.target.closest(match);
+        if (!row) return;
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+        else if (e.key === 'Enter' && e.target === row) main(row.dataset.id);
+        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target === row) {
+            e.preventDefault();
+            const rows = [...list.querySelectorAll(match)].filter(r => r.offsetParent);
+            rows[rows.indexOf(row) + (e.key === 'ArrowDown' ? 1 : -1)]?.focus();
+        }
+    };
+    list.addEventListener('click', onClick);
+    list.addEventListener('keydown', onKey);
+    scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); menu?.destroy?.(); });
+}
+
+/** Copy text, and say so. */
+export function copy(text, what = 'Copied') {
+    navigator.clipboard?.writeText(text).then(() => E.toast(`${what}.`, {type: 'success'}), () => E.toast(text));
+}

package/plugins/shopping-cart/admin/templates/shop.html

@@ -0,0 +1 @@
+<div class="shp" data-shop-admin></div>