@khanglvm/relay 0.10.2 → 0.11.0

package/src/ui/blocks.css

@@ -545,3 +545,28 @@ body.blk-full-open { overflow: hidden; }
 /* code blocks reuse the viewer toolbar (comment + full-screen); the pre keeps
    its own card, the wrapper only hosts the toolbar strip */
 .blk-codewrap { position: relative; }
+
+/* ---------- palette block (swatch cards; hover reveals hex, click copies) ---------- */
+.blk-palette .pal-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 2px 0 10px; }
+.blk-palette .pal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
+.pal-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
+.pal-card.pal-spotlight { margin-bottom: 16px; }
+.pal-swatches { display: flex; height: 72px; }
+.pal-spotlight .pal-swatches { height: 104px; }
+.pal-sw { flex: 1; position: relative; cursor: pointer; border: 0; padding: 0; transition: flex .2s var(--ease); }
+.pal-sw:hover { flex: 1.6; }
+.pal-hex { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--mono, ui-monospace, "SF Mono", monospace); background: rgba(0,0,0,.42); color: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
+.pal-sw:hover .pal-hex, .pal-sw.copied .pal-hex { opacity: 1; }
+.pal-sw.copied::after { content: "Copied"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 600 9px/1 var(--sans); background: var(--ok); color: #fff; padding: 2px 7px; border-radius: 4px; }
+.pal-info { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.pal-spotlight .pal-info { padding: 12px 16px; }
+.pal-name { font-size: 14px; font-weight: 600; color: var(--fg); }
+.pal-spotlight .pal-name { font-size: 15px; }
+.pal-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
+.pal-tag { flex: none; font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 20px; background: var(--bg-sunken); color: var(--fg-2); }
+.pal-tag.tone-warm { background: #FAECE7; color: #993C1D; }
+.pal-tag.tone-cool { background: #E6F1FB; color: #185FA5; }
+.pal-tag.tone-neutral { background: #F1EFE8; color: #5F5E5A; }
+.pal-tag.tone-nature { background: #EAF3DE; color: #3B6D11; }
+.pal-tag.tone-bold { background: #FBEAF0; color: #72243E; }
+.pal-tag.tone-digital { background: #EEEDFE; color: #3C3489; }

package/src/ui/blocks.js

@@ -1426,6 +1426,65 @@
     return container;
   }
 
+  // ---------- palette ----------
+  // Color palettes as swatch cards: hover a swatch to reveal its hex, click to
+  // copy it. One palette may be {featured:true} → a larger spotlight row. Lets
+  // an agent present a curated palette with one structured block instead of
+  // hand-writing HTML. Swatches and the whole block are commentable.
+  function copyColor(text, btn) {
+    const done = () => {
+      btn.classList.add('copied');
+      setTimeout(() => btn.classList.remove('copied'), 900);
+    };
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(done, () => {});
+        return;
+      }
+    } catch { /* fall through */ }
+    done(); // no clipboard (sandbox) — still flash feedback
+  }
+
+  function paletteCard(p, big, ctx, blockId) {
+    const card = el('div', { class: 'pal-card' + (big ? ' pal-spotlight' : '') });
+    const row = el('div', { class: 'pal-swatches' });
+    for (const c of p.colors) {
+      const sw = el('button', { class: 'pal-sw', type: 'button', style: 'background:' + c, title: 'Copy ' + c });
+      sw.append(el('span', { class: 'pal-hex' }, c));
+      sw.addEventListener('click', () => copyColor(c, sw));
+      if (ctx.annotate) {
+        ctx.annotate.register(sw, {
+          blockId,
+          questionId: ctx.questionId,
+          target: { kind: 'swatch', label: (p.name ? p.name + ' · ' : '') + c },
+        });
+      }
+      row.append(sw);
+    }
+    card.append(row);
+    const info = el('div', { class: 'pal-info' });
+    const meta = el('div', { class: 'pal-meta' });
+    if (p.name) meta.append(el('div', { class: 'pal-name' }, p.name));
+    if (p.sub) meta.append(el('div', { class: 'pal-sub' }, p.sub));
+    info.append(meta);
+    if (p.tag) info.append(el('span', { class: 'pal-tag' + (p.tagTone ? ' tone-' + p.tagTone : '') }, p.tag));
+    if (p.name || p.sub || p.tag) card.append(info);
+    return card;
+  }
+
+  function renderPalette(block, ctx, blockId) {
+    const wrap = el('div', { class: 'blk-palette' });
+    const palettes = Array.isArray(block.palettes) ? block.palettes : [];
+    if (block.title) wrap.append(el('div', { class: 'pal-title' }, block.title));
+    const grid = el('div', { class: 'pal-grid' });
+    for (const p of palettes) {
+      if (p.featured) wrap.append(paletteCard(p, true, ctx, blockId));
+      else grid.append(paletteCard(p, false, ctx, blockId));
+    }
+    if (grid.childNodes.length) wrap.append(grid);
+    return wrap;
+  }
+
   // ---------- viewer controls (zoom / fit / full-screen) ----------
   // Large diagrams get squeezed to the column width; these controls let the
   // user zoom (buttons or cmd/ctrl+wheel) and expand any visual block into a
@@ -1753,6 +1812,10 @@
         inner = renderImage(block, ctx, blockId);
         wrapper.append(inner);
         break;
+      case 'palette':
+        inner = renderPalette(block, ctx, blockId);
+        wrapper.append(inner);
+        break;
       default:
         wrapper.append(el('div', { class: 'blk-error' }, 'Unknown block type: ' + esc(String(block.type))));
     }

package/src/ui/style.css

@@ -311,3 +311,14 @@ textarea { min-height: 90px; resize: vertical; }
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
 }
+
+/* ---------- color picker question (native input + hex + presets) ---------- */
+.colorpick { display: flex; flex-direction: column; gap: 10px; }
+.colorrow { display: flex; align-items: center; gap: 10px; }
+.colorswatch { width: 48px; height: 38px; padding: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); cursor: pointer; }
+.colorswatch::-webkit-color-swatch-wrapper { padding: 3px; }
+.colorswatch::-webkit-color-swatch { border: 0; border-radius: 7px; }
+.colorhex { width: 150px; font-family: var(--mono, ui-monospace, "SF Mono", monospace); text-transform: lowercase; }
+.colorpresets { display: flex; flex-wrap: wrap; gap: 8px; }
+.colorpreset { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; transition: transform .12s var(--ease); }
+.colorpreset:hover { transform: scale(1.12); }