@ktfth/stickjs 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktfth/stickjs",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Declarative behavior for HTML elements. Zero dependencies.",
   "main": "stick.js",
   "types": "stick.d.ts",

package/stick-ui/stick-ui.css

@@ -9,21 +9,40 @@
 
 /* ── Tokens ─────────────────────────────────────────── */
 :root {
-  /* Colors */
-  --stk-bg: #ffffff;
-  --stk-fg: #09090b;
-  --stk-muted: #71717a;
-  --stk-muted-fg: #f4f4f5;
-  --stk-border: #e4e4e7;
-  --stk-ring: #18181b;
-  --stk-primary: #18181b;
-  --stk-primary-fg: #fafafa;
-  --stk-destructive: #ef4444;
-  --stk-destructive-fg: #fafafa;
-  --stk-success: #22c55e;
-  --stk-success-fg: #fafafa;
-  --stk-warning: #f59e0b;
-  --stk-warning-fg: #09090b;
+  /* DARK FIX — semantic tokens (override --sui-* to theme your app) */
+  --sui-bg: #ffffff;
+  --sui-surface: #f4f4f5;
+  --sui-border: #e4e4e7;
+  --sui-text: #09090b;
+  --sui-text-muted: #71717a;
+  --sui-accent: #18181b;
+  --sui-accent-fg: #fafafa;
+  --sui-success: #22c55e;
+  --sui-success-fg: #fafafa;
+  --sui-warning: #f59e0b;
+  --sui-warning-fg: #09090b;
+  --sui-danger: #ef4444;
+  --sui-danger-fg: #fafafa;
+  --sui-info: #3b82f6;
+  --sui-info-fg: #fafafa;
+  --sui-ring: #18181b;
+  --sui-ring-shadow: rgba(24,24,27,0.1);
+
+  /* DARK FIX — backward-compatible aliases (--stk-* now reference --sui-*) */
+  --stk-bg: var(--sui-bg);
+  --stk-fg: var(--sui-text);
+  --stk-muted: var(--sui-text-muted);
+  --stk-muted-fg: var(--sui-surface);
+  --stk-border: var(--sui-border);
+  --stk-ring: var(--sui-ring);
+  --stk-primary: var(--sui-accent);
+  --stk-primary-fg: var(--sui-accent-fg);
+  --stk-destructive: var(--sui-danger);
+  --stk-destructive-fg: var(--sui-danger-fg);
+  --stk-success: var(--sui-success);
+  --stk-success-fg: var(--sui-success-fg);
+  --stk-warning: var(--sui-warning);
+  --stk-warning-fg: var(--sui-warning-fg);
 
   /* Radius */
   --stk-radius-sm: 4px;
@@ -67,31 +86,35 @@
   --stk-z-tooltip: 400;
 }
 
-/* ── Dark mode ──────────────────────────────────────── */
+/* DARK FIX — dark mode tokens ──────────────────────── */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --stk-bg: #09090b;
-    --stk-fg: #fafafa;
-    --stk-muted: #a1a1aa;
-    --stk-muted-fg: #27272a;
-    --stk-border: #27272a;
-    --stk-ring: #d4d4d8;
-    --stk-primary: #fafafa;
-    --stk-primary-fg: #18181b;
+    --sui-bg: #09090b;
+    --sui-surface: #27272a;
+    --sui-border: #27272a;
+    --sui-text: #fafafa;
+    --sui-text-muted: #a1a1aa;
+    --sui-accent: #fafafa;
+    --sui-accent-fg: #18181b;
+    --sui-ring: #d4d4d8;
+    --sui-ring-shadow: rgba(212,212,216,0.2);
+    --sui-info: #60a5fa;
     --stk-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
     --stk-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
     --stk-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
   }
 }
 [data-theme="dark"] {
-  --stk-bg: #09090b;
-  --stk-fg: #fafafa;
-  --stk-muted: #a1a1aa;
-  --stk-muted-fg: #27272a;
-  --stk-border: #27272a;
-  --stk-ring: #d4d4d8;
-  --stk-primary: #fafafa;
-  --stk-primary-fg: #18181b;
+  --sui-bg: #09090b;
+  --sui-surface: #27272a;
+  --sui-border: #27272a;
+  --sui-text: #fafafa;
+  --sui-text-muted: #a1a1aa;
+  --sui-accent: #fafafa;
+  --sui-accent-fg: #18181b;
+  --sui-ring: #d4d4d8;
+  --sui-ring-shadow: rgba(212,212,216,0.2);
+  --sui-info: #60a5fa;
   --stk-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
   --stk-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
   --stk-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
@@ -145,14 +168,15 @@
   border: 1px solid var(--stk-border); background: var(--stk-bg); color: var(--stk-fg);
   text-decoration: none;
 }
-.stk-btn:hover { background: var(--stk-muted-fg); }
+/* DARK FIX — explicit color on every :hover prevents dark-on-dark */
+.stk-btn:hover { background: var(--stk-muted-fg); color: var(--stk-fg); }
 .stk-btn:focus-visible { outline: 2px solid var(--stk-ring); outline-offset: 2px; }
 .stk-btn-primary { background: var(--stk-primary); color: var(--stk-primary-fg); border-color: var(--stk-primary); }
-.stk-btn-primary:hover { background: var(--stk-primary); opacity: 0.9; }
+.stk-btn-primary:hover { background: var(--stk-primary); color: var(--stk-primary-fg); opacity: 0.9; }
 .stk-btn-destructive { background: var(--stk-destructive); color: var(--stk-destructive-fg); border-color: var(--stk-destructive); }
-.stk-btn-destructive:hover { background: var(--stk-destructive); opacity: 0.9; }
+.stk-btn-destructive:hover { background: var(--stk-destructive); color: var(--stk-destructive-fg); opacity: 0.9; }
 .stk-btn-ghost { background: transparent; border-color: transparent; }
-.stk-btn-ghost:hover { background: var(--stk-muted-fg); }
+.stk-btn-ghost:hover { background: var(--stk-muted-fg); color: var(--stk-fg); }
 .stk-btn-sm { padding: var(--stk-space-1) var(--stk-space-2); font-size: var(--stk-text-xs); }
 .stk-btn-lg { padding: var(--stk-space-3) var(--stk-space-6); font-size: var(--stk-text-base); }
 
@@ -482,9 +506,11 @@
 
 .stk-table tbody tr:last-child td { border-bottom: none; }
 
+/* DARK FIX — explicit color prevents dark text on dark hover bg */
 .stk-table tbody tr:hover {
   background: var(--stk-muted-fg);
-  transition: background var(--stk-duration) var(--stk-easing);
+  color: var(--stk-fg);
+  transition: background var(--stk-duration) var(--stk-easing), color var(--stk-duration) var(--stk-easing);
 }
 
 /* Sortable headers */
@@ -539,7 +565,7 @@
 .stk-table-filter:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 /* Pagination bar */
@@ -716,7 +742,7 @@
 .stk-stepper .stk-input:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 .stk-stepper .stk-label {
@@ -750,7 +776,7 @@
 .stk-autocomplete-input:focus {
   outline: none;
   border-color: var(--stk-ring);
-  box-shadow: 0 0 0 2px rgba(24,24,27,0.1);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
 }
 
 .stk-autocomplete-dropdown {
@@ -795,6 +821,215 @@
   font-weight: 700;
 }
 
+/* ══════════════════════════════════════════════════════
+   DARK FIX — Generic element styles & missing components
+   ══════════════════════════════════════════════════════ */
+
+/* ── DARK FIX: Generic dialog base (BUG 4) ─────────── */
+dialog {
+  margin: auto;
+  position: fixed;
+  inset: 0;
+  height: fit-content;
+  width: min(90%, 420px);
+  border: none;
+  border-radius: var(--stk-radius-lg, 12px);
+  padding: 0;
+  background: var(--sui-bg);
+  color: var(--sui-text);
+  box-shadow: var(--stk-shadow-lg);
+  z-index: var(--stk-z-modal, 200);
+}
+dialog::backdrop {
+  background: rgba(0,0,0,0.6);
+}
+dialog[open] {
+  animation: stk-dialog-in var(--stk-duration-slow, 300ms) var(--stk-easing);
+}
+
+/* ── DARK FIX: Generic form hover/focus (BUG 5) ────── */
+input:hover,
+select:hover,
+textarea:hover {
+  color: var(--sui-text);
+  background-color: var(--sui-surface);
+}
+input:focus,
+select:focus,
+textarea:focus {
+  color: var(--sui-text);
+  outline: none;
+  border-color: var(--sui-ring);
+  box-shadow: 0 0 0 2px var(--sui-ring-shadow); /* DARK FIX */
+}
+
+/* ── DARK FIX: Generic .btn aliases (BUG 2 / BUG 3) ─ */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--stk-space-2, 8px);
+  padding: var(--stk-space-2, 8px) var(--stk-space-4, 16px);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem); font-weight: 500;
+  cursor: pointer;
+  transition: all var(--stk-duration, 150ms) var(--stk-easing);
+  border: 1px solid var(--sui-border);
+  background: var(--sui-bg);
+  color: var(--sui-text);
+  text-decoration: none;
+  font-family: var(--stk-font);
+}
+.btn:hover {
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+.btn:focus-visible {
+  outline: 2px solid var(--sui-ring);
+  outline-offset: 2px;
+}
+
+.btn-primary {
+  background: var(--sui-accent);
+  color: var(--sui-accent-fg);
+  border-color: var(--sui-accent);
+}
+.btn-primary:hover {
+  background: var(--sui-accent);
+  color: var(--sui-accent-fg);
+  opacity: 0.9;
+}
+
+.btn-danger {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+  border-color: var(--sui-danger);
+}
+.btn-danger:hover {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+  opacity: 0.9;
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--sui-text);
+}
+.btn-ghost:hover {
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+
+.btn-sm { padding: var(--stk-space-1, 4px) var(--stk-space-2, 8px); font-size: var(--stk-text-xs, 0.75rem); }
+.btn-lg { padding: var(--stk-space-3, 12px) var(--stk-space-6, 24px); font-size: var(--stk-text-base, 1rem); }
+
+/* ── DARK FIX: Generic table row hover (BUG 1) ─────── */
+table:not(.stk-table) tbody tr:hover td {
+  color: var(--sui-text);
+}
+
+/* ── DARK FIX: Badge component (BUG 6) ─────────────── */
+.badge, .stk-badge {
+  display: inline-flex; align-items: center;
+  padding: var(--stk-space-1, 4px) var(--stk-space-2, 8px);
+  font-size: var(--stk-text-xs, 0.75rem); font-weight: 500;
+  border-radius: var(--stk-radius-full, 9999px);
+  line-height: 1.4;
+  background: var(--sui-surface);
+  color: var(--sui-text);
+}
+.badge-info, .stk-badge-info {
+  background: var(--sui-info);
+  color: var(--sui-info-fg);
+}
+.badge-success, .stk-badge-success {
+  background: var(--sui-success);
+  color: var(--sui-success-fg);
+}
+.badge-warning, .stk-badge-warning {
+  background: var(--sui-warning);
+  color: var(--sui-warning-fg);
+}
+.badge-danger, .stk-badge-danger {
+  background: var(--sui-danger);
+  color: var(--sui-danger-fg);
+}
+
+/* ── DARK FIX: Alert component (BUG 6) ─────────────── */
+.alert, .stk-alert {
+  display: flex; align-items: flex-start; gap: var(--stk-space-3, 12px);
+  padding: var(--stk-space-3, 12px) var(--stk-space-4, 16px);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem);
+  border: 1px solid var(--sui-border);
+  background: var(--sui-bg);
+  color: var(--sui-text);
+}
+.alert-success, .stk-alert-success {
+  border-left: 3px solid var(--sui-success);
+}
+.alert-danger, .stk-alert-danger {
+  border-left: 3px solid var(--sui-danger);
+}
+.alert-warning, .stk-alert-warning {
+  border-left: 3px solid var(--sui-warning);
+}
+.alert-info, .stk-alert-info {
+  border-left: 3px solid var(--sui-info);
+}
+
+/* ── DARK FIX: Form group component (BUG 6) ────────── */
+.form-group, .stk-form-group {
+  display: flex; flex-direction: column;
+  gap: var(--stk-space-1, 4px);
+  margin-bottom: var(--stk-space-4, 16px);
+}
+.form-group label, .stk-form-group label {
+  font-size: var(--stk-text-sm, 0.875rem); font-weight: 500;
+  color: var(--sui-text);
+}
+.form-group input,
+.form-group select,
+.form-group textarea,
+.stk-form-group input,
+.stk-form-group select,
+.stk-form-group textarea {
+  display: block; width: 100%;
+  padding: var(--stk-space-2, 8px) var(--stk-space-3, 12px);
+  border: 1px solid var(--sui-border);
+  border-radius: var(--stk-radius-md, 8px);
+  font-size: var(--stk-text-sm, 0.875rem);
+  font-family: var(--stk-font);
+  color: var(--sui-text);
+  background: var(--sui-bg);
+  transition: border-color var(--stk-duration, 150ms) var(--stk-easing),
+              box-shadow var(--stk-duration, 150ms) var(--stk-easing);
+}
+.form-group input::placeholder,
+.form-group textarea::placeholder,
+.stk-form-group input::placeholder,
+.stk-form-group textarea::placeholder {
+  color: var(--sui-text-muted);
+}
+
+/* ── DARK FIX: Section header component (BUG 6) ────── */
+.section-header, .stk-section-header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--stk-space-4, 16px);
+  margin-bottom: var(--stk-space-4, 16px);
+  padding-bottom: var(--stk-space-3, 12px);
+  border-bottom: 1px solid var(--sui-border);
+}
+.section-header h1, .section-header h2, .section-header h3,
+.stk-section-header h1, .stk-section-header h2, .stk-section-header h3 {
+  margin: 0;
+  font-size: var(--stk-text-lg, 1.125rem); font-weight: 600;
+  color: var(--sui-text);
+}
+.section-header p, .stk-section-header p {
+  margin: 0;
+  font-size: var(--stk-text-sm, 0.875rem);
+  color: var(--sui-text-muted);
+}
+
 .stk-autocomplete-empty {
   padding: var(--stk-space-4) var(--stk-space-3);
   text-align: center;

package/stick.js

@@ -22,6 +22,13 @@
  *   data-stick-loading="Loading…"        button label while fetch is in-flight
  *   data-stick-headers='{"Authorization":"Bearer token"}' fetch headers (JSON)
  *   data-stick-json='{"key":"{{value}}"}' send JSON body instead of FormData
+ *   data-stick-map="#sel:Field, …"        JSON field → DOM mapping for fetch-json handler
+ *   data-stick-then="handler:tgt:p, …"    post-fetch action chain (sequential)
+ *   data-stick-accept="json"              parse fetch response as JSON array
+ *   data-stick-template="#tpl"            <template> for JSON array rendering (with accept=json)
+ *   data-stick-state-loading="…"          state actions when fetch starts
+ *   data-stick-state-done="…"             state actions when fetch succeeds
+ *   data-stick-state-error="…"            state actions when fetch fails
  *
  * Target selectors (data-stick-target):
  *   "#id"            querySelector (default)
@@ -45,6 +52,7 @@
  *   {{url:key}} URLSearchParams value from current page URL (e.g. {{url:q}} → ?q=value)
  *   {{data-*}}  any data attribute, e.g. {{data-id}}
  *   {{attr}}    any attribute, e.g. {{href}}, {{src}}
+ *   {{#sel.prop}} cross-element: querySelector(sel).prop  (e.g. {{#myInput.value}})
  *
  *   Example: data-stick="input:fetch:/api/search?q={{value}}"
  *            data-stick="click:dispatch:item-selected:{{data-id}}"
@@ -80,7 +88,7 @@
 }(typeof window !== 'undefined' ? window : this, function () {
   'use strict';
 
-  const VERSION     = '3.0.0';
+  const VERSION     = '3.1.0';
   const handlers    = {};
   const listenerMap = new WeakMap(); // el → [{event, fn, options}]
   let   _debug      = false;
@@ -135,9 +143,44 @@
     }
   }
 
-  // Resolve {{token}} placeholders using properties of el
+  // Resolve {{key}} tokens from a plain object (for JSON template rendering)
+  function interpolateFromObj(text, obj) {
+    return text.replace(/\{\{([\w-]+)\}\}/g, (_, key) => obj[key] !== undefined ? String(obj[key]) : '');
+  }
+
+  // Walk a cloned fragment and interpolate {{tokens}} from a plain object
+  function interpolateCloneFromObj(fragment, obj) {
+    var walk = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+    var node;
+    while ((node = walk.nextNode())) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.nodeValue.includes('{{')) node.nodeValue = interpolateFromObj(node.nodeValue, obj);
+      } else {
+        [...node.attributes].forEach(function(attr) {
+          if (attr.value.includes('{{')) attr.value = interpolateFromObj(attr.value, obj);
+        });
+      }
+    }
+  }
+
+  // Resolve {{token}} placeholders — supports cross-element {{#selector.prop}}
   function interpolate(param, el) {
-    return param.replace(/\{\{([\w-]+)\}\}/g, (_, key) => {
+    // Cross-element interpolation: {{#selector.prop}} resolves from another DOM element
+    param = param.replace(/\{\{(#[^}]+)\}\}/g, function(_, ref) {
+      var lastDot = ref.lastIndexOf('.');
+      if (lastDot <= 0) return '';
+      var sel  = ref.slice(0, lastDot);
+      var prop = ref.slice(lastDot + 1);
+      var found = (typeof document !== 'undefined') ? document.querySelector(sel) : null;
+      if (!found) return '';
+      if (prop === 'value')       return found.value ?? '';
+      if (prop === 'text' || prop === 'textContent') return found.textContent?.trim() ?? '';
+      if (prop === 'checked')     return String(found.checked ?? false);
+      if (prop.startsWith('data-')) return found.dataset[toCamel(prop.slice(5))] ?? '';
+      return found[prop] !== undefined ? String(found[prop]) : (found.getAttribute(prop) ?? '');
+    });
+    // Local element interpolation
+    return param.replace(/\{\{([\w:-]+)\}\}/g, (_, key) => {
       if (key === 'value')   return el.value   ?? '';
       if (key === 'text')    return el.textContent.trim();
       if (key === 'id')      return el.id      ?? '';
@@ -224,6 +267,57 @@
     });
   }
 
+  // ── state & then helpers ────────────────────────────────────────
+
+  // Parse state action: "handler:param:#target" or "handler:#target"
+  function parseStateAction(str) {
+    str = str.trim();
+    if (!str) return null;
+    var parts = str.split(':');
+    if (parts.length < 2) return null;
+    return { handler: parts[0], targetSel: parts[parts.length - 1].trim(), param: parts.length > 2 ? parts.slice(1, -1).join(':').trim() : '' };
+  }
+
+  // Apply state actions (Feature 5) — e.g. "add-class:loading:#container, disable:#btn"
+  function applyStateActions(actionsStr) {
+    if (!actionsStr) return;
+    actionsStr.split(',').forEach(function(raw) {
+      var parsed = parseStateAction(raw);
+      if (!parsed) return;
+      var target = document.querySelector(parsed.targetSel);
+      if (!target || typeof handlers[parsed.handler] !== 'function') return;
+      try { handlers[parsed.handler](target, parsed.param, { type: 'state' }, target); }
+      catch (err) { console.error('[Stick:state]', err); }
+    });
+  }
+
+  // Parse then action: "handler:target:param" or "handler:target"
+  function parseThenEntry(str) {
+    str = str.trim();
+    if (!str) return null;
+    var i1 = str.indexOf(':');
+    if (i1 === -1) return { handler: str, targetSel: null, param: '' };
+    var rest = str.slice(i1 + 1);
+    var i2 = rest.indexOf(':');
+    if (i2 === -1) return { handler: str.slice(0, i1), targetSel: rest.trim(), param: '' };
+    return { handler: str.slice(0, i1), targetSel: rest.slice(0, i2).trim(), param: rest.slice(i2 + 1).trim() };
+  }
+
+  // Execute post-fetch then chain (Feature 2) — "handler:target:param, …"
+  async function executeThenChain(actionsStr, sourceEl) {
+    if (!actionsStr) return;
+    var actions = actionsStr.split(',');
+    for (var i = 0; i < actions.length; i++) {
+      var parsed = parseThenEntry(actions[i]);
+      if (!parsed) continue;
+      var target = parsed.targetSel ? document.querySelector(parsed.targetSel) : sourceEl;
+      if (!target) { console.warn('[Stick:then] target not found:', parsed.targetSel); continue; }
+      if (typeof handlers[parsed.handler] !== 'function') { console.warn('[Stick:then] unknown handler:', parsed.handler); continue; }
+      try { await handlers[parsed.handler](sourceEl, parsed.param, { type: 'then' }, target); }
+      catch (err) { console.error('[Stick:then] handler "' + parsed.handler + '" threw:', err); }
+    }
+  }
+
   // ── core ──────────────────────────────────────────────────────────
 
   const Stick = {
@@ -597,15 +691,17 @@
       const val = localStorage.getItem(p);
       if (val !== null) t.value !== undefined ? (t.value = val) : (t.textContent = val);
     })
-    // Network
+    // Network — supports accept=json (F4), state lifecycle (F5), then chain (F2)
     .add('fetch', async (el, param, e, target) => {
       e?.preventDefault?.();
-      const method   = (el.dataset.stickMethod  || 'GET').toUpperCase();
-      const swapMode =  el.dataset.stickSwap    || 'innerHTML';
-      const loading  =  el.dataset.stickLoading || '';
-      const errorSel =  el.dataset.stickError;
-      const errorEl  =  errorSel ? document.querySelector(errorSel) : null;
-      const prev     = el.textContent;
+      const method      = (el.dataset.stickMethod  || 'GET').toUpperCase();
+      const swapMode    =  el.dataset.stickSwap    || 'innerHTML';
+      const loading     =  el.dataset.stickLoading || '';
+      const errorSel    =  el.dataset.stickError;
+      const errorEl     =  errorSel ? document.querySelector(errorSel) : null;
+      const prev        = el.textContent;
+      const acceptJson  = el.dataset.stickAccept === 'json';
+      const templateSel = el.dataset.stickTemplate;
 
       let headers = {};
       try { headers = JSON.parse(el.dataset.stickHeaders || '{}'); } catch (_) {}
@@ -613,6 +709,7 @@
       if (loading) el.textContent = loading;
       el.setAttribute('aria-busy', 'true');
       if (errorEl) errorEl.hidden = true;
+      applyStateActions(el.dataset.stickStateLoading);
 
       try {
         let body;
@@ -625,19 +722,75 @@
             body = new FormData(el.closest('form') || el);
           }
         }
-        const res  = await fetch(param, { method, body, headers });
+        const res = await fetch(param, { method, body, headers });
         if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
-        const text = await res.text();
-        swap(target, text, swapMode);
-        Stick.init(target);
+
+        if (acceptJson) {
+          // Feature 4: JSON response → clone template per item into target
+          const json = await res.json();
+          const tpl  = templateSel ? document.querySelector(templateSel) : null;
+          if (tpl && tpl.tagName === 'TEMPLATE') {
+            target.innerHTML = '';
+            var items = Array.isArray(json) ? json : [json];
+            items.forEach(function(item) {
+              var clone = tpl.content.cloneNode(true);
+              interpolateCloneFromObj(clone, item);
+              target.appendChild(clone);
+            });
+            Stick.init(target);
+          } else {
+            console.warn('[Stick:fetch] accept=json requires data-stick-template pointing to a <template>');
+          }
+        } else {
+          const text = await res.text();
+          swap(target, text, swapMode);
+          Stick.init(target);
+        }
+
+        applyStateActions(el.dataset.stickStateDone);
+        await executeThenChain(el.dataset.stickThen, el);
       } catch (err) {
         console.error('[Stick:fetch]', err);
+        applyStateActions(el.dataset.stickStateError);
         if (errorEl) { errorEl.textContent = err.message; errorEl.hidden = false; }
-        else target.textContent = `Error: ${err.message}`;
+        else if (!el.dataset.stickStateError) target.textContent = `Error: ${err.message}`;
       } finally {
         if (loading) el.textContent = prev;
         el.removeAttribute('aria-busy');
       }
+    })
+    // Feature 1: fetch-json — GET URL, map JSON fields to DOM elements via data-stick-map
+    .add('fetch-json', async (el, param, e, target) => {
+      var mapStr = el.dataset.stickMap;
+      el.setAttribute('aria-busy', 'true');
+      applyStateActions(el.dataset.stickStateLoading);
+
+      try {
+        var res = await fetch(param, { method: 'GET' });
+        if (!res.ok) throw new Error(res.status + ' ' + res.statusText);
+        var json = await res.json();
+
+        if (mapStr) {
+          mapStr.split(',').forEach(function(entry) {
+            entry = entry.trim();
+            if (!entry) return;
+            var idx = entry.indexOf(':');
+            if (idx === -1) return;
+            var sel   = entry.slice(0, idx).trim();
+            var field = entry.slice(idx + 1).trim();
+            var found = document.querySelector(sel);
+            if (found && json[field] !== undefined) found.textContent = String(json[field]);
+          });
+        }
+
+        applyStateActions(el.dataset.stickStateDone);
+        await executeThenChain(el.dataset.stickThen, el);
+      } catch (err) {
+        console.error('[Stick:fetch-json]', err);
+        applyStateActions(el.dataset.stickStateError);
+      } finally {
+        el.removeAttribute('aria-busy');
+      }
     });
 
   // ── auto-init ─────────────────────────────────────────────────────