openplanr 2.2640.3 → 2.2640.5

package/lib/host-packages/claude/openplanr/skills/design/scripts/runtime/packages/design/templates/studio/share.css

@@ -1 +1 @@
-.design-share-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:22px;border:1px solid var(--planr-color-rule);border-radius:14px;background:var(--planr-color-panel);color:var(--planr-color-text);box-shadow:0 28px 90px #15202730;font:13px/1.5 var(--planr-font-body);overflow:auto}.design-share-dialog::backdrop{background:#18212b3d;backdrop-filter:blur(5px)}.design-share-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.design-share-dialog h2{font-size:20px;font-family:var(--planr-font-display);letter-spacing:-.025em;margin:0}.design-share-dialog button{font:inherit;cursor:pointer;border:1px solid var(--planr-color-rule);border-radius:7px;padding:7px 11px;background:var(--planr-color-panel);color:inherit;white-space:nowrap}.design-share-dialog button:hover{background:var(--planr-color-raised)}.design-share-dialog button:disabled{opacity:.55;cursor:wait}.design-share-dialog button:focus-visible,.design-share-dialog input:focus-visible,.design-share-dialog summary:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:3px}.design-share-dialog dl{display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px 12px;padding:14px;border-radius:8px;background:var(--planr-color-background)}.design-share-dialog dt{color:var(--planr-color-text-muted)}.design-share-dialog dd{margin:0;overflow-wrap:anywhere}.design-share-dialog p{color:var(--planr-color-text-muted)}.design-share-copy-row{display:flex;align-items:center;gap:10px;margin:14px 0}.design-share-copy-row>span{flex:1;color:var(--planr-color-text-muted)}.design-share-dialog input{box-sizing:border-box;width:100%;min-width:0;font:12px/1.5 ui-monospace,monospace;border:1px solid var(--planr-color-rule);border-radius:7px;padding:8px;color:var(--planr-color-text);background:var(--planr-color-background)}.design-share-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.design-share-dialog .design-share-primary{background:var(--planr-color-primary);color:var(--planr-color-background);border-color:var(--planr-color-primary)}.design-share-dialog .design-share-danger{color:var(--planr-color-danger)}.design-share-dialog summary{cursor:pointer;color:var(--planr-color-text-muted);padding:8px 0}.design-share-dialog [data-share-message]{min-height:20px;margin:16px 0 0;overflow-wrap:anywhere}.design-share-dialog [data-share-message][data-error=true]{color:var(--planr-color-danger)}@media(max-width:480px){.design-share-copy-row{align-items:stretch;flex-direction:column}}
+.design-share-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:22px;border:1px solid var(--planr-color-rule);border-radius:14px;background:var(--planr-color-panel);color:var(--planr-color-text);box-shadow:0 28px 90px #15202730;font:13px/1.5 var(--planr-font-body);overflow:auto}.design-share-dialog::backdrop{background:#18212b3d;backdrop-filter:blur(5px)}.design-share-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.design-share-dialog h2{font-size:20px;font-family:var(--planr-font-display);letter-spacing:-.025em;margin:0}.design-share-dialog button{font:inherit;cursor:pointer;border:1px solid var(--planr-color-rule);border-radius:7px;padding:7px 11px;background:var(--planr-color-panel);color:inherit;white-space:nowrap}.design-share-dialog button:hover:not(:disabled){background:var(--planr-color-raised)}.design-share-dialog button:disabled{opacity:.55;cursor:wait}.design-share-dialog button:focus-visible,.design-share-dialog input:focus-visible,.design-share-dialog summary:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:3px}.design-share-dialog dl{display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px 12px;padding:14px;border-radius:8px;background:var(--planr-color-background)}.design-share-dialog dt{color:var(--planr-color-text-muted)}.design-share-dialog dd{margin:0;overflow-wrap:anywhere}.design-share-dialog p{color:var(--planr-color-text-muted)}.design-share-copy-row{display:flex;align-items:center;gap:10px;margin:14px 0}.design-share-copy-row>span{flex:1;color:var(--planr-color-text-muted)}.design-share-dialog input{box-sizing:border-box;width:100%;min-width:0;font:12px/1.5 ui-monospace,monospace;border:1px solid var(--planr-color-rule);border-radius:7px;padding:8px;color:var(--planr-color-text);background:var(--planr-color-background)}.design-share-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.design-share-dialog .design-share-primary{background:var(--planr-color-primary);color:var(--planr-color-on-primary);border-color:var(--planr-color-primary)}.design-share-dialog .design-share-primary:is(:hover,:active,:focus-visible):not(:disabled){background:var(--planr-color-primary-strong);color:var(--planr-color-on-primary);border-color:var(--planr-color-primary-strong)}.design-share-dialog .design-share-danger{color:var(--planr-color-danger)}.design-share-dialog summary{cursor:pointer;color:var(--planr-color-text-muted);padding:8px 0}.design-share-dialog [data-share-message]{min-height:20px;margin:16px 0 0;overflow-wrap:anywhere}.design-share-dialog [data-share-message][data-error=true]{color:var(--planr-color-danger)}@media(max-width:480px){.design-share-copy-row{align-items:stretch;flex-direction:column}}

package/lib/host-packages/claude/openplanr/skills/design/scripts/runtime/packages/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/protocol",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "type": "module",
   "description": "Canonical OpenPlanr schemas, registries, typed errors, and portable contract validation",
   "license": "MIT",
@@ -87,6 +87,10 @@
     "./diagram-authoring-contracts": {
       "types": "./src/diagram-authoring-contracts.d.mts",
       "import": "./src/diagram-authoring-contracts.mjs"
+    },
+    "./diagram-review-contracts": {
+      "types": "./src/diagram-review-contracts.d.mts",
+      "import": "./src/diagram-review-contracts.mjs"
     }
   },
   "files": [

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

@@ -760,6 +760,131 @@ function embedJson(value) {
   return JSON.stringify(value ?? null).replace(JSON_HTML_RE, (ch) => JSON_HTML_ESCAPES[ch]);
 }
 
+// packages/artifact/lib/artifact/ui/annotation-styles.mjs
+var ARTIFACT_ANNOTATION_CSS = `.planr-annotation-layer { position: absolute; z-index: 6; inset: 0; }
+.planr-shell[data-planr-review-mode="interact"] .planr-annotation-layer { pointer-events: none; }
+.planr-shell[data-planr-review-mode="comment"] .planr-annotation-layer { cursor: crosshair; touch-action: none; }
+.planr-shell[data-planr-review-mode="comment"] .planr-frame iframe { pointer-events: none; }
+.planr-region-selection {
+  position: absolute;
+  min-width: 2px;
+  min-height: 2px;
+  border: 2px solid var(--planr-color-primary);
+  border-radius: var(--planr-radius-small);
+  background: color-mix(in srgb, var(--planr-color-primary) 14%, transparent);
+  pointer-events: none;
+}
+.planr-pin {
+  position: absolute;
+  z-index: 8;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  translate: -50% -50%;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 8px solid transparent;
+  border-radius: 50%;
+  background-clip: padding-box;
+  color: var(--planr-color-on-danger);
+  cursor: pointer;
+  pointer-events: auto;
+  font: 700 10px/1 var(--planr-font-mono);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent);
+}
+.planr-pin-fix { background-color: var(--planr-color-danger); }
+.planr-pin-improve { background-color: var(--planr-color-primary-strong); color: var(--planr-color-on-improve); }
+.planr-pin-question { background-color: var(--planr-color-question); color: var(--planr-color-on-question); }
+.planr-pin-resolved, .planr-pin-addressed { background-color: var(--planr-color-resolved); color: var(--planr-color-on-resolved); }
+.planr-pin-highlight { animation: planr-pin-highlight 1.2s ease-out; }
+@keyframes planr-pin-highlight {
+  0%, 35% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--planr-color-primary) 52%, transparent), 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent); }
+  100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent); }
+}
+.planr-pin-region {
+  position: absolute;
+  z-index: 7;
+  min-width: 2px;
+  min-height: 2px;
+  border: 2px solid var(--planr-color-danger);
+  border-radius: var(--planr-radius-small);
+  background: color-mix(in srgb, var(--planr-color-danger) 12%, transparent);
+  pointer-events: none;
+}
+.planr-pin-region-improve { border-color: var(--planr-color-primary-strong); background: color-mix(in srgb, var(--planr-color-primary-strong) 12%, transparent); }
+.planr-pin-region-question { border-color: var(--planr-color-question); background: color-mix(in srgb, var(--planr-color-question) 12%, transparent); }
+.planr-pin-region-resolved, .planr-pin-region-addressed { border-color: var(--planr-color-resolved); background: color-mix(in srgb, var(--planr-color-resolved) 10%, transparent); }
+.planr-annotation-composer {
+  position: fixed;
+  inset: auto;
+  z-index: 100;
+  box-sizing: border-box;
+  width: min(360px, calc(100vw - 24px));
+  max-height: min(620px, calc(100dvh - 24px));
+  margin: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  translate: none;
+  transform: none;
+  padding: 14px;
+  border: 1px solid var(--planr-color-rule);
+  border-radius: var(--planr-radius-large);
+  background: var(--planr-color-panel);
+  color: var(--planr-color-text);
+  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 58%, transparent);
+  cursor: default;
+  pointer-events: auto;
+}
+.planr-annotation-composer strong { display: block; margin: 0; font: 650 14px/1.2 var(--planr-font-display); }
+.planr-composer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.planr-composer-header button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--planr-radius-small); background: transparent; color: var(--planr-color-text-muted); font: 22px/1 var(--planr-font-body); cursor: pointer; }
+.planr-composer-header button:hover { background: var(--planr-color-raised); color: var(--planr-color-text); }
+.planr-annotation-composer :focus-visible { outline: 2px solid var(--planr-color-primary); outline-offset: 2px; }
+.planr-annotation-composer::backdrop { background: transparent; pointer-events: none; }
+.planr-annotation-composer label, .planr-identity label {
+  display: grid;
+  gap: 5px;
+  margin-bottom: 9px;
+  color: var(--planr-color-text-muted);
+  font-size: 11px;
+}
+.planr-annotation-composer input, .planr-annotation-composer textarea, .planr-identity input,
+.planr-reply-form textarea {
+  width: 100%;
+  padding: 8px 9px;
+  border: 1px solid var(--planr-color-rule);
+  border-radius: var(--planr-radius-small);
+  background: var(--planr-color-chrome);
+  color: var(--planr-color-text);
+}
+.planr-annotation-composer textarea { min-height: 84px; resize: vertical; }
+.planr-intent-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 9px; }
+.planr-intent-picker button {
+  min-height: 30px;
+  border: 1px solid var(--planr-color-rule);
+  border-radius: var(--planr-radius-small);
+  background: transparent;
+  cursor: pointer;
+  font-size: 10px;
+}
+.planr-intent-picker [aria-checked="true"] { border-color: var(--planr-color-primary); background: var(--planr-color-raised); }
+.planr-field-error { min-height: 16px; margin: 0; color: var(--planr-color-danger); font-size: 10px; }
+.planr-composer-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
+.planr-composer-actions button, .planr-thread button, .planr-reply-form button {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--planr-color-rule);
+  border-radius: var(--planr-radius-small);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 700;
+}
+.planr-composer-actions [type="submit"], .planr-reply-form [type="submit"] { border-color: var(--planr-color-primary); background: var(--planr-color-primary); color: var(--planr-color-background); }
+`;
+var ARTIFACT_ANNOTATION_MOBILE_CSS = `@media (max-width: 600px) { .planr-annotation-composer input, .planr-annotation-composer textarea, .planr-annotation-composer select { font-size: 16px; } }`;
+
 // packages/artifact/lib/artifact/ui/renderers.mjs
 var ARTIFACT_SHELL_STATES = Object.freeze([
   "ready",
@@ -1817,128 +1942,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   font: 9px/1 var(--planr-font-mono);
   pointer-events: none;
 }
-.planr-annotation-layer { position: absolute; z-index: 6; inset: 0; }
-.planr-shell[data-planr-review-mode="interact"] .planr-annotation-layer { pointer-events: none; }
-.planr-shell[data-planr-review-mode="comment"] .planr-annotation-layer { cursor: crosshair; touch-action: none; }
-.planr-shell[data-planr-review-mode="comment"] .planr-frame iframe { pointer-events: none; }
-.planr-region-selection {
-  position: absolute;
-  min-width: 2px;
-  min-height: 2px;
-  border: 2px solid var(--planr-color-primary);
-  border-radius: var(--planr-radius-small);
-  background: color-mix(in srgb, var(--planr-color-primary) 14%, transparent);
-  pointer-events: none;
-}
-.planr-pin {
-  position: absolute;
-  z-index: 8;
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  min-height: 44px;
-  translate: -50% -50%;
-  display: grid;
-  place-items: center;
-  padding: 0;
-  border: 8px solid transparent;
-  border-radius: 50%;
-  background-clip: padding-box;
-  color: var(--planr-color-on-danger);
-  cursor: pointer;
-  pointer-events: auto;
-  font: 700 10px/1 var(--planr-font-mono);
-  box-shadow: 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent);
-}
-.planr-pin-fix { background-color: var(--planr-color-danger); }
-.planr-pin-improve { background-color: var(--planr-color-primary-strong); color: var(--planr-color-on-improve); }
-.planr-pin-question { background-color: var(--planr-color-question); color: var(--planr-color-on-question); }
-.planr-pin-resolved, .planr-pin-addressed { background-color: var(--planr-color-resolved); color: var(--planr-color-on-resolved); }
-.planr-pin-highlight { animation: planr-pin-highlight 1.2s ease-out; }
-@keyframes planr-pin-highlight {
-  0%, 35% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--planr-color-primary) 52%, transparent), 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent); }
-  100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--planr-color-background) 38%, transparent); }
-}
-.planr-pin-region {
-  position: absolute;
-  z-index: 7;
-  min-width: 2px;
-  min-height: 2px;
-  border: 2px solid var(--planr-color-danger);
-  border-radius: var(--planr-radius-small);
-  background: color-mix(in srgb, var(--planr-color-danger) 12%, transparent);
-  pointer-events: none;
-}
-.planr-pin-region-improve { border-color: var(--planr-color-primary-strong); background: color-mix(in srgb, var(--planr-color-primary-strong) 12%, transparent); }
-.planr-pin-region-question { border-color: var(--planr-color-question); background: color-mix(in srgb, var(--planr-color-question) 12%, transparent); }
-.planr-pin-region-resolved, .planr-pin-region-addressed { border-color: var(--planr-color-resolved); background: color-mix(in srgb, var(--planr-color-resolved) 10%, transparent); }
-.planr-annotation-composer {
-  position: fixed;
-  inset: auto;
-  z-index: 100;
-  box-sizing: border-box;
-  width: min(360px, calc(100vw - 24px));
-  max-height: min(620px, calc(100dvh - 24px));
-  margin: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  translate: none;
-  transform: none;
-  padding: 14px;
-  border: 1px solid var(--planr-color-rule);
-  border-radius: var(--planr-radius-large);
-  background: var(--planr-color-panel);
-  color: var(--planr-color-text);
-  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 58%, transparent);
-  cursor: default;
-  pointer-events: auto;
-}
-.planr-annotation-composer strong { display: block; margin: 0; font: 650 14px/1.2 var(--planr-font-display); }
-.planr-composer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
-.planr-composer-header button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--planr-radius-small); background: transparent; color: var(--planr-color-text-muted); font: 22px/1 var(--planr-font-body); cursor: pointer; }
-.planr-composer-header button:hover { background: var(--planr-color-raised); color: var(--planr-color-text); }
-.planr-annotation-composer :focus-visible { outline: 2px solid var(--planr-color-primary); outline-offset: 2px; }
-.planr-annotation-composer::backdrop { background: transparent; pointer-events: none; }
-.planr-annotation-composer label, .planr-identity label {
-  display: grid;
-  gap: 5px;
-  margin-bottom: 9px;
-  color: var(--planr-color-text-muted);
-  font-size: 11px;
-}
-.planr-annotation-composer input, .planr-annotation-composer textarea, .planr-identity input,
-.planr-reply-form textarea {
-  width: 100%;
-  padding: 8px 9px;
-  border: 1px solid var(--planr-color-rule);
-  border-radius: var(--planr-radius-small);
-  background: var(--planr-color-chrome);
-  color: var(--planr-color-text);
-}
-.planr-annotation-composer textarea { min-height: 84px; resize: vertical; }
-.planr-intent-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 9px; }
-.planr-intent-picker button {
-  min-height: 30px;
-  border: 1px solid var(--planr-color-rule);
-  border-radius: var(--planr-radius-small);
-  background: transparent;
-  cursor: pointer;
-  font-size: 10px;
-}
-.planr-intent-picker [aria-checked="true"] { border-color: var(--planr-color-primary); background: var(--planr-color-raised); }
-.planr-field-error { min-height: 16px; margin: 0; color: var(--planr-color-danger); font-size: 10px; }
-.planr-composer-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
-.planr-composer-actions button, .planr-thread button, .planr-reply-form button {
-  min-height: 30px;
-  padding: 0 10px;
-  border: 1px solid var(--planr-color-rule);
-  border-radius: var(--planr-radius-small);
-  background: transparent;
-  cursor: pointer;
-  font-weight: 700;
-}
-.planr-composer-actions [type="submit"], .planr-reply-form [type="submit"] { border-color: var(--planr-color-primary); background: var(--planr-color-primary); color: var(--planr-color-background); }
-.planr-stage-status {
+${ARTIFACT_ANNOTATION_CSS}.planr-stage-status {
   position: absolute;
   z-index: 20;
   inset: 76px 0 0;
@@ -2069,7 +2073,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
 .planr-reply-hint { font-size: 11px; color: var(--planr-color-text-muted); }
 .planr-reply-form .planr-reply-send { display: grid; place-items: center; flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 7px; }
 .planr-reply-form .planr-reply-send:disabled { opacity: .35; cursor: not-allowed; }
-@media (max-width: 600px) { .planr-annotation-composer input, .planr-annotation-composer textarea, .planr-annotation-composer select { font-size: 16px; } }
+${ARTIFACT_ANNOTATION_MOBILE_CSS}
 .planr-decision-slot { padding: 12px; border-top: 1px solid var(--planr-color-rule); background: var(--planr-color-chrome); }
 .planr-decision-slot label { display: block; margin-bottom: 6px; color: var(--planr-color-text-muted); font-size: 11px; }
 .planr-decision-slot textarea {

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

@@ -595,9 +595,10 @@ function createArtifactReviewServer({
           const mediaTypes = {
             document: "text/html",
             runtime: "text/javascript",
-            stylesheet: "text/css"
+            stylesheet: "text/css",
+            font: "font/ttf"
           };
-          if (!Object.hasOwn(mediaTypes, response.asset) || typeof response.body !== "string")
+          if (!Object.hasOwn(mediaTypes, response.asset) || (response.asset === "font" ? !Buffer.isBuffer(response.body) : typeof response.body !== "string"))
             throw new Error("Invalid owner asset response.");
           send(
             res,
@@ -605,7 +606,7 @@ function createArtifactReviewServer({
             response.body,
             {
               ...parentHeaders(),
-              "content-type": `${mediaTypes[response.asset]}; charset=utf-8`,
+              "content-type": response.asset === "font" ? mediaTypes.font : `${mediaTypes[response.asset]}; charset=utf-8`,
               "content-security-policy": "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: blob:; font-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'"
             },
             { head }