@my-life-buddies/buddy-creator-skill 1.6.0

package/assets/preview/widgets.js

@@ -0,0 +1,168 @@
+// Read-only mirror of the host's saved design workflow. No confirmation writes.
+const el = (tag, text, cls) => {
+  const node = document.createElement(tag);
+  if (text !== undefined) node.textContent = text;
+  if (cls) node.className = cls;
+  return node;
+};
+const root = document.getElementById('root');
+const nav = el('nav', undefined, 'design-navigation');
+nav.setAttribute('aria-label', '创作内容');
+const bookButton = el('button', '四册 Booklet');
+const designButton = el('button', '小挂件设计');
+const progress = el('span', '正在读取创作进度', 'design-progress');
+nav.append(bookButton, designButton, progress);
+document.body.prepend(nav);
+const panel = el('main', undefined, 'design-workspace');
+panel.hidden = true;
+document.body.append(panel);
+let chosen = false, previousPhase, version;
+const selectedStates = new Map();
+function choose(design, manual = false) {
+  if (manual) chosen = true;
+  root.hidden = design; panel.hidden = !design;
+  bookButton.setAttribute('aria-pressed', String(!design));
+  designButton.setAttribute('aria-pressed', String(design));
+  // Do not stop the upstream reader before its first snapshot selects a stage.
+  if (manual && root.querySelector('.preview-header')) document.dispatchEvent(new Event('buddy:reader-browse'));
+}
+bookButton.onclick = () => choose(false, true);
+designButton.onclick = () => choose(true, true);
+choose(false);
+const card = title => { const node = el('section', undefined, 'design-card'); node.append(el('h2', title)); return node; };
+const badge = (text, pass = false) => el('span', text, 'design-badge' + (pass ? ' passed' : ''));
+function field(parent, label, value) { const row = el('div', undefined, 'design-field'); row.append(el('dt', label), el('dd', value)); parent.append(row); }
+const reviewLabels = { 'booklet-fit': '符合搭子需求', 'reading-order': '阅读顺序与长内容', 'chat-consistency': '对话卡片与展开页一致', 'conversation-update': '数据随对话逐步更新', 'read-only': '只读交互边界' };
+function render(snapshot) {
+  const design = snapshot.widgetDesign;
+  if (!design) { nav.hidden = true; return; }
+  nav.hidden = false;
+  const index = design.steps.findIndex(step => step.id === design.phase);
+  progress.textContent = design.enabled ? design.steps.map((step, i) => (i < index ? '✓ ' : '') + step.label).join(' → ') : '已有作品';
+  if (!chosen && design.phase !== 'booklets' && design.phase !== 'legacy' && previousPhase !== design.phase) choose(true);
+  previousPhase = design.phase;
+  panel.replaceChildren();
+  const heading = el('div', undefined, 'design-heading');
+  heading.append(el('p', 'BOOKLET / 交互设计', 'design-eyebrow'), el('h1', '小挂件，让对话里的内容更好读'), el('p', design.nextStep));
+  if (snapshot.paused) heading.append(badge('创作已暂停；确认进度已保留'));
+  panel.append(heading);
+  const steps = el('ol', undefined, 'design-steps');
+  design.steps.forEach((step, i) => {
+    const li = el('li', undefined, i === index ? 'current' : i < index ? 'done' : '');
+    li.append(el('span', i < index ? '✓' : String(i + 1)), el('strong', step.label));
+    if (i === index) li.setAttribute('aria-current', 'step');
+    steps.append(li);
+  });
+  panel.append(steps, el('p', '此页同步清单、原型和验收进度。确认、补充和修改请在主对话中提出。', 'design-callout'));
+  const list = card('01 / 小挂件清单');
+  list.append(badge(design.catalogConfirmed ? '开发者已确认' : design.phase === 'booklets' ? '四册确认后开始' : '待开发者确认', design.catalogConfirmed));
+  if (!design.catalog) list.append(el('p', '完成四册后，将根据搭子的任务、持续服务和数据需求提出清单，供你确认、补充或调整。'));
+  else if (!design.items.length) list.append(el('p', design.catalog.data.noWidgetsReason), el('p', design.catalogConfirmed ? '已明确确认本作品不使用小挂件。' : '“不使用小挂件”也需要在主对话明确确认。'));
+  else {
+    for (const item of design.items) {
+      const entry = el('details', undefined, 'design-list-item'); entry.open = true;
+      entry.append(el('summary', item.name));
+      const fields = el('dl', undefined, 'design-specs');
+      for (const [label, key] of [['用途', 'purpose'], ['何时创建 / 展示', 'creationTrigger'], ['首次展示', 'initialContent'], ['对话更新规则', 'updateRules'], ['实例沿用 / 新建', 'instancePolicy'], ['对话摘要', 'conversationSummary']]) field(fields, label, item[key]);
+      field(fields, 'Booklet 依据', item.bookletRefs.map(ref => {
+        const source = snapshot.artifacts.find(a => a.id === ref.id);
+        const [stage, chapter] = ref.id.split('.');
+        const label = { definition: '定义', knowledge: '知识', methods: '方法', service: '服务' }[stage];
+        return label + '手册 · ' + (source?.title && source.title !== ref.id ? source.title : '第 ' + chapter + ' 章');
+      }).join('；'));
+      field(fields, '阅读能力', item.readInteractions.map(key => ({ tabs: '分组切换', filter: '预设筛选', collapse: '折叠', detail: '只读详情' })[key]).join('、') || '滚动阅读');
+      entry.append(fields);
+      const table = el('table'); const head = el('tr'); ['展示字段', '数据来源', '尚未补充时'].forEach(label => head.append(el('th', label))); table.append(head);
+      item.fields.forEach(f => { const row = el('tr'); [f.label, f.source, f.emptyText].forEach(value => row.append(el('td', value))); table.append(row); });
+      entry.append(table); list.append(entry);
+    }
+  }
+  panel.append(list);
+  const prototypes = card('02 / 原型确认');
+  prototypes.append(el('p', '同一份数据，两种展示方式。切换下方示例状态，再试用小挂件内的阅读操作。', 'design-muted'));
+  if (!design.items.length) prototypes.append(el('p', design.catalogConfirmed ? '已确认不需要小挂件，本阶段无需原型。' : '清单确认后生成原型。'));
+  for (const item of design.items) {
+    const section = el('section', undefined, 'design-prototype');
+    section.append(el('h3', item.name), badge(item.prototypeConfirmed ? '当前原型已确认' : '待确认原型', item.prototypeConfirmed));
+    if (!item.prototype || !item.automaticCheck.pass || Object.keys(item.blockers).length) {
+      section.append(el('p', !item.prototype ? '确认清单后生成该小挂件的原型。' : Object.keys(item.blockers).length ? '依据或清单已调整，请在主对话继续校准这一项。' : item.automaticCheck.message));
+    } else {
+      const prototype = item.prototype, data = prototype.data;
+      let selected = selectedStates.get(item.id) || 'initial';
+      const control = el('div', undefined, 'design-state-tabs'); control.setAttribute('aria-label', item.name + '示例状态');
+      const grid = el('div', undefined, 'design-views');
+      const refresh = () => {
+        grid.replaceChildren();
+        for (const view of ['chat', 'expanded']) {
+          const figure = el('figure');
+          figure.append(el('figcaption', view === 'chat' ? '出现在对话中' : '展开后阅读'));
+          const frame = el('iframe'); frame.title = item.name + ' / ' + (view === 'chat' ? '对话卡片' : '展开页');
+          frame.width = data.design.screenWidth; frame.height = data.design.screenHeight;
+          frame.sandbox = 'allow-scripts';
+          frame.src = './widget-assets/' + prototype.hash + '/index.html?view=' + view + '&state=' + selected;
+          frame.loading = 'lazy'; figure.append(frame);
+          const link = el('a', '查看示意图'); link.target = '_blank'; link.rel = 'noopener';
+          link.href = './widget-assets/' + prototype.hash + '/' + view + '-' + selected + '.svg'; figure.append(link);
+          grid.append(figure);
+        }
+      };
+      for (const sample of data.states) {
+        const button = el('button', sample.label); button.setAttribute('aria-pressed', String(sample.id === selected));
+        button.onclick = () => { selected = sample.id; selectedStates.set(item.id, selected); for (const b of control.children) b.setAttribute('aria-pressed', String(b === button)); refresh(); };
+        control.append(button);
+      }
+      const size = data.design;
+      section.append(el('p', '示例画布 ' + size.screenWidth + ' × ' + size.screenHeight + '；展开页 ' + (size.screenWidth - 32) + ' × ' + Math.round(size.screenHeight * .65) + '。', 'design-muted'), control, grid);
+      refresh();
+      section.append(el('p', '原型版本 ' + prototype.hash.slice(0, 10) + ' · 以上为示例数据，用于确认样式和交互。', 'design-muted'));
+    }
+    prototypes.append(section);
+  }
+  panel.append(prototypes);
+  const acceptance = card('03 / 设计验收');
+  acceptance.append(el('p', '自动检查验证结构与资源。开发者验收确认需求、阅读体验和对话更新是否符合预期。生产环境接入另行验证。', 'design-muted'));
+  for (const item of design.items) {
+    const group = el('section', undefined, 'design-acceptance');
+    group.append(el('h3', item.name), badge(item.accepted ? '开发者已验收当前版本' : '待开发者验收', item.accepted));
+    group.append(el('p', (item.automaticCheck.pass ? '✓ 自动检查：' : '○ 自动检查：') + item.automaticCheck.message));
+    const table = el('table'); const header = el('tr'); ['开发者检查项', '检查记录', '确认状态'].forEach(t => header.append(el('th', t))); table.append(header);
+    for (const key of design.reviewChecks) { const row = el('tr'); row.append(el('td', reviewLabels[key]), el('td', item.acceptance?.data.reviews[key] || '尚未记录'), el('td', item.accepted ? '已确认' : '待确认')); table.append(row); }
+    group.append(table);
+    if (item.acceptance?.unresolved?.length) group.append(el('p', '待处理：' + item.acceptance.unresolved.join('；')));
+    acceptance.append(group);
+  }
+  if (!design.items.length) acceptance.append(el('p', design.catalogConfirmed ? '已确认不需要小挂件，无需逐项设计验收。' : '原型确认后逐项验收。'));
+  panel.append(acceptance);
+  const deliverables = card('04 / 交付与开发衔接');
+  if (snapshot.completion?.status === 'ready' && snapshot.completion.files) {
+    deliverables.append(badge('成果已生成', true), el('p', '包含四册、服务模式图、小挂件清单、两视图三态原型和设计验收记录。'));
+    deliverables.append(el('p', '完整创建任务将在此处自动衔接开发：由当前 Agent 读取已确认手册与小挂件设计，继续实现，无需再次确认开始。仅设计、流程测试或已暂停的任务按原范围结束。实际开发进度请在主对话查看。', 'design-muted'));
+    const downloads = el('details'); downloads.append(el('summary', '查看全部成果文件'));
+    for (const file of snapshot.completion.files) {
+      const a = el('a', file); a.href = './deliverables/' + snapshot.revision + '/' + file; a.download = file.split('/').pop();
+      const row = el('p'); row.append(a); downloads.append(row);
+      if (file === 'BUDDY_MANUAL.md' || file === 'WIDGET_DESIGN.md') { const quick = a.cloneNode(true); quick.className = 'design-download'; quick.textContent = file === 'BUDDY_MANUAL.md' ? '下载创作手册' : '下载小挂件设计说明'; deliverables.append(quick); }
+    }
+    deliverables.append(downloads);
+  } else deliverables.append(el('p', snapshot.completion?.message || '清单、当前原型及设计验收确认完成后生成交付。四册内容可先在 Booklet 中阅读。'));
+  panel.append(deliverables);
+}
+let loading = false;
+async function update() {
+  if (loading) return;
+  loading = true;
+  try {
+    const response = await fetch('./api/snapshot');
+    if (!response.ok) throw new Error('snapshot unavailable');
+    const snapshot = await response.json();
+    const next = JSON.stringify([snapshot.widgetDesign, snapshot.completion, snapshot.paused]);
+    if (next !== version) { version = next; render(snapshot); }
+  } catch { progress.textContent = '页面暂时无法同步；已展示的内容保留，请回主对话查看进度。'; }
+  finally { loading = false; }
+}
+update();
+const events = new EventSource('./api/events');
+events.addEventListener('changed', update);
+events.addEventListener('ready', update);
+events.addEventListener('unavailable', () => { progress.textContent = '内容暂时无法读取，请回主对话检查。'; });
+document.addEventListener('visibilitychange', () => { if (!document.hidden) update(); });

package/assets/widget-v2/app.js

@@ -0,0 +1,62 @@
+"use strict";
+const params = new URLSearchParams(location.search);
+const requested = params.get('state') || 'initial';
+const screens = [...document.querySelectorAll('.screen')];
+const screen = screens.find(node => node.dataset.state === requested) || screens[0];
+for (const node of screens) node.hidden = node !== screen;
+const overlay = screen.querySelector('.overlay');
+const details = screen.querySelector('.detail-layer');
+const open = screen.querySelector('.open-sheet');
+const close = screen.querySelector('.sheet-close');
+const detailClose = screen.querySelector('.detail-close');
+let returnFocus = null;
+function closeDetail() {
+  details.hidden = true;
+  if (returnFocus) returnFocus.focus();
+}
+function closeSheet() {
+  closeDetail();
+  overlay.hidden = true;
+  screen.querySelector('.chat-body').inert = false;
+  open.focus();
+}
+open.addEventListener('click', () => {
+  overlay.hidden = false;
+  screen.querySelector('.chat-body').inert = true;
+  close.focus();
+});
+close.addEventListener('click', closeSheet);
+detailClose.addEventListener('click', closeDetail);
+for (const button of screen.querySelectorAll('[data-group]')) {
+  button.addEventListener('click', () => {
+    const selected = button.dataset.group;
+    for (const option of screen.querySelectorAll('[data-group]')) option.setAttribute('aria-pressed', String(option.dataset.group === selected));
+    for (const section of screen.querySelectorAll('[data-section]')) section.hidden = selected !== 'all' && section.dataset.section !== selected;
+  });
+}
+for (const button of screen.querySelectorAll('.detail-open')) {
+  button.addEventListener('click', () => {
+    returnFocus = button;
+    const row = button.closest('.row');
+    screen.querySelector('.detail-title').textContent = row.querySelector('.row-label').textContent;
+    screen.querySelector('.detail-text').textContent = row.querySelector('.detail-copy').textContent;
+    details.hidden = false;
+    detailClose.focus();
+  });
+}
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') {
+    if (!details.hidden) closeDetail();
+    else if (!overlay.hidden) closeSheet();
+  }
+  if (event.key === 'Tab' && !overlay.hidden) {
+    const scope = details.hidden ? screen.querySelector('.sheet') : screen.querySelector('.detail-box');
+    const buttons = [...scope.querySelectorAll('button,summary')].filter(el => el.getClientRects().length);
+    const first = buttons[0], last = buttons[buttons.length - 1];
+    if (event.shiftKey && document.activeElement === first) {event.preventDefault();last.focus();}
+    else if (!event.shiftKey && document.activeElement === last) {event.preventDefault();first.focus();}
+  }
+});
+overlay.hidden = params.get('view') !== 'expanded';
+screen.querySelector('.chat-body').inert = !overlay.hidden;
+if (!overlay.hidden) close.focus({preventScroll:true});

package/assets/widget-v2/style.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;color:#243C37;background:#FCFCF9}button{font:inherit;color:inherit;cursor:pointer}button,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-size:var(--title-size,16px);font-weight:500}svg{display:block;flex:none}button{border:0}button:active{transform:scale(.97)}.screen{font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;color:#243C37;position:relative;width:100%;height:100%;overflow:hidden;--accent:#28645B;--soft:#EAF1E9;--muted:#75817B;--line:#E5E9E1;background:#FCFCF9}.icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}.statusbar{height:38px;padding:12px 25px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500}.statusbar .device{display:flex;align-items:center;gap:5px}.device .icon{width:17px;height:17px}.chat-header{height:61px;padding:5px 19px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #E9ECE6;background:#FCFCF9}.chat-header .back{margin-right:2px}.buddy-identity{flex:1}.buddy-identity strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.3px}.buddy-identity small{display:block;font-size:11px;color:var(--muted);margin-top:1px}.header-mark{width:33px;height:33px;border-radius:12px;background:var(--accent);color:white;display:grid;place-items:center;font-size:16px;font-weight:500}.chat-body{height:calc(100% - 178px);overflow-y:auto;padding:20px 16px 30px;scrollbar-width:none}.chat-date{text-align:center;font-size:11px;color:#929A93;margin:0 0 17px;letter-spacing:.3px}.message{display:flex;gap:9px;margin:13px 0;align-items:flex-start}.avatar{width:26px;height:26px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:500;flex:none;margin-top:3px}.bubble{padding:12px 14px;max-width:calc(100% - 41px);font-size:16px;line-height:1.65;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere}.message.user{justify-content:flex-end;margin-bottom:20px}.user .bubble{background:#E6EEEB;border-top-right-radius:5px}.assistant .bubble{background:#F1F2EC;border-top-left-radius:5px}.chat-card{margin:16px 0 0 35px;border:1px solid #E2E7DC;border-radius:21px;background:#fff;overflow:hidden;box-shadow:0 5px 22px #334F3710}.card-top{padding:16px 16px 13px;display:flex;align-items:center;gap:11px}.identity-icon{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:13px;color:var(--accent);background:var(--soft)}.card-kind{font-size:11px;color:var(--muted);letter-spacing:.4px;margin-bottom:2px}.chat-card h1{font-size:16px;letter-spacing:-.3px}.card-summary{font-size:16px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;padding:0 16px 14px}.card-meta{margin:0 16px 15px;padding:10px 0;border-top:1px solid var(--line);display:flex;gap:16px}.card-meta .metric{flex:1;min-width:0}.metric-label{font-size:11px;color:var(--muted);display:block}.metric-value{font-size:16px;font-weight:500;display:block;margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.open-sheet{width:calc(100% - 32px);margin:0 16px 15px;padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500}.open-sheet .icon{width:17px;height:17px}.card-foot{font-size:11px;color:var(--muted);padding:0 16px 14px;display:flex;align-items:center;gap:5px}.card-foot .icon{width:12px;height:12px}.composer{position:absolute;bottom:19px;left:16px;right:16px;display:flex;align-items:center;gap:10px;border:1px solid #E5E8DE;border-radius:16px;background:#fff;padding:12px;color:#859087;font-size:12px;min-height:49px;box-shadow:0 3px 17px #334F3708}.composer span{flex:1}.home-indicator{position:absolute;bottom:7px;left:36%;right:36%;height:4px;background:#35433E;border-radius:9px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#263F3552;backdrop-filter:blur(2px);z-index:2}.sheet{width:calc(100% - 32px);height:65%;border-radius:25px;background:#FFFEFB;box-shadow:0 22px 60px #17362B30;display:flex;flex-direction:column;overflow:hidden;position:relative}.sheet-header{padding:14px 16px;display:flex;gap:10px;align-items:center;flex:none;min-height:66px;border-bottom:1px solid #E8ECE2}.sheet-header .identity-icon{width:32px;height:32px;border-radius:11px}.sheet-header .icon{width:19px;height:19px}.sheet-header h2{flex:1;font-size:16px;letter-spacing:-.2px}.close{width:32px;height:32px;flex:none;border:1px solid #E5E8DF;border-radius:50%;background:#FFFEFB;display:grid;place-items:center;color:#526B5E}.close .icon{width:16px;height:16px}.sheet-body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#CBD3C5 transparent;min-height:0;flex:1;padding:0 16px 16px}.overview{padding:18px 0 15px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;color:var(--accent);letter-spacing:1.2px;font-weight:500;margin-bottom:6px}.overview-title{font-size:20px;line-height:1.4;letter-spacing:-.5px;font-weight:500;color:#203D31}.overview-subtitle{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5;white-space:pre-wrap}.overview-metrics{display:grid;grid-template-columns:repeat(var(--metric-count),1fr);gap:10px;margin-top:14px}.overview-metrics .metric{padding-left:10px;border-left:1px solid #DDE4D7;min-width:0}.overview-metrics .metric:first-child{padding-left:0;border-left:0}.overview-metrics .metric-value{font-size:20px;line-height:1.35;letter-spacing:-.4px}.progress-track{height:5px;background:#E4EADB;border-radius:9px;overflow:hidden;margin-top:14px}.progress-fill{height:100%;background:var(--accent);border-radius:9px}.progress-caption{font-size:11px;color:var(--muted);margin-top:6px}.reading-nav{position:sticky;top:0;z-index:1;background:#FFFEFB;padding:13px 0 10px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;box-shadow:0 3px 0 #FFFEFB}.reading-nav button{border:1px solid #E3E8DC;background:#F5F6EF;border-radius:10px;padding:8px 12px;flex:none;font-size:13px;white-space:nowrap;color:#6B7C6D}.reading-nav button[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 3px 7px #205C4120}.section{margin:8px 0 18px}.section-heading{font-size:13px;font-weight:500;color:#53694F;margin:0 0 9px;padding:5px 0;display:flex;align-items:center;gap:8px;cursor:default;list-style:none}.section-heading::-webkit-details-marker{display:none}.section-heading .icon{width:14px;height:14px;margin-left:auto;transition:transform .16s ease}summary.section-heading{cursor:pointer}details[open]>summary .icon{transform:rotate(90deg)}.section-count{font-size:10px;color:#809077;background:#EEF1E7;padding:1px 6px;border-radius:5px}.row{display:flex;gap:10px;position:relative;align-items:flex-start;padding:13px 0;border-bottom:1px solid #E8ECE2}.row:last-child{border-bottom:0}.row-symbol{width:29px;height:29px;flex:none;color:var(--accent);border:1px solid #E0E7D8;background:#F4F6EE;border-radius:10px;display:grid;place-items:center;margin-top:1px}.row-symbol .icon{width:17px;height:17px}.row-content{flex:1;min-width:0}.row-label{font-size:16px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}.row-value{font-size:16px;font-weight:400;line-height:1.6;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;color:#405348}.row-caption{font-size:12px;line-height:1.55;color:var(--muted);margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}.status{display:inline-flex;align-items:center;gap:4px;font-size:10px;line-height:1.5;padding:3px 7px;border-radius:6px;margin-top:7px;color:#687565;background:#EEF1E8}.status:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}.status.positive{color:#2D6A50;background:#EAF2E7}.status.pending{color:#92662E;background:#F7EFDC}.status.changed{color:#416B7A;background:#E9F0F1}.status.neutral{color:#73806E;background:#EDF0E8}.detail-open{flex:none;background:transparent;padding:8px 0 8px 4px;border-radius:9px;color:#849477;margin-top:2px;min-width:28px;min-height:36px}.detail-open .icon{width:17px;height:17px}.timeline .row{border:0;padding-left:63px;min-height:88px;padding-top:7px;padding-bottom:17px}.timeline .row:before{content:"";position:absolute;left:46px;top:15px;bottom:-8px;width:1px;background:#DAE3D1}.timeline .row:last-child:before{bottom:15px}.timeline .row:after{content:"";position:absolute;left:42px;top:13px;width:9px;height:9px;background:var(--accent);border:2px solid #FFFEFB;border-radius:50%;box-shadow:0 0 0 1px #BDD0B6}.timeline .row-label{position:absolute;left:0;top:10px;width:35px;font-size:11px;line-height:1.5;font-weight:500;font-variant-numeric:tabular-nums;color:#6F826A}.timeline .row-value{font-size:16px;color:#243C37;margin:0}.timeline .row-symbol{display:none}.cards .row{background:#F5F6F0;border:1px solid #E6EADF;border-radius:16px;padding:14px 12px;margin-bottom:10px}.cards .row:last-child{border-bottom:1px solid #E6EADF}.cards .row-symbol{background:#FFFEFB}.ledger .row{align-items:center}.ledger .row-content{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}.ledger .row-label{font-size:16px;font-weight:400}.ledger .row-value{font-size:16px;font-weight:500;margin:0;text-align:right;font-variant-numeric:tabular-nums}.ledger .row-caption,.ledger .status{grid-column:1/-1}.ledger .status{justify-self:start}.checklist .row{padding:12px 0}.checklist .row-symbol{border-radius:50%;width:24px;height:24px;margin-top:2px;background:transparent}.checklist .row.positive .row-symbol{background:#EAF2E7;color:#2D6A50;border-color:#C4D4BD}.checklist .row-value{font-size:16px;color:#687B60}.note{display:flex;align-items:flex-start;gap:6px;border-top:1px solid var(--line);padding-top:13px;font-size:11px;color:#8A9580;line-height:1.5}.note .icon{width:13px;height:13px;margin-top:1px}.detail-layer{position:absolute;inset:0;background:#263F3566;display:grid;place-items:center;z-index:3}.detail-box{width:calc(100% - 32px);max-height:65%;overflow-y:auto;background:#FFFEFB;border-radius:23px;padding:18px;box-shadow:0 15px 40px #18382B26}.detail-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.detail-head h3{flex:1;font-size:16px}.detail-text{font-size:16px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}.detail-foot{font-size:11px;color:var(--muted);border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:no-preference){button{transition:background .16s ease,transform .16s ease,box-shadow .16s ease}.overlay{animation:veil .18s ease both}.sheet{animation:arrive .24s cubic-bezier(.2,.8,.2,1) both}.detail-box{animation:arrive .2s ease both}@keyframes arrive{from{transform:translateY(8px) scale(.99);opacity:.3}to{transform:none;opacity:1}}@keyframes veil{from{opacity:0}to{opacity:1}}}.svg-export *{animation:none!important;transition:none!important}.svg-export .overlay{backdrop-filter:none}

package/assets/widget-v3/app.js

@@ -0,0 +1,65 @@
+"use strict";
+const params = new URLSearchParams(location.search);
+const requested = params.get('state') || 'initial';
+const screens = [...document.querySelectorAll('.screen')];
+const screen = screens.find(node => node.dataset.state === requested) || screens[0];
+for (const node of screens) node.hidden = node !== screen;
+const overlay = screen.querySelector('.overlay');
+const details = screen.querySelector('.detail-layer');
+const sheet = screen.querySelector('.sheet');
+const open = screen.querySelector('.open-sheet');
+const close = screen.querySelector('.sheet-close');
+const detailClose = screen.querySelector('.detail-close');
+let returnFocus = null;
+function closeDetail() {
+  details.hidden = true;
+  sheet.inert = false;
+  if (returnFocus) returnFocus.focus();
+}
+function closeSheet() {
+  closeDetail();
+  overlay.hidden = true;
+  screen.querySelector('.chat-body').inert = false;
+  open.focus();
+}
+open.addEventListener('click', event => {
+  overlay.hidden = false;
+  screen.querySelector('.chat-body').inert = true;
+  (event.detail === 0 ? close : sheet).focus({preventScroll:true});
+});
+close.addEventListener('click', closeSheet);
+detailClose.addEventListener('click', closeDetail);
+for (const button of screen.querySelectorAll('[data-group]')) {
+  button.addEventListener('click', () => {
+    const selected = button.dataset.group;
+    for (const option of screen.querySelectorAll('[data-group]')) option.setAttribute('aria-pressed', String(option.dataset.group === selected));
+    for (const section of screen.querySelectorAll('[data-section]')) section.hidden = selected !== 'all' && section.dataset.section !== selected;
+  });
+}
+for (const button of screen.querySelectorAll('.detail-open')) {
+  button.addEventListener('click', () => {
+    returnFocus = button;
+    const row = button.closest('.row');
+    screen.querySelector('.detail-title').textContent = row.querySelector('.row-label, .row-value').textContent;
+    screen.querySelector('.detail-text').textContent = row.querySelector('.detail-copy').textContent;
+    details.hidden = false;
+    sheet.inert = true;
+    detailClose.focus();
+  });
+}
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') {
+    if (!details.hidden) closeDetail();
+    else if (!overlay.hidden) closeSheet();
+  }
+  if (event.key === 'Tab' && !overlay.hidden) {
+    const scope = details.hidden ? screen.querySelector('.sheet') : screen.querySelector('.detail-box');
+    const buttons = [...scope.querySelectorAll('button,summary')].filter(el => el.getClientRects().length);
+    const first = buttons[0], last = buttons[buttons.length - 1];
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === sheet)) {event.preventDefault();last.focus();}
+    else if (!event.shiftKey && document.activeElement === last) {event.preventDefault();first.focus();}
+  }
+});
+overlay.hidden = params.get('view') !== 'expanded';
+screen.querySelector('.chat-body').inert = !overlay.hidden;
+if (!overlay.hidden) sheet.focus({preventScroll:true});

package/assets/widget-v3/style.css

@@ -0,0 +1,103 @@
+* { box-sizing: border-box; }
+html, body { margin: 0; width: 100%; height: 100%; background: #fff; }
+button { font: inherit; color: inherit; border: 0; cursor: pointer; }
+button, summary { -webkit-tap-highlight-color: transparent; }
+button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+[hidden] { display: none !important; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-size: var(--title-size, 16px); font-weight: 500; }
+.screen { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; color: #202733; position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; --accent: #326BC4; --muted: #7C8490; --line: #E9EDF2; }
+.icon { display: block; flex: none; width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.statusbar { height: 40px; padding: 10px 25px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; }
+.device { display: flex; gap: 5px; }
+.device .icon { width: 16px; height: 16px; }
+.chat-header { height: 56px; padding: 0 20px 10px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
+.chat-header strong { flex: 1; text-align: center; font-size: 16px; font-weight: 500; }
+.back { font-size: 28px; line-height: 1; }
+.chat-body { height: calc(100% - 176px); overflow-y: auto; padding: 20px 16px 28px; scrollbar-width: none; }
+.chat-date { color: #9299A3; text-align: center; font-size: 11px; margin-bottom: 18px; }
+.message { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0; }
+.avatar { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #E9F0FB; color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 500; margin-top: 3px; }
+.bubble { max-width: calc(100% - 38px); font-size: 16px; line-height: 1.65; padding: 12px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.user { justify-content: flex-end; }
+.user .bubble { background: #EAF1FB; border-top-right-radius: 3px; }
+.assistant .bubble { background: #F4F5F7; border-top-left-radius: 3px; }
+.chat-card { margin: 16px 0 0 35px; border: 1px solid #DFE5ED; border-radius: 14px; background: #fff; overflow: hidden; }
+.card-content { padding: 17px 16px 18px; }
+.card-kind { font-size: 12px; color: var(--accent); margin-bottom: 8px; }
+.chat-card h1 { font-size: 16px; font-weight: 500; line-height: 1.45; }
+.card-summary { font-size: 16px; line-height: 1.65; color: #66707E; margin-top: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.open-sheet { width: 100%; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #fff; color: var(--accent); font-size: 14px; font-weight: 500; }
+.open-sheet .icon { width: 17px; height: 17px; }
+.open-sheet:hover { background: #F6F8FC; }
+.composer { position: absolute; bottom: 19px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 12px; border: 1px solid #E6E9EF; border-radius: 14px; background: #fff; color: #9299A3; font-size: 12px; }
+.composer span { flex: 1; }
+.home-indicator { position: absolute; bottom: 7px; left: 36%; right: 36%; height: 4px; border-radius: 8px; background: #252C37; }
+.overlay { position: absolute; inset: 0; z-index: 2; background: #17243B45; display: grid; place-items: center; }
+.sheet { width: calc(100% - 32px); height: 65%; border-radius: 22px; background: #fff; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 12px 36px #192B4720; outline: none; }
+.sheet-header { flex: none; height: 60px; display: flex; align-items: center; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); }
+.sheet-header h2 { flex: 1; font-size: 16px; font-weight: 500; }
+.close { width: 32px; height: 32px; background: transparent; color: #8490A0; border-radius: 8px; display: grid; place-items: center; flex: none; }
+.close .icon { width: 20px; height: 20px; }
+.close:hover { background: #F3F5F8; color: #26344C; }
+.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; scrollbar-width: thin; scrollbar-color: #D5DBE5 transparent; }
+.overview { padding: 22px 0 15px; }
+.overview h3 { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.4px; }
+.overview-subtitle { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.6; white-space: pre-wrap; }
+.reading-meta { color: #606E81; font-size: 13px; margin-top: 12px; }
+.overview-metrics { display: grid; grid-template-columns: repeat(var(--metric-count), 1fr); gap: 16px; margin-top: 22px; }
+.metric-label { display: block; font-size: 12px; color: var(--muted); }
+.metric-value { display: block; font-size: 20px; font-weight: 500; line-height: 1.4; margin-top: 4px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.overview-metrics .metric:first-child .metric-value { color: var(--accent); }
+.progress-track { height: 3px; overflow: hidden; background: #ECF0F5; margin-top: 16px; }
+.progress-track > div { height: 100%; background: var(--accent); }
+.progress-caption { font-size: 11px; color: var(--muted); margin-top: 7px; }
+.reading-nav { position: sticky; top: 0; z-index: 1; display: flex; gap: 22px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
+.reading-nav button { flex: none; position: relative; padding: 12px 0; font-size: 14px; background: transparent; color: #8A93A1; white-space: nowrap; }
+.reading-nav button[aria-pressed=true] { color: var(--accent); font-weight: 500; }
+.reading-nav button[aria-pressed=true]:after { position: absolute; content: ""; height: 2px; background: var(--accent); left: 0; right: 0; bottom: 0; }
+.reading-nav button:hover { color: var(--accent); }
+.section { margin: 20px 0 24px; }
+.section-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #8A93A1; font-size: 12px; font-weight: 400; line-height: 1.5; list-style: none; }
+.section-heading::-webkit-details-marker { display: none; }
+summary.section-heading { cursor: pointer; padding: 4px 0; }
+.section-heading .icon { margin-left: auto; width: 13px; height: 13px; }
+details[open] > summary .icon { transform: rotate(90deg); }
+.row { display: flex; align-items: flex-start; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
+.row:last-child { border-bottom: none; }
+.row-content { flex: 1; min-width: 0; }
+.row-label { font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
+.row-value { font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 4px; color: #263243; white-space: pre-wrap; overflow-wrap: anywhere; }
+.row-caption { font-size: 13px; color: #87909D; line-height: 1.6; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.status { display: inline-block; font-size: 12px; line-height: 1.5; color: #8893A2; margin-top: 8px; }
+.status.pending { color: #956B40; }
+.status.changed { color: var(--accent); }
+.detail-open { min-height: 38px; width: 26px; background: transparent; color: #9BA5B3; display: grid; place-items: center; padding: 0; flex: none; border-radius: 5px; }
+.detail-open .icon { width: 15px; height: 15px; }
+.timeline .row { position: relative; border: 0; gap: 21px; padding: 9px 0 23px; min-height: 82px; }
+.timeline .time { flex: none; width: 36px; color: #738196; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.6; padding-top: 3px; overflow-wrap: anywhere; }
+.timeline .row:before { position: absolute; content: ""; left: 45px; top: 19px; bottom: -11px; width: 1px; background: #E2EAF6; }
+.timeline .row:last-child:before { display: none; }
+.timeline .row:after { position: absolute; content: ""; left: 43px; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
+.timeline .row-value { margin-top: 0; }
+.cards .row { padding: 16px 0 18px; }
+.cards .row-value { color: #68758A; }
+.ledger .row-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
+.ledger .row-label { font-size: 16px; font-weight: 400; }
+.ledger .row-value { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
+.ledger .row-caption, .ledger .status { grid-column: 1 / -1; }
+.checklist .row-value { color: #718098; }
+.note { border-top: 1px solid var(--line); padding-top: 14px; color: #A1A8B2; font-size: 11px; }
+.detail-layer { position: absolute; inset: 0; z-index: 3; background: #17243B45; display: grid; place-items: center; }
+.detail-box { width: calc(100% - 32px); max-height: 65%; overflow-y: auto; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 12px 36px #192B4720; }
+.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+.detail-head h3 { flex: 1; font-size: 16px; }
+.detail-text { font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
+.detail-foot { color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }
+@media (prefers-reduced-motion: no-preference) {
+  button { transition: color .15s, background .15s; }
+  button:active { opacity: .7; }
+  .sheet, .detail-box { animation: enter .18s ease-out both; }
+  @keyframes enter { from { transform: translateY(6px); opacity: .5; } to { transform: none; opacity: 1; } }
+}
+.svg-export * { animation: none !important; transition: none !important; }

package/assets/widget-v4/app.js

@@ -0,0 +1,66 @@
+"use strict";
+const params = new URLSearchParams(location.search);
+const requested = params.get('state') || 'initial';
+const screens = [...document.querySelectorAll('.screen')];
+const screen = screens.find(node => node.dataset.state === requested) || screens[0];
+for (const node of screens) node.hidden = node !== screen;
+const overlay = screen.querySelector('.overlay');
+const details = screen.querySelector('.detail-layer');
+const sheet = screen.querySelector('.sheet');
+const open = screen.querySelector('.open-sheet');
+const close = screen.querySelector('.sheet-close');
+const detailClose = screen.querySelector('.detail-close');
+let returnFocus = null;
+function closeDetail() {
+  details.hidden = true;
+  sheet.inert = false;
+  if (returnFocus) returnFocus.focus();
+}
+function closeSheet() {
+  closeDetail();
+  overlay.hidden = true;
+  screen.querySelector('.chat-body').inert = false;
+  open.focus();
+}
+open.addEventListener('click', event => {
+  overlay.hidden = false;
+  screen.querySelector('.chat-body').inert = true;
+  (event.detail === 0 ? close : sheet).focus({preventScroll:true});
+});
+close.addEventListener('click', closeSheet);
+detailClose.addEventListener('click', closeDetail);
+for (const button of screen.querySelectorAll('[data-group]')) {
+  button.addEventListener('click', () => {
+    const selected = button.dataset.group;
+    for (const option of screen.querySelectorAll('[data-group]')) option.setAttribute('aria-pressed', String(option.dataset.group === selected));
+    for (const section of screen.querySelectorAll('[data-section]')) section.hidden = selected !== 'all' && section.dataset.section !== selected;
+  });
+}
+for (const button of screen.querySelectorAll('.detail-open')) {
+  button.addEventListener('click', () => {
+    returnFocus = button;
+    const row = button.closest('.row');
+    screen.querySelector('.detail-title').textContent = row.querySelector('.row-label, .row-value').textContent;
+    screen.querySelector('.detail-text').textContent = row.querySelector('.detail-copy').textContent;
+    details.hidden = false;
+    sheet.inert = true;
+    detailClose.focus();
+  });
+}
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') {
+    if (!details.hidden) closeDetail();
+    else if (!overlay.hidden) closeSheet();
+  }
+  if (event.key === 'Tab' && !overlay.hidden) {
+    const scope = details.hidden ? screen.querySelector('.sheet') : screen.querySelector('.detail-box');
+    const buttons = [...scope.querySelectorAll('button,summary')].filter(el => el.getClientRects().length);
+    const first = buttons[0], last = buttons[buttons.length - 1];
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === sheet)) {event.preventDefault();last.focus();}
+    else if (!event.shiftKey && document.activeElement === last) {event.preventDefault();first.focus();}
+  }
+});
+overlay.hidden = params.get('view') !== 'expanded';
+screen.querySelector('.chat-body').inert = !overlay.hidden;
+// Embedded examples must not steal the Booklet's focus or reading position.
+if (!overlay.hidden && window === window.top) sheet.focus({preventScroll:true});