openplanr 2.5.0 → 2.6.0

package/lib/host-packages/claude/openplanr/skills/design/scripts/runtime/packages/design/templates/studio/handoff-center.js

@@ -0,0 +1,400 @@
+/* Five-step Design Handoff Center. Domain decisions stay in server projections. */
+(() => {
+  'use strict';
+  if (document.currentScript && !document.currentScript.isConnected) return;
+
+  const q = (selector, parent = document) => parent.querySelector(selector);
+  const node = (tag, text = '', attrs = {}) => {
+    const value = document.createElement(tag);
+    if (text) value.textContent = text;
+    for (const [key, entry] of Object.entries(attrs)) if (entry !== undefined && entry !== null && entry !== false) value.setAttribute(key, entry);
+    return value;
+  };
+  const action = (label, run, attrs = {}) => {
+    const value = node('button', label, { type: 'button', ...attrs });
+    value.addEventListener('click', run);
+    return value;
+  };
+  const plainPackage = value => ({
+    id: value.id,
+    title: value.title,
+    sources: structuredClone(value.sources || []),
+    requirements: (value.requirements || []).map(({ id: _id, ...requirement }) => structuredClone(requirement)),
+  });
+  const requestId = prefix => `${prefix}-${globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`}`;
+  const labels = { ready: 'Ready', pass: 'Complete', attention: 'Needs attention', blocked: 'Blocked', stale: 'Out of date', absent: 'Not available', approved: 'Approved', draft: 'Draft', superseded: 'Superseded', revoked: 'Revoked' };
+  const steps = [
+    ['readiness', 'Readiness'],
+    ['review', 'Review resolution'],
+    ['package', 'Implementation package'],
+    ['approval', 'Owner approval'],
+    ['plan', 'Continue to Plan'],
+  ];
+
+  let bridge, root, panel, opener, activeStep = 'readiness', serial = 0;
+  const state = { readiness: null, review: null, implementation: null, errors: {} };
+
+  const readiness = () => state.readiness?.readiness || state.readiness;
+  const approvedReview = () => Boolean(state.review?.current && state.review?.draft?.status === 'approved');
+  const packageDraft = () => state.implementation?.draft || null;
+  const currentPackage = () => state.implementation?.current || null;
+  const approvedPackage = () => currentPackage()?.status === 'approved';
+  const statusFor = id => {
+    if (state.errors[id === 'readiness' ? 'readiness' : id === 'review' ? 'review' : 'implementation']) return 'attention';
+    if (id === 'readiness') return readiness()?.status || 'absent';
+    if (id === 'review') return approvedReview() ? 'pass' : state.review?.draft ? (state.review.current ? 'attention' : 'stale') : 'blocked';
+    if (id === 'package') return packageDraft() ? 'pass' : readiness()?.status === 'ready' ? 'attention' : 'blocked';
+    if (id === 'approval') return approvedPackage() ? 'pass' : currentPackage()?.status || (packageDraft() ? 'attention' : 'blocked');
+    return approvedPackage() ? 'ready' : 'blocked';
+  };
+  const badge = value => node('span', labels[value] || value, { class: 'design-handoff-badge', 'data-status': value });
+  const paragraph = (text, className = '') => node('p', text, className ? { class: className } : {});
+  const empty = (title, detail) => {
+    const value = node('div', '', { class: 'design-handoff-empty' });
+    value.append(node('strong', title), paragraph(detail));
+    return value;
+  };
+  const sectionTitle = (eyebrow, title, detail) => {
+    const block = node('header', '', { class: 'design-handoff-step-header' });
+    block.append(node('span', eyebrow, { class: 'design-handoff-eyebrow' }), node('h3', title), paragraph(detail));
+    return block;
+  };
+  const setStatus = (message, error = false) => {
+    const live = q('[data-design-handoff-status]', panel);
+    if (!live) return;
+    live.textContent = message;
+    live.dataset.error = String(error);
+  };
+  const setBusy = busy => {
+    panel?.toggleAttribute('aria-busy', busy);
+    panel && q('[data-design-handoff-refresh]', panel)?.toggleAttribute('disabled', busy);
+  };
+  const perform = async (message, work, success) => {
+    setBusy(true); setStatus(message);
+    try {
+      await work();
+      await refresh();
+      setStatus(success);
+    } catch (error) {
+      setStatus(error?.message || 'The handoff action could not be completed. Refresh and try again.', true);
+    } finally { setBusy(false); }
+  };
+
+  function renderProgress() {
+    const progress = q('[data-design-handoff-progress]', panel);
+    progress.replaceChildren();
+    for (const [index, [id, label]] of steps.entries()) {
+      const status = statusFor(id);
+      const button = action(label, () => { activeStep = id; render(); q(`[data-handoff-step="${id}"]`, panel)?.focus(); }, {
+        class: 'design-handoff-step',
+        'data-handoff-step': id,
+        'data-status': status,
+        'aria-current': activeStep === id ? 'step' : undefined,
+        'aria-label': `${index + 1}. ${label}: ${labels[status] || status}`,
+      });
+      button.prepend(node('span', String(index + 1).padStart(2, '0'), { 'aria-hidden': 'true' }));
+      button.append(badge(status));
+      progress.append(button);
+    }
+  }
+
+  function recoveryAction(check) {
+    const label = check.recoveryAction?.label || 'Return to the design';
+    return action(label, () => {
+      if (['resolve-review-decisions', 'resolve-review-blockers', 'approve-review-handoff'].includes(check.recoveryAction?.id)) {
+        activeStep = 'review'; render();
+      } else {
+        close(); bridge.announce(`${check.message} ${label}.`);
+      }
+    }, { class: 'design-handoff-link' });
+  }
+
+  function renderReadiness(content) {
+    const value = readiness();
+    content.append(sectionTitle('Step 1 of 5', 'Readiness', 'Confirm the current design, verification and review evidence before preparing implementation work.'));
+    if (state.errors.readiness) {
+      content.append(empty('Readiness is temporarily unavailable', state.errors.readiness));
+      content.append(action('Retry readiness', refresh, { class: 'design-primary' }));
+      return;
+    }
+    if (!value || value.status === 'absent') {
+      content.append(empty('No readiness projection yet', value?.message || 'Complete a local design render to compute handoff readiness.'));
+      content.append(action(value?.nextAction?.label || 'Return to the design', close, { class: 'design-primary' }));
+      return;
+    }
+    const summary = node('div', '', { class: 'design-handoff-summary' });
+    summary.append(badge(value.status), node('strong', value.status === 'ready' ? 'This design can move into implementation packaging.' : `${value.blockers?.length || 0} blocking checks remain.`));
+    content.append(summary);
+    const list = node('ol', '', { class: 'design-handoff-checks' });
+    for (const check of value.checks || []) {
+      const item = node('li', '', { 'data-status': check.status });
+      const body = node('div'); body.append(node('strong', check.message), badge(check.status));
+      item.append(body);
+      if (check.status !== 'pass') item.append(recoveryAction(check));
+      list.append(item);
+    }
+    content.append(list);
+    if (value.status === 'ready') content.append(action('Review resolved feedback', () => { activeStep = 'review'; render(); }, { class: 'design-primary' }));
+    else if (value.nextActions?.[0]) content.append(recoveryAction({ message: 'Readiness needs attention.', recoveryAction: value.nextActions[0] }));
+  }
+
+  function reviewGroup(title, items) {
+    const section = node('section', '', { class: 'design-handoff-review-group' });
+    section.append(node('h4', `${title} · ${items?.length || 0}`));
+    if (!items?.length) section.append(paragraph('None recorded.', 'design-muted'));
+    for (const item of items || []) {
+      const card = node('article');
+      card.append(paragraph(item.text || item.statement || 'Review decision'));
+      if (item.refinement) card.append(paragraph(item.refinement, 'design-handoff-refinement'));
+      section.append(card);
+    }
+    return section;
+  }
+
+  function renderReview(content) {
+    content.append(sectionTitle('Step 2 of 5', 'Review resolution', 'Turn current feedback into explicit accepted, open, deferred and declined decisions.'));
+    if (state.errors.review) {
+      content.append(empty('Review decisions could not be loaded', state.errors.review));
+      content.append(action('Retry review decisions', refresh, { class: 'design-primary' }));
+      return;
+    }
+    const response = state.review, draft = response?.draft;
+    if (!draft) {
+      content.append(empty('No review handoff has been prepared', 'Generate a proposal from the current comments. You will review every decision before approval.'));
+      content.append(action('Generate review handoff', () => perform('Generating review decisions…', async () => {
+        state.review = await bridge.updateReviewHandoff({ action: 'draft', version: 0 });
+      }, 'Review decisions generated.'), { class: 'design-primary' }));
+      return;
+    }
+    const status = response.current ? draft.status : 'stale';
+    const summary = node('div', '', { class: 'design-handoff-summary' });
+    summary.append(badge(status), node('strong', draft.content?.summary || (response.current ? 'Review decisions match this design.' : 'The design or feedback changed after this handoff was prepared.')));
+    content.append(summary);
+    const decisions = node('div', '', { class: 'design-handoff-review-groups' });
+    decisions.append(
+      reviewGroup('Accepted changes', draft.content?.agreedChanges),
+      reviewGroup('Open questions', draft.content?.openQuestions),
+      reviewGroup('Deferred', draft.content?.deferred),
+      reviewGroup('Declined', draft.content?.rejected),
+    );
+    content.append(decisions);
+    const label = approvedReview() ? 'Continue to implementation package' : response.current ? 'Review and approve decisions' : 'Regenerate current decisions';
+    content.append(action(label, () => {
+      if (approvedReview()) { activeStep = 'package'; render(); }
+      else bridge.openReviewHandoff();
+    }, { class: 'design-primary' }));
+  }
+
+  function packageEditor(source, { regenerate = false } = {}) {
+    const form = node('form', '', { class: 'design-handoff-package-editor' });
+    const editable = plainPackage(source);
+    const title = node('input', '', { type: 'text', required: '', maxlength: '256', 'aria-label': 'Implementation package title' });
+    title.value = editable.title;
+    const titleLabel = node('label', 'Package title'); titleLabel.append(title); form.append(titleLabel);
+    const requirements = node('div', '', { class: 'design-handoff-requirements' });
+    const editors = editable.requirements.map((requirement, index) => {
+      const card = node('fieldset'); card.append(node('legend', `${requirement.kind.replaceAll('-', ' ')} requirement ${index + 1}`));
+      const statement = node('textarea', '', { required: '', maxlength: '16384', 'aria-label': `Requirement ${index + 1} statement` }); statement.value = requirement.statement;
+      const verification = node('textarea', '', { required: '', maxlength: '16384', 'aria-label': `Requirement ${index + 1} verification` }); verification.value = requirement.verification.join('\n');
+      const statementLabel = node('label', 'Requirement'); statementLabel.append(statement);
+      const verificationLabel = node('label', 'Verification, one expectation per line'); verificationLabel.append(verification);
+      card.append(statementLabel, verificationLabel); requirements.append(card);
+      return { requirement, statement, verification };
+    });
+    form.append(requirements);
+    const save = node('button', regenerate ? 'Create next package version' : 'Save implementation package', { type: 'submit', class: 'design-primary' });
+    form.append(save);
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      if (!form.reportValidity()) return;
+      editable.title = title.value.trim();
+      editable.requirements = editors.map(({ requirement, statement, verification }) => ({
+        ...requirement,
+        statement: statement.value.trim(),
+        verification: verification.value.split('\n').map(value => value.trim()).filter(Boolean),
+      }));
+      const input = regenerate
+        ? { action: 'regenerate', requestId: requestId('regenerate'), package: editable }
+        : { action: 'draft', package: editable };
+      void perform(regenerate ? 'Creating a new package version…' : 'Saving the implementation package…', async () => {
+        await bridge.updateImplementationHandoff(input);
+      }, regenerate ? 'A new package version is ready for approval.' : 'Implementation package saved.');
+    });
+    return form;
+  }
+
+  function renderPackage(content) {
+    content.append(sectionTitle('Step 3 of 5', 'Implementation package', 'Review traceable requirements and observable verification expectations. Integrity values stay in the contract and are hidden here.'));
+    if (state.errors.implementation) {
+      content.append(empty('Implementation package could not be loaded', state.errors.implementation));
+      content.append(action('Retry implementation package', refresh, { class: 'design-primary' }));
+      return;
+    }
+    const response = state.implementation, draft = response?.draft;
+    if (!approvedReview() || readiness()?.status !== 'ready') {
+      content.append(empty('Readiness must be complete first', 'Approve current review decisions and resolve every blocking readiness check before composing the implementation package.'));
+      content.append(action('Return to readiness', () => { activeStep = 'readiness'; render(); }, { class: 'design-primary' }));
+      return;
+    }
+    if (!draft) {
+      const proposal = response?.proposal;
+      if (!proposal) {
+        content.append(empty('No package proposal is available', 'Refresh the current design render, then return here to prepare the implementation scope.'));
+        content.append(action('Refresh package proposal', refresh, { class: 'design-primary' }));
+        return;
+      }
+      content.append(paragraph(`${proposal.sources.length} approved sources · ${proposal.requirements.length} proposed requirements`, 'design-muted'));
+      content.append(packageEditor(proposal));
+      return;
+    }
+    const summary = node('div', '', { class: 'design-handoff-summary' });
+    summary.append(badge(draft.status), node('strong', `${draft.title} · version ${draft.version}`));
+    content.append(summary, paragraph(`${draft.sources.length} sources · ${draft.requirements.length} requirements`, 'design-muted'));
+    const list = node('ol', '', { class: 'design-handoff-requirement-list' });
+    for (const requirement of draft.requirements) {
+      const item = node('li');
+      item.append(node('strong', requirement.statement), paragraph(requirement.verification.join(' · '), 'design-muted'));
+      list.append(item);
+    }
+    content.append(list);
+    if (approvedPackage()) {
+      const edit = node('details'); edit.append(node('summary', 'Prepare a revised package version'), packageEditor(draft, { regenerate: true })); content.append(edit);
+    }
+    content.append(action('Review owner approval', () => { activeStep = 'approval'; render(); }, { class: 'design-primary' }));
+  }
+
+  function renderApproval(content) {
+    content.append(sectionTitle('Step 4 of 5', 'Owner approval', 'Approval records the exact package version and permits a later, separate Plan invocation.'));
+    if (state.errors.implementation) {
+      content.append(empty('Approval state could not be loaded', state.errors.implementation));
+      content.append(action('Retry approval state', refresh, { class: 'design-primary' }));
+      return;
+    }
+    const response = state.implementation, draft = response?.draft, current = response?.current, preview = response?.approvalPreview;
+    if (!draft) {
+      content.append(empty('No package is ready for approval', 'Complete the implementation package before requesting owner approval.'));
+      content.append(action('Prepare implementation package', () => { activeStep = 'package'; render(); }, { class: 'design-primary' }));
+      return;
+    }
+    if (approvedPackage()) {
+      const approved = response.history?.find(item => item.id === current.id && item.version === current.version);
+      content.append(node('div', '', { class: 'design-handoff-approval-card' }));
+      const card = content.lastElementChild;
+      card.append(badge('approved'), node('h4', approved?.title || draft.title), paragraph(`Version ${current.version} was approved${approved?.approval?.actorId ? ` by ${approved.approval.actorId}` : ''}${approved?.approval?.approvedAt ? ` on ${new Date(approved.approval.approvedAt).toLocaleString()}` : ''}.`));
+      content.append(action('Continue to Plan', () => { activeStep = 'plan'; render(); }, { class: 'design-primary' }));
+      const details = node('details'); details.append(node('summary', 'Revoke this approval'));
+      const reason = node('textarea', '', { 'aria-label': 'Revocation reason', maxlength: '16384', placeholder: 'Why is this package no longer approved?' });
+      details.append(reason, action('Revoke approval', () => {
+        if (!reason.value.trim()) { reason.setCustomValidity('Enter a revocation reason.'); reason.reportValidity(); return; }
+        reason.setCustomValidity('');
+        void perform('Revoking approval…', async () => bridge.updateImplementationHandoff({ action: 'revoke', requestId: requestId('revoke'), expectedVersion: current.version, expectedContentDigest: current.contentDigest, reason: reason.value.trim() }), 'Approval revoked.');
+      }, { class: 'design-danger' }));
+      content.append(details);
+      return;
+    }
+    if (!preview?.available) {
+      content.append(empty(current?.status === 'revoked' ? 'The current approval was revoked' : 'This package cannot be approved yet', 'Refresh the package against the current ready design, then review approval again.'));
+      content.append(action('Review implementation package', () => { activeStep = 'package'; render(); }, { class: 'design-primary' }));
+      return;
+    }
+    const card = node('div', '', { class: 'design-handoff-approval-card' });
+    card.append(node('h4', preview.summary.title), paragraph(`Version ${preview.summary.packageVersion} · ${preview.summary.requirementCount} requirements · direction ${preview.summary.selectedVariant}`), paragraph(preview.summary.description, 'design-muted'));
+    content.append(card, action('Approve exact package', () => perform('Recording owner approval…', async () => {
+      await bridge.updateImplementationHandoff({ action: 'approve', requestId: requestId('approve'), ...preview.approvalRequest });
+    }, 'Implementation package approved.'), { class: 'design-primary' }));
+  }
+
+  async function copyText(value, output) {
+    try { await navigator.clipboard.writeText(value); output.textContent = 'Invocation copied. Paste it into your active coding agent when you are ready.'; }
+    catch {
+      const field = node('textarea', '', { readonly: '', 'aria-label': 'Plan invocation' }); field.value = value; output.before(field); field.focus(); field.select(); output.textContent = 'Copy the selected invocation.';
+    }
+  }
+
+  function renderPlan(content) {
+    content.append(sectionTitle('Step 5 of 5', 'Continue to Plan', 'Prepare an explicit host handoff. Plan remains a separate action; Ship is never started here.'));
+    if (!approvedPackage()) {
+      content.append(empty('An approved current package is required', currentPackage()?.status === 'revoked' ? 'This package was revoked. Prepare and approve a current version before planning.' : 'Complete owner approval before preparing the Plan invocation.'));
+      content.append(action('Review owner approval', () => { activeStep = 'approval'; render(); }, { class: 'design-primary' }));
+      return;
+    }
+    const context = bridge.context();
+    const subject = node('input', '', { type: 'text', required: '', maxlength: '256', value: context.designId, 'aria-label': 'Plan subject' });
+    const label = node('label', 'Plan subject'); label.append(subject); content.append(label);
+    const result = node('div', '', { class: 'design-handoff-plan-result', 'aria-live': 'polite' });
+    content.append(action('Prepare Plan handoff', async () => {
+      setBusy(true); setStatus('Preparing the Plan handoff…');
+      try {
+        const response = await bridge.updateImplementationHandoff({ action: 'continue-to-plan', subject: subject.value.trim() });
+        const handoff = response.handoff;
+        if (typeof bridge.continueToActiveHost === 'function') {
+          await bridge.continueToActiveHost(handoff);
+          result.textContent = 'The approved package was handed to the active host. Invoke Plan there to continue.';
+        } else {
+          const host = String(context.host || '').toLowerCase();
+          const key = host.includes('claude') ? 'claudeCode' : host.includes('codex') ? 'codex' : host.includes('cursor') ? 'cursor' : 'fallback';
+          const invocation = handoff.invocations[key] || handoff.invocations.fallback;
+          result.replaceChildren(node('code', invocation));
+          result.append(action('Copy invocation', () => void copyText(invocation, result), { class: 'design-handoff-copy' }));
+        }
+        setStatus('Plan handoff prepared. No planning files, agents, Git state or Ship run were changed.');
+      } catch (error) { setStatus(error?.message || 'The Plan handoff could not be prepared.', true); }
+      finally { setBusy(false); }
+    }, { class: 'design-primary' }), result);
+  }
+
+  function render() {
+    if (!panel) return;
+    renderProgress();
+    const content = q('[data-design-handoff-content]', panel); content.replaceChildren();
+    ({ readiness: renderReadiness, review: renderReview, package: renderPackage, approval: renderApproval, plan: renderPlan })[activeStep](content);
+  }
+
+  async function refresh() {
+    const attempt = ++serial;
+    setBusy(true); setStatus('Refreshing handoff state…');
+    const results = await Promise.allSettled([bridge.loadReadiness(), bridge.loadReviewHandoff(), bridge.loadImplementationHandoff()]);
+    if (attempt !== serial || !panel) return;
+    for (const [index, key] of ['readiness', 'review', 'implementation'].entries()) {
+      const result = results[index];
+      if (result.status === 'fulfilled') { state[key] = result.value; delete state.errors[key]; }
+      else state.errors[key] = result.reason?.message || 'This state is temporarily unavailable.';
+    }
+    setBusy(false); setStatus(Object.keys(state.errors).length ? 'Some handoff state is unavailable. The current design remains usable.' : 'Handoff state is current.', Boolean(Object.keys(state.errors).length));
+    render();
+  }
+
+  function close() {
+    if (!panel) return;
+    const returnTo = opener; panel.remove(); panel = null; delete root.dataset.designHandoffOpen;
+    returnTo?.isConnected && returnTo.focus({ preventScroll: true });
+  }
+
+  function open(step = activeStep) {
+    if (!bridge.owner()) return bridge.announce('Only a design owner can prepare an implementation handoff.', true);
+    activeStep = steps.some(([id]) => id === step) ? step : 'readiness';
+    if (panel) { render(); q(`[data-handoff-step="${activeStep}"]`, panel)?.focus(); return; }
+    opener = document.activeElement; root.dataset.designHandoffOpen = 'true';
+    panel = node('aside', '', { class: 'design-handoff-center', role: 'dialog', 'aria-modal': 'false', 'aria-labelledby': 'design-handoff-center-title' });
+    const header = node('header');
+    const heading = node('div'); heading.append(node('span', 'Owner workspace', { class: 'design-handoff-eyebrow' }), node('h2', 'Handoff Center', { id: 'design-handoff-center-title' }));
+    header.append(heading, action('×', close, { 'aria-label': 'Close Handoff Center', class: 'design-handoff-close' }));
+    const progress = node('nav', '', { class: 'design-handoff-progress', 'data-design-handoff-progress': '', 'aria-label': 'Design handoff progress' });
+    const content = node('section', '', { class: 'design-handoff-content', 'data-design-handoff-content': '', tabindex: '-1' });
+    const footer = node('footer'); footer.append(node('p', '', { 'data-design-handoff-status': '', role: 'status', 'aria-live': 'polite' }), action('Refresh', refresh, { 'data-design-handoff-refresh': '' }));
+    panel.append(header, progress, content, footer); root.append(panel);
+    panel.addEventListener('keydown', event => { if (event.key === 'Escape') { event.preventDefault(); close(); } });
+    render(); q(`[data-handoff-step="${activeStep}"]`, panel)?.focus({ preventScroll: true }); void refresh();
+  }
+
+  function mount() {
+    bridge = window.__openPlanrDesignHandoffBridge;
+    root = q('.planr-shell');
+    if (!bridge || !root) return false;
+    window.__openPlanrDesignHandoffCenter = Object.freeze({ open, close, refresh, getState: () => ({ open: Boolean(panel), step: activeStep, statuses: Object.fromEntries(steps.map(([id]) => [id, statusFor(id)])) }) });
+    return true;
+  }
+  const started = Date.now();
+  function boot() { if (!mount() && Date.now() - started < 15000) setTimeout(boot, 30); }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, { once: true }); else boot();
+})();

package/lib/host-packages/claude/openplanr/skills/design-loop/openplanr.skill.json

@@ -198,6 +198,28 @@
         "cursor"
       ]
     },
+    {
+      "path": "scripts/runtime/packages/design/templates/studio/handoff-center.css",
+      "kind": "asset",
+      "executable": false,
+      "hosts": [
+        "claude-code",
+        "codex",
+        "chatgpt",
+        "cursor"
+      ]
+    },
+    {
+      "path": "scripts/runtime/packages/design/templates/studio/handoff-center.js",
+      "kind": "asset",
+      "executable": false,
+      "hosts": [
+        "claude-code",
+        "codex",
+        "chatgpt",
+        "cursor"
+      ]
+    },
     {
       "path": "scripts/runtime/packages/design/templates/studio/share.css",
       "kind": "asset",

package/lib/host-packages/claude/openplanr/skills/design-loop/scripts/design.mjs

@@ -3,7 +3,7 @@
 // packages/design/lib/design/utility.mjs
 import { spawn } from "node:child_process";
 import { existsSync as existsSync12, mkdirSync as mkdirSync9, readFileSync as readFileSync17, realpathSync as realpathSync7, writeFileSync as writeFileSync9 } from "node:fs";
-import { dirname as dirname14, join as join13, resolve as resolve7 } from "node:path";
+import { dirname as dirname14, join as join13, resolve as resolve8 } from "node:path";
 import { fileURLToPath as fileURLToPath3 } from "node:url";
 
 // packages/design/lib/design/document.mjs
@@ -354,11 +354,11 @@ function createArtifactBridgeTools(document2, window2) {
         const outputWidth = Math.max(1, Math.round(width * scale)), outputHeight = Math.max(1, Math.round(height * scale));
         const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + outputWidth + '" height="' + outputHeight + '" viewBox="0 0 ' + width + " " + height + '"><foreignObject width="' + width + '" height="' + height + '">' + markup + "</foreignObject></svg>";
         image = new Image();
-        await new Promise((resolve8, reject) => {
+        await new Promise((resolve9, reject) => {
           const timer = setTimeout(() => reject(new Error("Thumbnail capture timed out.")), Math.max(1, deadline - Date.now()));
           image.onload = () => {
             clearTimeout(timer);
-            resolve8();
+            resolve9();
           };
           image.onerror = () => {
             clearTimeout(timer);
@@ -13081,12 +13081,14 @@ ${shellMarkup}
 }
 
 // packages/design/lib/design/studio-render.mjs
-var DESIGN_STUDIO_VERSION = "1.8.5";
+var DESIGN_STUDIO_VERSION = "1.9.0";
 var DESIGN_STUDIO_ASSETS = Object.freeze({
   style: "templates/studio/studio.css",
   runtime: "templates/studio/studio.js",
   enhancementsStyle: "templates/studio/enhancements.css",
-  enhancementsRuntime: "templates/studio/enhancements.js"
+  enhancementsRuntime: "templates/studio/enhancements.js",
+  handoffCenterStyle: "templates/studio/handoff-center.css",
+  handoffCenterRuntime: "templates/studio/handoff-center.js"
 });
 function applyDesignStudioTheme(preference) {
   if (!preference) {
@@ -13543,8 +13545,8 @@ function renderDesignStudio(input = {}, options = {}) {
   return renderDesignStudioMarkup({ ...input, entries: input.entries ?? createDesignStudioEntries(input.document, input.envelope) }, {
     ...options,
     renderShell: renderArtifactShellDocument,
-    style: ["studio.css", "enhancements.css"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n"),
-    runtime: renderDesignReviewExportSource() + "\n" + ["studio.js", "enhancements.js"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n")
+    style: ["studio.css", "enhancements.css", "handoff-center.css"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n"),
+    runtime: renderDesignReviewExportSource() + "\n" + ["studio.js", "enhancements.js", "handoff-center.js"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n")
   });
 }
 
@@ -13827,7 +13829,7 @@ function designRendererRevision() {
     json({
       version: DESIGN_RENDERER_VERSION,
       stage: hash(stageRuntimeBytes()),
-      assets: ["studio.css", "studio.js", "enhancements.css", "enhancements.js"].filter((name) => existsSync3(new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href))).map(
+      assets: ["studio.css", "studio.js", "enhancements.css", "enhancements.js", "handoff-center.css", "handoff-center.js"].filter((name) => existsSync3(new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href))).map(
         (name) => hash(
           readFileSync8(
             new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href)
@@ -13994,7 +13996,7 @@ ${errors.join("\n")}`);
 
 // packages/design/lib/design/review.mjs
 import { existsSync as existsSync11, readFileSync as readFileSync16 } from "node:fs";
-import { dirname as dirname13, join as join12 } from "node:path";
+import { dirname as dirname13, join as join12, relative as relative4, resolve as resolve7 } from "node:path";
 
 // packages/artifact/lib/artifact/import.mjs
 import {
@@ -18363,6 +18365,52 @@ function currentImplementationBasis(file, env) {
     }
   };
 }
+function proposeImplementationPackage(file, env) {
+  const current = currentDesign(file);
+  const basis = currentImplementationBasis(file, env);
+  const repository = projectRoot(current.root);
+  const paths = [.../* @__PURE__ */ new Set([
+    designSpecPath(current.root),
+    ...(current.sourceFiles ?? []).map((path) => resolve7(current.root, path))
+  ])].filter((path) => existsSync11(path));
+  const sources = paths.map((path, index) => {
+    const logicalPath2 = relative4(repository, path).replaceAll("\\", "/");
+    const extension = logicalPath2.split(".").pop()?.toLowerCase();
+    return {
+      id: `SRC-${String(index + 1).padStart(3, "0")}`,
+      kind: path === designSpecPath(current.root) ? "design-specification" : extension === "html" ? "screen" : ["css", "json"].includes(extension) ? "token" : "component",
+      path: logicalPath2,
+      revision: basis.sourceRevision,
+      digest: `sha256:${hash(readFileSync16(path))}`
+    };
+  });
+  const sourceByPath = new Map(sources.map((source) => [source.path, source.id]));
+  const sourceId = (path) => sourceByPath.get(relative4(repository, resolve7(current.root, path)).replaceAll("\\", "/"));
+  const selected = current.document.variants.find((variant) => variant.id === current.document.selectedVariant);
+  const requirements = current.document.screens.map((screen) => {
+    const authored = selected?.sources?.[screen.id] ?? screen.source;
+    const refs = [authored?.html, ...authored?.styles ?? [], ...authored?.scripts ?? []].map(sourceId).filter(Boolean);
+    return {
+      kind: "behavior",
+      statement: `${screen.title}: ${screen.description || "Implement the approved screen behavior and states."}`,
+      sourceRefs: refs.length ? refs : [sources[0].id],
+      verification: current.document.frames.map((frame) => `${screen.title} matches the approved ${frame.label} frame at ${frame.width} \xD7 ${frame.height}.`)
+    };
+  });
+  const allRefs = sources.map((source) => source.id);
+  requirements.push({
+    kind: "accessibility",
+    statement: "Preserve the approved interaction semantics, keyboard path, focus behavior and readable status communication.",
+    sourceRefs: allRefs,
+    verification: ["Keyboard-only use, visible focus, screen-reader labels and status announcements pass on every implemented screen."]
+  });
+  return {
+    id: `${current.document.id}-implementation`,
+    title: `${current.document.title} implementation package`,
+    sources,
+    requirements
+  };
+}
 async function persistDesignTaste(current, state) {
   const path = join12(
     projectRoot(current.root),
@@ -18585,7 +18633,12 @@ ${renderArtifactParentRuntime({ ...options, adapterRuntimeUrl: `${base}api/desig
           const unlock = await acquireStartLock(join12(design.root, ".design/render.lock"));
           try {
             const root = dirname13(designSpecPath(design.root));
-            respond(res, 200, { ok: true, draft: readImplementationHandoffDraft(root), ...readImplementationHandoffLifecycle(root), approvalPreview: previewImplementationHandoffApproval(root) });
+            let proposal = null;
+            try {
+              proposal = proposeImplementationPackage(file, env);
+            } catch {
+            }
+            respond(res, 200, { ok: true, draft: readImplementationHandoffDraft(root), ...readImplementationHandoffLifecycle(root), approvalPreview: previewImplementationHandoffApproval(root), proposal });
           } finally {
             unlock();
           }
@@ -19066,7 +19119,7 @@ function verifyDesignDocument(file, report) {
   const images = (Array.isArray(report.screenshots) ? report.screenshots : []).filter((item2) => {
     const path = typeof item2 === "string" ? item2 : item2?.path;
     try {
-      return typeof path === "string" && isPng(readFileSync17(resolve7(path)));
+      return typeof path === "string" && isPng(readFileSync17(resolve8(path)));
     } catch {
       return false;
     }
@@ -19095,14 +19148,14 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
     flags[key] = ["json", "no-open"].includes(key) ? true : args[++i];
   }
   if (flags.view && !["canvas", "prototype", "walkthrough"].includes(flags.view)) throw new Error("View must be canvas, prototype, or walkthrough.");
-  const file = resolve7(input);
+  const file = resolve8(input);
   let result;
   if (command === "handoff") {
     const action3 = flags.action ?? "inspect";
     if (action3 === "inspect") result = readDesignHandoff(file);
     else {
       const snapshot2 = readDesignHandoff(file);
-      const input2 = flags.input ? readJson2(resolve7(flags.input)) : {};
+      const input2 = flags.input ? readJson2(resolve8(flags.input)) : {};
       result = await updateDesignHandoff(file, { ...input2, action: action3, revision: input2.revision ?? snapshot2.revision, version: input2.version ?? (snapshot2.draft?.version ?? 0) });
     }
   }
@@ -19137,7 +19190,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
     const current = currentDesign(file), view = flags.view ?? current.document.defaultView;
     const state = readJson2(join13(current.root, ".design/studio-state.json"), { state: {} }).state;
     if (flags.format && flags.format !== "html") throw new Error("Portable export supports HTML. Use the studio PNG action for browser-rendered captures.");
-    const output = resolve7(flags.output ?? join13(current.root, `${view}-export.html`));
+    const output = resolve8(flags.output ?? join13(current.root, `${view}-export.html`));
     if (existsSync12(output)) throw new Error(`Export already exists: ${output}. Choose a new --output path.`);
     mkdirSync9(dirname14(output), { recursive: true });
     writeFileSync9(output, standaloneDesignHtml({ ...current, state }, view), { flag: "wx" });
@@ -19145,7 +19198,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
   }
   if (command === "verify") {
     if (!flags.report) throw new Error("verify requires --report <browser-report.json>.");
-    result = verifyDesignDocument(file, readJson2(resolve7(flags.report)));
+    result = verifyDesignDocument(file, readJson2(resolve8(flags.report)));
   }
   if (command === "feedback") {
     await syncDesignShare(file, { env, fetchImpl });
@@ -19156,7 +19209,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
       if (!["json", "markdown"].includes(format)) throw new Error("Feedback export format must be json or markdown.");
       if (!["current", "all"].includes(scope)) throw new Error("Feedback export scope must be current or all.");
       if (!flags.output) throw new Error("Feedback export requires --output <path>.");
-      const output = resolve7(flags.output);
+      const output = resolve8(flags.output);
       if (existsSync12(output)) throw new Error("Feedback export already exists. Choose a new --output path.");
       const snapshot2 = exportDesignReview(file, { scope, env });
       mkdirSync9(dirname14(output), { recursive: true });