cadcode 0.2.0 → 0.3.0

package/client/viewer.css

@@ -1,14 +1,30 @@
+/* The dev viewer as the playground's photo studio, without the code sheet: the model
+   stands on a soft, seamless backdrop that fills the window, and the controls float
+   on it in small groups, one per corner. Top left says what is on screen (the file,
+   the part), top right takes it away (PNG, STL), bottom left measures it, bottom
+   right changes how it is drawn. One accent, filament yellow, for the primary action
+   and the current selection; red only for faults. */
 :root {
-  --bg: #eef0f3;
-  --panel: rgba(255, 255, 255, 0.86);
-  --text: #1d2228;
-  --muted: #6b7480;
-  --border: rgba(20, 30, 40, 0.12);
-  --ok: #2f9e5b;
-  --busy: #c98a12;
-  --bad: #c8372d;
-  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  color: var(--text);
+  --stage-light: #ffffff;
+  --stage-mid: #f2f3f5;
+  --stage-edge: #e2e5e9;
+  --ink: #1f2833;
+  --ink-soft: #77818d;
+  --glass: rgba(255, 255, 255, 0.72);
+  --hairline: rgba(31, 40, 51, 0.08);
+  --lift: 0 1px 2px rgba(31, 40, 51, 0.06), 0 8px 24px -8px rgba(31, 40, 51, 0.14);
+  --pop: 0 2px 6px rgba(31, 40, 51, 0.06), 0 18px 48px -12px rgba(31, 40, 51, 0.28);
+  --filament: #f2c14e;
+  --filament-deep: #dcaa2c;
+  --selected: #fdf6e3;
+  --fault: #c2412d;
+  --ok: #3f9a62;
+  --gap: 20px;
+  --ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  font: 14px/1.45 var(--ui);
+  color: var(--ink);
+  accent-color: var(--ink);
 }
 
 * {
@@ -20,123 +36,241 @@ body {
   margin: 0;
   height: 100%;
   overflow: hidden;
-  background: var(--bg);
+  background: var(--stage-mid);
 }
 
-#view {
+[hidden] {
+  display: none !important;
+}
+
+:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: progress;
+  opacity: 0.5;
+}
+
+p {
+  margin: 0;
+}
+
+/* --- Stage ------------------------------------------------------------------ */
+
+/* The canvas is transparent; the backdrop is a light sweep, brightest where the
+   model stands, a little above the middle. */
+.stage {
   position: fixed;
   inset: 0;
+  background: radial-gradient(ellipse 70% 80% at 50% 42%, var(--stage-light) 0%, var(--stage-mid) 55%, var(--stage-edge) 100%);
+}
+
+#view {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   display: block;
+  transition: opacity 0.25s ease, filter 0.25s ease;
 }
 
-/* Toolbar on the left, program output on the right; they share one row so they never overlap. */
-.top {
-  position: fixed;
-  top: 12px;
-  left: 12px;
-  right: 12px;
+.corner {
+  position: absolute;
+  z-index: 2;
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.top-left {
+  top: var(--gap);
+  left: var(--gap);
+  /* Leaves room for the export pills; a long path gives way first. */
+  right: calc(var(--gap) + 260px);
+  pointer-events: none;
+}
+
+.top-left > * {
+  pointer-events: auto;
+}
+
+.top-right {
+  top: var(--gap);
+  right: var(--gap);
+}
+
+.bottom-left {
+  left: var(--gap);
+  bottom: var(--gap);
+  right: calc(var(--gap) + 240px);
+  flex-direction: column;
   align-items: flex-start;
-  gap: 12px;
+  gap: 14px;
   pointer-events: none;
 }
 
-.top > * {
+.bottom-left > * {
   pointer-events: auto;
 }
 
-.bar {
-  flex: 0 1 auto;
-  min-width: 0;
-  display: flex;
+.bottom-right {
+  right: var(--gap);
+  bottom: var(--gap);
+}
+
+/* --- Floating controls -------------------------------------------------------- */
+
+.brand {
+  flex-shrink: 0;
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-  padding: 6px 8px 6px 12px;
-  background: var(--panel);
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  gap: 9px;
+  margin-right: 8px;
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
 }
 
-.bar > :not(.file) {
+.pill {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 14px;
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+  backdrop-filter: blur(12px) saturate(1.4);
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  box-shadow: var(--lift);
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 0.15s ease;
 }
 
-.brand {
-  font-weight: 650;
-  letter-spacing: 0.02em;
+button.pill:hover {
+  background: #fff;
+}
+
+.pill.primary {
+  background: var(--filament);
+  border-color: var(--filament-deep);
+}
+
+.pill.primary:hover {
+  background: var(--filament-deep);
+}
+
+.pill[aria-pressed='true'] {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: #fff;
 }
 
+.pill[aria-pressed='true']:hover {
+  background: var(--ink);
+}
+
+.pill.round {
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+/* The program being watched: its folder quietly, its name plainly. A long path
+   gives up its folder first; the name always stays. */
 .file {
-  display: flex;
+  flex-shrink: 1;
   min-width: 0;
-  color: var(--muted);
-  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
-  font-size: 12px;
-  white-space: nowrap;
+  gap: 0;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  font-weight: 400;
+  overflow: hidden;
 }
 
-/* A long path gives up its directory first; the file name always stays. */
 .file .dir {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--ink-soft);
 }
 
 .file .name {
   flex-shrink: 0;
+  font-weight: 500;
+}
+
+.field {
+  color: var(--ink-soft);
+}
+
+.field strong {
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.field svg {
+  margin-left: -2px;
 }
 
-.part {
+.tools {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--muted);
+  gap: 8px;
 }
 
-select,
-button {
-  font: inherit;
-  color: var(--text);
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 3px 8px;
+/* --- The readout: the model's size, set large ----------------------------------- */
+
+.readout .size {
+  font-size: clamp(28px, 3.4vw, 44px);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
 }
 
-button {
-  cursor: pointer;
+.readout .size small {
+  margin-left: 0.2em;
+  font-size: 0.42em;
+  letter-spacing: 0;
+  color: var(--ink-soft);
 }
 
-button:disabled {
-  cursor: progress;
-  opacity: 0.55;
+.readout .meta {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 16px;
+  margin-top: 8px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
 }
 
-button:hover,
-select:hover {
-  border-color: rgba(20, 30, 40, 0.28);
+.readout .meta span:empty {
+  display: none;
 }
 
 .status {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  color: var(--muted);
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
+  gap: 7px;
 }
 
 .status::before {
   content: '';
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
-  background: var(--muted);
+  background: var(--ink-soft);
 }
 
 .status[data-state='ready']::before {
@@ -145,77 +279,252 @@ select:hover {
 
 .status[data-state='building']::before,
 .status[data-state='evaluating']::before {
-  background: var(--busy);
+  background: var(--filament-deep);
+}
+
+.status[data-state='error'],
+.status[data-state='disconnected'] {
+  color: var(--fault);
+  font-weight: 500;
 }
 
 .status[data-state='error']::before,
 .status[data-state='disconnected']::before {
-  background: var(--bad);
+  background: var(--fault);
 }
 
-.error {
-  position: fixed;
-  left: 12px;
-  right: 12px;
-  bottom: 40px;
-  max-height: 45vh;
-  overflow: auto;
-  background: #fff6f5;
-  border: 1px solid rgba(200, 55, 45, 0.35);
-  border-left: 4px solid var(--bad);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+.hint {
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  pointer-events: none !important;
 }
 
-.error pre {
-  margin: 0;
-  padding: 12px 14px;
-  font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
-  white-space: pre-wrap;
-  color: #7a1d16;
+/* --- Cards: logs and errors ----------------------------------------------------- */
+
+.card {
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--hairline);
+  border-radius: 14px;
+  box-shadow: var(--lift);
 }
 
+/* The program's console output, hanging under the file it came from. */
 .logs {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: min(420px, 40vw);
-  max-height: 40vh;
+  position: absolute;
+  z-index: 2;
+  top: calc(var(--gap) + 56px);
+  left: var(--gap);
+  max-width: min(480px, calc(100% - 2 * var(--gap)));
+  max-height: 35%;
   overflow: auto;
-  padding: 8px 10px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
+  padding: 10px 14px;
+  font: 12px/1.55 var(--mono);
   white-space: pre-wrap;
 }
 
 .logs .log-warn {
-  color: var(--busy);
+  color: #a8730b;
 }
 
 .logs .log-error {
-  color: var(--bad);
+  color: var(--fault);
 }
 
-.hint {
-  position: fixed;
-  left: 12px;
-  bottom: 12px;
-  color: var(--muted);
-  font-size: 12px;
+.error {
+  max-width: min(720px, 100%);
+  max-height: 42vh;
+  overflow: auto;
+  border-left: 3px solid var(--fault);
+}
+
+.error pre {
+  margin: 0;
+  padding: 12px 16px;
+  font: 12.5px/1.55 var(--mono);
+  white-space: pre-wrap;
+  color: #8a2a1c;
+}
+
+/* --- Busy ------------------------------------------------------------------------ */
+/* While the program rebuilds: a line runs along the top and the model on screen
+   steps back. With no model yet, a line of text in the middle instead. Both wait a
+   moment, so a quick rebuild does not flicker. A lost connection steps the model
+   back the same way, without the running line. */
+
+.progress {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.progress::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 35%;
+  background: linear-gradient(90deg, transparent, var(--filament-deep), transparent);
+  animation: run 1.1s ease-in-out infinite;
+}
+
+@keyframes run {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 300% 0;
+  }
+}
+
+.empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  color: var(--ink-soft);
+  font-size: 15px;
+  opacity: 0;
   pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.stage[data-busy] .progress {
+  opacity: 1;
+  transition-delay: 0.15s;
+}
+
+.stage[data-busy] #view,
+.stage[data-offline] #view {
+  opacity: 0.45;
+  filter: saturate(0.4);
+  transition-delay: 0.15s;
+}
+
+.stage[data-empty]:is([data-busy], [data-offline]) .empty {
+  opacity: 1;
+  transition-delay: 0.15s;
+}
+
+/* --- Part menu ------------------------------------------------------------------ */
+/* A list of the program's parts hanging under the Part pill. */
+
+.menu {
+  position: fixed;
+  inset: auto;
+  min-width: 180px;
+  max-height: min(420px, calc(100dvh - 84px));
+  margin: 0;
+  padding: 6px;
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  background: #fff;
+  color: var(--ink);
+  border: 1px solid var(--hairline);
+  border-radius: 14px;
+  box-shadow: var(--pop);
+  transform-origin: 24px 0;
+}
+
+.menu:popover-open {
+  display: flex;
+  animation: drop 0.14s ease-out;
+}
+
+@keyframes drop {
+  from {
+    opacity: 0;
+    scale: 0.97;
+    translate: 0 -4px;
+  }
 }
 
+.menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 7px 12px;
+  text-align: left;
+  font-weight: 500;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.menu button:hover,
+.menu button:focus-visible {
+  background: var(--stage-mid);
+  outline: none;
+}
+
+.menu button[aria-checked='true'] {
+  background: var(--selected);
+  font-weight: 600;
+}
+
+.menu button[aria-checked='true']::after {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--filament-deep);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress::before {
+    animation: none;
+    width: 100%;
+    opacity: 0.6;
+  }
+  #view,
+  .progress,
+  .empty {
+    transition: none !important;
+  }
+  .menu:popover-open {
+    animation: none;
+  }
+}
+
+/* Phones: the brand keeps only its mark, the path goes, and the readout
+   rises above the display tools. */
 @media (max-width: 720px) {
+  .stage {
+    --gap: 12px;
+  }
+  .brand {
+    font-size: 0;
+    gap: 0;
+    margin-right: 0;
+  }
+  .top-left {
+    right: calc(var(--gap) + 170px);
+    gap: 8px;
+  }
+  .top-right {
+    gap: 6px;
+  }
   .file,
+  .wide,
   .hint {
     display: none;
   }
-  .logs {
-    position: fixed;
-    left: 12px;
-    right: 12px;
-    bottom: 40px;
-    max-width: none;
+  .bottom-left {
+    right: var(--gap);
+    bottom: calc(var(--gap) + 56px);
+    gap: 10px;
+  }
+  .readout .size {
+    font-size: 26px;
   }
 }