create-pmos 0.134.0 → 0.136.0

package/workspace/public/pm/components.css

@@ -72,7 +72,7 @@
   opacity: 0.5;
   cursor: default;
 }
-.pmc-btn--primary {
+.pmc-btn.pmc-btn--primary {   /* two classes: inside the console `.c3 button { color: inherit }` would otherwise win and the label would go dark on dark */
   background: var(--foreground);
   color: var(--background);
   border-color: var(--foreground);
@@ -7863,6 +7863,69 @@
   flex-wrap: wrap;
 }
 
+/* notes-screen-capture: the screenshots of the shared screen, beside the transcript */
+.nt-screen-feed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 9px;
+  opacity: 0;
+  pointer-events: none;
+}
+.nt-screen {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.nt-screen__strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+.nt-shot {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  height: auto;
+  padding: 4px;
+}
+.nt-shot__img {
+  display: block;
+  width: 160px;
+  height: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+.nt-shot--now .nt-shot__img {
+  border-color: var(--foreground);
+}
+.nt-shot--line {
+  padding: 0;
+  margin-left: 8px;
+}
+.nt-shot--line .nt-shot__img {
+  width: 48px;
+}
+.nt-shot-big {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+.nt-shot-text {
+  margin: 0;
+  max-height: 160px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+  color: var(--muted-foreground);
+}
+
 /* -- layouts · .lg- the legacy and fixture shells (Run 3, slice 3D) -- */
 /* The legacy and fixture cockpit's two columns: the list head (a stack) and the rail's tile column. */
 .lg-stack {
@@ -7965,283 +8028,326 @@
    containers). The tab strip and the scratchpad are drawn with inline radii (workspace-cockpit-nav); the inline radii
    (8px tab strip, 6px controls) stay. A tab's colour dot is a dot and keeps its circle. */
 
-/* -- layouts · .wl- Welcome: the first-run page (onboarding-scan-and-map slice 2) -- */
-.wl-page {
-  background: var(--background);
-}
+/* -- layouts · .wl- Welcome: the first-run page (onboarding-scan-and-map slice 2, drawn in console3 by welcome-console3) -- */
+/* The page draws with console3.css parts inside a .c3 .c3pg root (.card.sect, .sh2, .nrow, .chip2, .tag, .fold, .pbar, .xp)
+   and the pmc-btn and pmc-check primitives. These rules add only what console3 has no class for: the frame, the progress
+   labels, the field blocks and the footer bar (the approved console3 mockup's Welcome page). .wl-page.c3 outranks a .c3 rule. */
 .wl-body {
   margin: 0;
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--sans);
-  font-size: 16px;
-  line-height: 1.5;
 }
-.wl-wrap {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 24px 16px 64px;
-  box-sizing: border-box;
+.wl-noscript {
+  padding: 16px;
+  font-family: var(--mono);
 }
-.wl-wrap * {
-  box-sizing: border-box;
+.wl-page.c3 .wl-welcome {
+  width: 100%;
+  padding: var(--sp-3) 0 var(--sp-6);
+  display: grid;
+  gap: var(--sp-5);
+  align-content: start;
 }
-.wl-steps {
+.wl-page.c3 .wl-top {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
   flex-wrap: wrap;
+}
+.wl-page.c3 .wl-top h1 {
+  margin: 0;
+  font-size: var(--fs-4);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.wl-page.c3 .wl-sub {
+  font: var(--fs-2) var(--mono);
+  color: var(--muted-foreground);
+}
+.wl-page.c3 .wl-tools {
+  display: flex;
   gap: 6px;
-  margin: 0 0 20px;
-  padding: 0;
+  align-items: center;
+}
+.wl-page.c3 .wl-col {
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  display: grid;
+  gap: var(--sp-4);
+}
+.wl-page.c3 .wl-prog {
+  display: grid;
+  gap: 8px;
+}
+.wl-page.c3 .wl-fill {
+  width: var(--wl-prog, 0%);
+  animation: none;
+}
+.wl-page.c3 .wl-steps {
   list-style: none;
-  font-family: var(--mono);
-  font-size: 12px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2px 12px;
+}
+.wl-page.c3 .wl-stepbtn {
+  background: none;
+  border: 0;
+  padding: 2px 0;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  font: var(--fs-1) var(--mono);
   color: var(--muted-foreground);
+  cursor: pointer;
 }
-.wl-steps li {
-  padding: 2px 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
+.wl-page.c3 .wl-stepbtn:disabled {
+  cursor: default;
 }
-.wl-steps li[aria-current="step"] {
+.wl-page.c3 .wl-stepbtn[aria-current="step"] {
   color: var(--foreground);
-  border-color: var(--foreground);
+  font-weight: 700;
 }
-.wl-h1 {
-  font-size: 20px;
-  line-height: 1.2;
-  margin: 0 0 8px;
-  font-weight: 600;
+.wl-page.c3 .wl-stepbtn:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
 }
-.wl-h2 {
-  font-size: 16px;
+.wl-page.c3 .wl-head h1 {
   margin: 0;
+  font-size: var(--fs-5);
+  line-height: 1.2;
   font-weight: 600;
 }
-.wl-p {
-  margin: 0 0 12px;
-}
-.wl-muted {
+.wl-page.c3 .wl-lead {
+  margin: 4px 0 0;
   color: var(--muted-foreground);
+  font-size: var(--fs-3);
 }
-.wl-card {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px 16px;
-  margin: 0 0 14px;
+.wl-page.c3 .wl-card {
+  gap: var(--sp-3);
 }
-.wl-path {
-  font-family: var(--mono);
-  font-size: 12px;
+.wl-page.c3 .wl-card .sh2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: var(--sp-2);
+  padding: var(--sp-3) 0 var(--sp-2);
+  border-bottom: 1px solid var(--border);
+}
+.wl-page.c3 .wl-card .sh2 h2 {
+  margin: 0;
+  font: 500 var(--fs-2) var(--mono);
   color: var(--muted-foreground);
-  word-break: break-all;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
-.wl-promise {
-  font-family: var(--mono);
-  font-size: 12px;
-  margin: 16px 0;
-  padding: 10px 12px;
-  border-left: 3px solid var(--foreground);
-  background: var(--muted);
+.wl-page.c3 .wl-board,
+.wl-page.c3 .wl-q {
+  display: grid;
+  gap: var(--sp-2);
 }
-.wl-actions {
+.wl-page.c3 .wl-foot {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  margin-top: 18px;
+  gap: 8px;
+  border-top: 1px solid var(--border);
+  padding-top: var(--sp-3);
+  margin-top: var(--sp-2);
+  flex-wrap: nowrap;
 }
-.wl-btn {
-  font: inherit;
-  cursor: pointer;
-  border-radius: 8px;
-  padding: 10px 16px;
-  min-height: 44px;
-  border: 1px solid var(--border);
-  background: var(--secondary);
-  color: var(--foreground);
+.wl-page.c3 .wl-foot > div {
+  display: flex;
+  min-width: 0;
+}
+.wl-page.c3 .wl-foot > div:last-child {
+  justify-content: flex-end;
+  flex: 0 1 auto;
+}
+.wl-page.c3 .wl-primary {
+  color: var(--background);
   text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
-.wl-btn.wl-primary {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  border-color: var(--primary);
-  font-weight: 600;
+.wl-page.c3 .wl-e {
+  border-color: var(--destructive);
+  color: var(--destructive);
 }
-.wl-btn:disabled {
-  opacity: 0.55;
-  cursor: default;
+.wl-page.c3 .wl-small {
+  font-size: var(--fs-2);
+  margin: 0;
 }
-.wl-btn.wl-quiet {
-  background: none;
-  border: none;
-  color: var(--muted-foreground);
-  text-decoration: underline;
-  padding: 8px 4px;
-  min-height: 36px;
+.wl-page.c3 .wl-bad {
+  color: var(--destructive);
 }
-.wl-btn.wl-small {
-  min-height: 32px;
-  padding: 4px 10px;
-  font-size: 14px;
+.wl-page.c3 .wl-fld {
+  display: grid;
+  gap: 4px;
+}
+.wl-page.c3 .wl-flabel,
+.wl-page.c3 .wl-qt {
+  font-size: var(--fs-2);
+  font-weight: 500;
+}
+.wl-page.c3 .wl-fld input,
+.wl-page.c3 .wl-fld select,
+.wl-page.c3 .wl-fld textarea,
+.wl-page.c3 .wl-q select,
+.wl-page.c3 .wl-q > input {
+  width: 100%;
+  box-sizing: border-box;
+}
+.wl-page.c3 .wl-fld textarea {
+  resize: vertical;
 }
-.wl-btn:focus-visible,
-.wl-input:focus-visible,
-.wl-check:focus-visible {
+.wl-page.c3 .wl-fld input:focus-visible,
+.wl-page.c3 .wl-fld select:focus-visible,
+.wl-page.c3 .wl-fld textarea:focus-visible,
+.wl-page.c3 .wl-q select:focus-visible,
+.wl-page.c3 .wl-q > input:focus-visible,
+.wl-page.c3 .wl-opt input:focus-visible {
   outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
   outline-offset: 2px;
 }
-.wl-spin {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--border);
-  border-top-color: var(--foreground);
-  border-radius: 6px;
-  animation: wlspin 0.8s linear infinite;
-  margin-right: 8px;
+.wl-page.c3 .wl-opt {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 32px;
+  font-size: var(--fs-3);
 }
-@keyframes wlspin {
-  to {
-    transform: rotate(360deg);
-  }
+.wl-page.c3 .wl-opt input {
+  accent-color: var(--foreground);
+  margin: 0;
 }
-.wl-error {
-  border: 1px solid var(--destructive);
-  color: var(--destructive);
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin: 0 0 14px;
+.wl-page.c3 .wl-opt input[type="text"] {
+  width: auto;
+  flex: 1 1 160px;
 }
-.wl-findings {
-  margin: 0;
-  padding-left: 22px;
+.wl-page.c3 .wl-tool {
+  display: grid;
+  gap: 2px;
+  padding: 6px 0;
 }
-.wl-findings li {
-  margin: 0 0 12px;
+.wl-page.c3 .wl-tool label > span {
+  font-weight: 600;
 }
-.wl-ref {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--muted-foreground);
-  word-break: break-all;
+.wl-page.c3 .wl-cb label > span:empty {
+  display: none;
 }
-.wl-board > header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 8px;
-  align-items: baseline;
-  margin-bottom: 8px;
+.wl-page.c3 .wl-tool .dim {
+  font-size: var(--fs-2);
+  padding-left: 24px;
 }
-.wl-row {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 6px 10px;
-  padding: 10px 0;
-  border-top: 1px solid var(--border);
-  align-items: start;
+.wl-page.c3 .wl-err {
+  color: var(--destructive);
+  font-size: var(--fs-2);
+  padding-left: 24px;
 }
-.wl-check {
-  width: 20px;
-  height: 20px;
-  margin: 10px 0 0;
+.wl-page.c3 .wl-num {
+  counter-reset: wln;
 }
-.wl-input {
-  font: inherit;
-  color: var(--foreground);
-  background: var(--background);
-  border: 1px solid var(--input);
-  border-radius: 6px;
-  padding: 6px 8px;
-  min-height: 36px;
-  max-width: 100%;
+.wl-page.c3 .wl-num > li {
+  counter-increment: wln;
 }
-.wl-row .wl-input[type="text"] {
-  width: 100%;
+.wl-page.c3 .wl-num > li .ki::before {
+  content: counter(wln);
+  font: 500 var(--fs-2) var(--mono);
 }
-.wl-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  align-items: center;
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--muted-foreground);
+.wl-page.c3 .wl-card .nrow {
+  grid-template-columns: auto minmax(0, 1fr) auto;
 }
-.wl-chip {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 1px 8px;
+.wl-page.c3 .wl-card .nrow .acts {
+  grid-column: auto;
 }
-.wl-docs {
-  margin: 4px 0 0;
-  padding-left: 18px;
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--muted-foreground);
-  word-break: break-all;
+.wl-page.c3 .wl-card .nrow .nb {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
 }
-.wl-q {
-  margin: 0 0 14px;
+.wl-page.c3 .wl-card .nrow .chips {
+  margin-top: 2px;
 }
-.wl-label {
-  display: block;
-  margin: 4px 0;
+.wl-page.c3 .wl-card .chip2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
-.wl-q .wl-free {
-  margin-top: 10px;
-  color: var(--muted-foreground);
+.wl-page.c3 .wl-off .nb,
+.wl-page.c3 .wl-off .acts {
+  opacity: 0.5;
 }
-.wl-q .wl-free .wl-input {
-  display: block;
-  margin-top: 4px;
+.wl-page.c3 .wl-cb {
+  min-height: 30px;
 }
-.wl-added {
-  margin: 8px 0 0;
-  padding-left: 18px;
-  font-size: 14px;
+.wl-page.c3 .wl-edit {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--sp-3);
+  padding: 8px 2px 4px;
 }
-.wl-sources {
-  list-style: none;
-  margin: 0 0 12px;
+.wl-page.c3 .wl-docs {
+  margin: 4px 0 0;
   padding: 0;
+  list-style: none;
   display: grid;
-  gap: 12px;
+  gap: 2px;
 }
-.wl-source {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border);
+.wl-page.c3 .wl-spindot {
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  animation: wlspin 0.8s linear infinite;
 }
-.wl-source-text {
-  flex: 1 1 260px;
-  min-width: 0;
+@keyframes wlspin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-.wl-source-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
+@media (prefers-reduced-motion: reduce) {
+  .wl-page.c3 .wl-spindot {
+    animation: none;
+  }
 }
-@media (max-width: 520px) {
-  .wl-actions {
-    flex-direction: column;
-    align-items: stretch;
+@media (pointer: coarse) {
+  .wl-page.c3 .wl-fld input,
+  .wl-page.c3 .wl-fld select,
+  .wl-page.c3 .wl-fld textarea,
+  .wl-page.c3 .wl-q select,
+  .wl-page.c3 .wl-q > input,
+  .wl-page.c3 .wl-opt input[type="text"] {
+    min-height: 44px;
+    font-size: 16px;
   }
-  .wl-actions .wl-btn {
-    width: 100%;
+  .wl-page.c3 .wl-opt,
+  .wl-page.c3 .wl-stepbtn,
+  .wl-page.c3 .wl-cb {
+    min-height: 44px;
   }
-  .wl-actions .wl-btn.wl-quiet {
-    width: auto;
-    align-self: center;
+  .wl-page.c3 .wl-opt input {
+    min-height: 44px;
+  }
+  .wl-page.c3 .wl-opt input[type="radio"] {
+    width: 20px;
+    height: 20px;
+  }
+}
+@media (max-width: 480px) {
+  .wl-page.c3 .wl-edit {
+    grid-template-columns: 1fr;
+  }
+  .wl-page.c3 .wl-steps {
+    justify-content: flex-start;
   }
 }