@mokly/mokly 0.8.0

package/dist/server/shell/css_review.js

@@ -0,0 +1,103 @@
+/** In-place comparison controls and isolated snapshot panes. */
+/** Styles appended to the catalogue shell. */
+export const SHELL_REVIEW_CSS = `
+.mbk-diff-screen, .mbk-current-screen {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+.mbk-diff-screen [hidden] { display: none; }
+.mbk-diff-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 24px;
+  border-bottom: 1px solid var(--chrome-border);
+  background: var(--chrome-surface);
+}
+.mbk-diff-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin-left: auto;
+  border: 0;
+  background: none;
+  color: var(--chrome-accent);
+  font: inherit;
+  font-size: 20px;
+  cursor: pointer;
+}
+.mbk-diff-stage {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 24px;
+  background: radial-gradient(circle, rgba(20,28,22,.05) 1px, transparent 1px) 0 0 / 22px 22px;
+}
+.mbk-diff-view { margin-bottom: 24px; }
+.mbk-diff-view h3 {
+  margin: 0 0 12px;
+  color: var(--chrome-ink-2);
+  font-size: 12px;
+  font-weight: 600;
+}
+.mb-panes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+  isolation: isolate;
+}
+.mbk-diff-mobile .mb-panes {
+  grid-template-columns: repeat(2, 390px);
+}
+.mb-pane { min-width: 0; }
+.mb-pane-label {
+  color: var(--chrome-muted);
+  font-size: 12px;
+  margin: 0 0 8px;
+}
+.mb-pane-doc { width: 100%; }
+.mb-pane-missing {
+  display: grid;
+  place-content: center;
+  min-height: 240px;
+  padding: 20px;
+  border: 1px dashed var(--chrome-border-strong);
+  border-radius: 12px;
+  background: var(--chrome-surface);
+  color: var(--chrome-muted);
+  text-align: center;
+}
+.mb-panes[data-compare-mode="overlay"],
+.mb-panes[data-compare-mode="difference"] { grid-template-columns: minmax(0, 1fr); }
+.mbk-diff-mobile .mb-panes:not([data-compare-mode="side"]) { grid-template-columns: 390px; }
+.mb-panes:not([data-compare-mode="side"]) .mb-pane { grid-area: 1 / 1; }
+.mb-panes:not([data-compare-mode="side"]) .mb-pane-label { visibility: hidden; }
+.mb-panes[data-compare-mode="overlay"] .mb-pane--after { opacity: .5; }
+.mb-panes[data-compare-mode="difference"] .mb-pane--after .mb-pane-doc { mix-blend-mode: difference; }
+.mb-impact-card {
+  border: 1px solid var(--chrome-border);
+  border-radius: 8px;
+  background: var(--chrome-surface);
+  padding: 12px;
+  color: var(--chrome-ink-2);
+  overflow-wrap: anywhere;
+}
+.mb-impact-card summary { cursor: pointer; font-weight: 600; }
+.mb-impact-card p, .mb-impact-card ul { margin: 8px 0 0; }
+@media (max-width: 56.25rem) {
+  .mbk-diff-toolbar { padding: 8px 12px; }
+  .mbk-diff-toolbar .mbk-seg { flex: 1; }
+  .mbk-diff-toolbar .mbk-seg button { flex: 1; padding: 6px; white-space: nowrap; font-size: 11px; }
+  .mbk-diff-stage { padding: 16px; }
+  .mb-panes[data-compare-mode="side"],
+  .mbk-diff-mobile .mb-panes { grid-template-columns: minmax(0, 1fr); }
+  .mbk-diff-mobile .mb-panes:not([data-compare-mode="side"]) { grid-template-columns: minmax(0, 1fr); }
+}
+`;
+//# sourceMappingURL=css_review.js.map

package/dist/server/shell/css_review.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_review.js","sourceRoot":"","sources":["../../../src/server/shell/css_review.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAEhE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmG/B,CAAC"}

package/dist/server/shell/css_tokens.d.ts

@@ -0,0 +1,4 @@
+/** Design tokens, font, and base element styles for the served shell. */
+/** Token and base styles opening the shell stylesheet. */
+export declare const SHELL_TOKENS_CSS = "\n@font-face {\n  font-family: \"Inter\";\n  font-style: normal;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url(\"/__mokly/fonts/InterVariable.woff2\") format(\"woff2\");\n}\n\n:root {\n  color-scheme: light;\n  --chrome-bg: #f4f4f1;\n  --chrome-surface: #ffffff;\n  --chrome-ink: #1a1d1c;\n  --chrome-ink-2: #4a4f4d;\n  --chrome-muted: #7d8480;\n  --chrome-border: #e3e5e0;\n  --chrome-border-strong: #c8ccc4;\n  --chrome-accent: #2a4733;\n  --chrome-shadow: 0 30px 90px rgba(20, 28, 22, 0.14);\n  --sans: \"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n    \"Segoe UI\", sans-serif;\n  --mono: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\n  --mokly-accent: #4f7864;\n  --mokly-accent-contrast: #ffffff;\n  --mokly-accent-soft: rgba(79, 120, 100, 0.1);\n  --mbk-accent-deep: #2f5945;\n  --mbk-dark-screen-bg: #121514;\n  --mbk-dark-screen-ink: #eef1ef;\n  --mb-bg: var(--chrome-bg);\n  --mb-surface: var(--chrome-surface);\n  --mb-border: var(--chrome-border);\n  --mb-text: var(--chrome-ink);\n  --mb-muted: var(--chrome-muted);\n  --mb-radius: 10px;\n  --mb-shadow: 0 1px 2px rgba(20, 28, 22, 0.08);\n  --mb-added: #1d7a3d;\n  --mb-added-soft: #e3f0e7;\n  --mb-changed: #9a6b00;\n  --mb-changed-soft: #f6ecd4;\n  --mb-removed: #b3261e;\n  --mb-removed-soft: #f7e2e0;\n  --mb-ignored: #6c6862;\n  --mb-ignored-soft: #edebe8;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  min-height: 100%;\n}\n\nbody {\n  background: var(--chrome-bg);\n  color: var(--chrome-ink);\n  font-family: var(--sans);\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n\na {\n  color: inherit;\n}\n\nh1,\nh2,\nh3,\np {\n  margin-top: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n";
+//# sourceMappingURL=css_tokens.d.ts.map

package/dist/server/shell/css_tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_tokens.d.ts","sourceRoot":"","sources":["../../../src/server/shell/css_tokens.ts"],"names":[],"mappings":"AAAA,yEAAyE;AAEzE,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,u4DAqF5B,CAAC"}

package/dist/server/shell/css_tokens.js

@@ -0,0 +1,89 @@
+/** Design tokens, font, and base element styles for the served shell. */
+/** Token and base styles opening the shell stylesheet. */
+export const SHELL_TOKENS_CSS = `
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/__mokly/fonts/InterVariable.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: light;
+  --chrome-bg: #f4f4f1;
+  --chrome-surface: #ffffff;
+  --chrome-ink: #1a1d1c;
+  --chrome-ink-2: #4a4f4d;
+  --chrome-muted: #7d8480;
+  --chrome-border: #e3e5e0;
+  --chrome-border-strong: #c8ccc4;
+  --chrome-accent: #2a4733;
+  --chrome-shadow: 0 30px 90px rgba(20, 28, 22, 0.14);
+  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  --mokly-accent: #4f7864;
+  --mokly-accent-contrast: #ffffff;
+  --mokly-accent-soft: rgba(79, 120, 100, 0.1);
+  --mbk-accent-deep: #2f5945;
+  --mbk-dark-screen-bg: #121514;
+  --mbk-dark-screen-ink: #eef1ef;
+  --mb-bg: var(--chrome-bg);
+  --mb-surface: var(--chrome-surface);
+  --mb-border: var(--chrome-border);
+  --mb-text: var(--chrome-ink);
+  --mb-muted: var(--chrome-muted);
+  --mb-radius: 10px;
+  --mb-shadow: 0 1px 2px rgba(20, 28, 22, 0.08);
+  --mb-added: #1d7a3d;
+  --mb-added-soft: #e3f0e7;
+  --mb-changed: #9a6b00;
+  --mb-changed-soft: #f6ecd4;
+  --mb-removed: #b3261e;
+  --mb-removed-soft: #f7e2e0;
+  --mb-ignored: #6c6862;
+  --mb-ignored-soft: #edebe8;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background: var(--chrome-bg);
+  color: var(--chrome-ink);
+  font-family: var(--sans);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+//# sourceMappingURL=css_tokens.js.map

package/dist/server/shell/css_tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_tokens.js","sourceRoot":"","sources":["../../../src/server/shell/css_tokens.ts"],"names":[],"mappings":"AAAA,yEAAyE;AAEzE,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqF/B,CAAC"}

package/dist/server/shell/css_views.d.ts

@@ -0,0 +1,5 @@
+/** Main-column view styles: screen head, stage, embeds, and the home /
+ * missing-route empty states. */
+/** Main-column view styles. */
+export declare const SHELL_VIEW_CSS = "\n.mbk-main {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n\n.mbk-screen-head {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  gap: 12px 24px;\n  padding: 14px 24px 13px;\n  border-bottom: 1px solid var(--chrome-border);\n  background: var(--chrome-surface);\n}\n\n.mbk-screen-head-copy {\n  min-width: 0;\n}\n\n.mbk-screen-head > .mbk-seg {\n  margin-left: auto;\n}\n\n.mbk-screen-head > [data-mokly-schemeswitch] {\n  display: none;\n  margin-left: 0;\n}\n\n.mbk-crumbs {\n  margin: 0;\n  color: var(--chrome-muted);\n  font-size: 11.5px;\n}\n\n.mbk-crumbs .sep {\n  margin: 0 6px;\n  opacity: 0.55;\n}\n\n.mbk-crumb-link {\n  color: inherit;\n  text-decoration: none;\n  border-radius: 4px;\n}\n\n.mbk-crumb-link:hover {\n  color: var(--chrome-ink);\n  text-decoration: underline;\n}\n\n.mbk-title-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: 5px;\n}\n\n.mbk-title-row h2 {\n  margin: 0;\n  font-size: 19px;\n  letter-spacing: -0.01em;\n}\n\n.mbk-idchip {\n  padding: 2px 8px;\n  border: 1px solid var(--chrome-border);\n  border-radius: 6px;\n  background: var(--chrome-bg);\n  color: var(--chrome-muted);\n  font-family: var(--mono);\n  font-size: 11px;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.mbk-idchip:active {\n  background: var(--chrome-border);\n  border-color: var(--chrome-border-strong);\n  box-shadow: inset 0 1px 2px rgba(20, 28, 22, 0.14);\n  color: var(--chrome-ink);\n  transform: translateY(1px);\n}\n\n.mbk-seg {\n  display: inline-flex;\n  padding: 3px;\n  border-radius: 8px;\n  background: var(--chrome-bg);\n  border: 1px solid var(--chrome-border);\n}\n\n.mbk-seg span,\n.mbk-seg a,\n.mbk-seg button {\n  padding: 4px 12px;\n  border: none;\n  border-radius: 6px;\n  background: none;\n  color: var(--chrome-muted);\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.mbk-seg span.active,\n.mbk-seg a.active,\n.mbk-seg button.active,\n.mbk-seg [aria-pressed=\"true\"],\n.mbk-seg [aria-current=\"page\"] {\n  background: var(--chrome-surface);\n  color: var(--chrome-ink);\n  box-shadow: 0 1px 2px rgba(20, 28, 22, 0.1);\n}\n\n.mbk-stage {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 40px;\n  min-height: 0;\n  padding: 28px;\n  overflow: auto;\n  background: radial-gradient(\n      circle at center,\n      rgba(20, 28, 22, 0.05) 1px,\n      transparent 1px\n    )\n    0 0 / 22px 22px;\n}\n\n.mbk-frame-wrap {\n  min-width: 0;\n}\n\n.mbk-frame-mobile {\n  flex: 0 0 auto;\n}\n\n.mbk-frame-desktop {\n  flex: 0 1 1180px;\n  min-width: 0;\n}\n\n.mbk-frame-desktop .browser-frame {\n  width: 100%;\n}\n\n.mbk-frame-label {\n  margin: 0 0 10px;\n  color: var(--chrome-muted);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.mbk-frame-scheme-note {\n  display: none;\n  font-weight: 500;\n}\n\nbody[data-mokly-color-scheme=\"dark\"]\n  .mbk-frame-wrap[data-color-scheme-fallback]\n  .mbk-frame-scheme-note {\n  display: inline;\n}\n\n.mbk-live[data-viewport=\"mobile\"] .mbk-frame-desktop {\n  display: none;\n}\n\n.mbk-live[data-viewport=\"desktop\"] .mbk-frame-mobile {\n  display: none;\n}\n\n.mbk-flow {\n  flex: 1;\n  overflow: auto;\n  padding: 28px 28px 40px;\n}\n\n.mbk-flow .flow-track {\n  gap: 26px;\n}\n\n.mbk-flow .flow-step::before {\n  top: 32px;\n  bottom: -26px;\n}\n\n.mbk-flow .flow-step-head h3 {\n  font-size: 16px;\n}\n\n.mbk-flow-screen {\n  margin-left: 44px;\n  max-width: 1180px;\n}\n\n.mbk-flow-screen .browser-frame {\n  height: 640px;\n}\n\n.mbk-flow-screen .browser-frame.is-expanded {\n  height: auto;\n}\n\n.mbk-stage-embed {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  padding: 18px 24px;\n  overflow: auto;\n  background: radial-gradient(\n      circle at center,\n      rgba(20, 28, 22, 0.05) 1px,\n      transparent 1px\n    )\n    0 0 / 22px 22px;\n}\n\n.mbk-stage-embed iframe {\n  flex: 1;\n  width: 100%;\n  min-height: 520px;\n  border: 1px solid var(--chrome-border);\n  border-radius: 12px;\n  background: var(--chrome-surface);\n}\n\n.mbk-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  padding: 40px;\n  text-align: center;\n  color: var(--chrome-ink-2);\n}\n\n.mbk-empty h2 {\n  margin: 0;\n  color: var(--chrome-ink);\n  font-size: 19px;\n}\n\n.mbk-empty p {\n  margin: 0;\n  max-width: 460px;\n  font-size: 13px;\n  line-height: 1.55;\n}\n\n.mbk-empty-note {\n  color: var(--chrome-muted);\n  font-size: 12px;\n}\n\n.mbk-empty code {\n  font-family: var(--mono);\n  font-size: 11.5px;\n}\n\n.mbk-empty-link {\n  margin-top: 8px;\n  color: var(--mokly-accent);\n  font-weight: 600;\n}\n\n.mbk-frag {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: #ffffff;\n}\n\n.phone-screen .mbk-frag {\n  flex: 1 1 auto;\n  height: auto;\n  min-height: 0;\n  border-radius: 0 0 36px 36px;\n}\n\n@media (max-width: 56.25rem) {\n  .mbk-topbar > [data-mokly-schemeswitch] {\n    display: none;\n  }\n\n  .mbk-screen-head > [data-mokly-schemeswitch] {\n    display: inline-flex;\n  }\n}\n\n@media (max-width: 760px) {\n  .mbk-screen-head {\n    padding: 12px 16px 11px;\n  }\n\n  .mbk-screen-head > .mbk-seg {\n    flex: 1 0 100%;\n    margin-left: 0;\n  }\n\n  .mbk-screen-head > .mbk-seg button {\n    flex: 1;\n  }\n\n  .mbk-stage {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .mbk-frame-desktop {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .mbk-flow-screen {\n    margin-left: 0;\n  }\n}\n";
+//# sourceMappingURL=css_views.d.ts.map

package/dist/server/shell/css_views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_views.d.ts","sourceRoot":"","sources":["../../../src/server/shell/css_views.ts"],"names":[],"mappings":"AAAA;iCACiC;AAEjC,+BAA+B;AAC/B,eAAO,MAAM,cAAc,mnLA6U1B,CAAC"}

package/dist/server/shell/css_views.js

@@ -0,0 +1,338 @@
+/** Main-column view styles: screen head, stage, embeds, and the home /
+ * missing-route empty states. */
+/** Main-column view styles. */
+export const SHELL_VIEW_CSS = `
+.mbk-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.mbk-screen-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: 12px 24px;
+  padding: 14px 24px 13px;
+  border-bottom: 1px solid var(--chrome-border);
+  background: var(--chrome-surface);
+}
+
+.mbk-screen-head-copy {
+  min-width: 0;
+}
+
+.mbk-screen-head > .mbk-seg {
+  margin-left: auto;
+}
+
+.mbk-screen-head > [data-mokly-schemeswitch] {
+  display: none;
+  margin-left: 0;
+}
+
+.mbk-crumbs {
+  margin: 0;
+  color: var(--chrome-muted);
+  font-size: 11.5px;
+}
+
+.mbk-crumbs .sep {
+  margin: 0 6px;
+  opacity: 0.55;
+}
+
+.mbk-crumb-link {
+  color: inherit;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.mbk-crumb-link:hover {
+  color: var(--chrome-ink);
+  text-decoration: underline;
+}
+
+.mbk-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 5px;
+}
+
+.mbk-title-row h2 {
+  margin: 0;
+  font-size: 19px;
+  letter-spacing: -0.01em;
+}
+
+.mbk-idchip {
+  padding: 2px 8px;
+  border: 1px solid var(--chrome-border);
+  border-radius: 6px;
+  background: var(--chrome-bg);
+  color: var(--chrome-muted);
+  font-family: var(--mono);
+  font-size: 11px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.mbk-idchip:active {
+  background: var(--chrome-border);
+  border-color: var(--chrome-border-strong);
+  box-shadow: inset 0 1px 2px rgba(20, 28, 22, 0.14);
+  color: var(--chrome-ink);
+  transform: translateY(1px);
+}
+
+.mbk-seg {
+  display: inline-flex;
+  padding: 3px;
+  border-radius: 8px;
+  background: var(--chrome-bg);
+  border: 1px solid var(--chrome-border);
+}
+
+.mbk-seg span,
+.mbk-seg a,
+.mbk-seg button {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--chrome-muted);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.mbk-seg span.active,
+.mbk-seg a.active,
+.mbk-seg button.active,
+.mbk-seg [aria-pressed="true"],
+.mbk-seg [aria-current="page"] {
+  background: var(--chrome-surface);
+  color: var(--chrome-ink);
+  box-shadow: 0 1px 2px rgba(20, 28, 22, 0.1);
+}
+
+.mbk-stage {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 40px;
+  min-height: 0;
+  padding: 28px;
+  overflow: auto;
+  background: radial-gradient(
+      circle at center,
+      rgba(20, 28, 22, 0.05) 1px,
+      transparent 1px
+    )
+    0 0 / 22px 22px;
+}
+
+.mbk-frame-wrap {
+  min-width: 0;
+}
+
+.mbk-frame-mobile {
+  flex: 0 0 auto;
+}
+
+.mbk-frame-desktop {
+  flex: 0 1 1180px;
+  min-width: 0;
+}
+
+.mbk-frame-desktop .browser-frame {
+  width: 100%;
+}
+
+.mbk-frame-label {
+  margin: 0 0 10px;
+  color: var(--chrome-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.mbk-frame-scheme-note {
+  display: none;
+  font-weight: 500;
+}
+
+body[data-mokly-color-scheme="dark"]
+  .mbk-frame-wrap[data-color-scheme-fallback]
+  .mbk-frame-scheme-note {
+  display: inline;
+}
+
+.mbk-live[data-viewport="mobile"] .mbk-frame-desktop {
+  display: none;
+}
+
+.mbk-live[data-viewport="desktop"] .mbk-frame-mobile {
+  display: none;
+}
+
+.mbk-flow {
+  flex: 1;
+  overflow: auto;
+  padding: 28px 28px 40px;
+}
+
+.mbk-flow .flow-track {
+  gap: 26px;
+}
+
+.mbk-flow .flow-step::before {
+  top: 32px;
+  bottom: -26px;
+}
+
+.mbk-flow .flow-step-head h3 {
+  font-size: 16px;
+}
+
+.mbk-flow-screen {
+  margin-left: 44px;
+  max-width: 1180px;
+}
+
+.mbk-flow-screen .browser-frame {
+  height: 640px;
+}
+
+.mbk-flow-screen .browser-frame.is-expanded {
+  height: auto;
+}
+
+.mbk-stage-embed {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  padding: 18px 24px;
+  overflow: auto;
+  background: radial-gradient(
+      circle at center,
+      rgba(20, 28, 22, 0.05) 1px,
+      transparent 1px
+    )
+    0 0 / 22px 22px;
+}
+
+.mbk-stage-embed iframe {
+  flex: 1;
+  width: 100%;
+  min-height: 520px;
+  border: 1px solid var(--chrome-border);
+  border-radius: 12px;
+  background: var(--chrome-surface);
+}
+
+.mbk-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 40px;
+  text-align: center;
+  color: var(--chrome-ink-2);
+}
+
+.mbk-empty h2 {
+  margin: 0;
+  color: var(--chrome-ink);
+  font-size: 19px;
+}
+
+.mbk-empty p {
+  margin: 0;
+  max-width: 460px;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.mbk-empty-note {
+  color: var(--chrome-muted);
+  font-size: 12px;
+}
+
+.mbk-empty code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+}
+
+.mbk-empty-link {
+  margin-top: 8px;
+  color: var(--mokly-accent);
+  font-weight: 600;
+}
+
+.mbk-frag {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #ffffff;
+}
+
+.phone-screen .mbk-frag {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+  border-radius: 0 0 36px 36px;
+}
+
+@media (max-width: 56.25rem) {
+  .mbk-topbar > [data-mokly-schemeswitch] {
+    display: none;
+  }
+
+  .mbk-screen-head > [data-mokly-schemeswitch] {
+    display: inline-flex;
+  }
+}
+
+@media (max-width: 760px) {
+  .mbk-screen-head {
+    padding: 12px 16px 11px;
+  }
+
+  .mbk-screen-head > .mbk-seg {
+    flex: 1 0 100%;
+    margin-left: 0;
+  }
+
+  .mbk-screen-head > .mbk-seg button {
+    flex: 1;
+  }
+
+  .mbk-stage {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .mbk-frame-desktop {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .mbk-flow-screen {
+    margin-left: 0;
+  }
+}
+`;
+//# sourceMappingURL=css_views.js.map

package/dist/server/shell/css_views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_views.js","sourceRoot":"","sources":["../../../src/server/shell/css_views.ts"],"names":[],"mappings":"AAAA;iCACiC;AAEjC,+BAA+B;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6U7B,CAAC"}

package/dist/server/shell/css_workspace.d.ts

@@ -0,0 +1,3 @@
+/** Bounded preview/inspector panes and grouped, aligned view controls. */
+export declare const SHELL_WORKSPACE_CSS = "\n.mbk-workspace {\n  display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;\n}\n.mbk:has(.mbk-workspace) .mbk-topbar [data-mokly-schemeswitch] { display: none; }\n.mbk-workspace [hidden] { display: none !important; }\n.mbk-workspace .mbk-screen-head { align-items: center; }\n.mbk-view-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }\n.mbk-icon-button, .mbk-icon-select {\n  position: relative; display: inline-flex; align-items: center; justify-content: center;\n  flex: none; gap: 5px; width: 34px; height: 34px; padding: 0; border: 1px solid transparent;\n  border-radius: 7px; background: transparent; color: var(--chrome-ink-2); cursor: pointer;\n}\n.mbk-icon-button svg, .mbk-icon-select svg { display: block; flex: none; }\n.mbk-icon-select { width: 48px; }\n.mbk-icon-select svg:last-of-type { width: 12px; }\n.mbk-icon-select select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }\n.mbk-icon-button:hover, .mbk-icon-select:hover { background: var(--chrome-bg); }\n.mbk-icon-button:focus-visible, .mbk-icon-select:focus-within, .mbk-inspector-resize:focus-visible {\n  outline: 2px solid var(--mokly-accent); outline-offset: 2px;\n}\n.mbk-icon-button[aria-selected=\"true\"], .mbk-icon-button[aria-pressed=\"true\"] {\n  color: var(--mokly-accent); background: var(--mokly-accent-soft); border-color: var(--chrome-border);\n}\n.mbk-icon-button:disabled { opacity: .42; cursor: default; }\n.mbk-selection-bar {\n  display: flex; align-items: center; flex: none; gap: 12px; padding: 8px 24px;\n  background: var(--chrome-surface); border-bottom: 1px solid var(--chrome-border); font-size: 12px;\n}\n.mbk-selection-bar:has(> [hidden]:only-child) { display: none; }\n.mbk-selection-bar label { display: flex; align-items: center; gap: 10px; color: var(--chrome-muted); }\n.mbk-selection-bar select, .mbk-inspector select {\n  background: var(--chrome-surface); color: var(--chrome-ink); border: 1px solid var(--chrome-border); border-radius: 6px; padding: 6px 28px 6px 8px; font: inherit;\n}\n.mbk-entry-status { border: 1px solid var(--chrome-border); border-radius: 5px; padding: 3px 7px; font-weight: 600; color: var(--chrome-ink-2); }\n.mbk-entry-status[data-status=\"Added\"] { color: #246343; background: #e6f3ea; }\n.mbk-entry-status[data-status=\"Changed\"] { color: #745316; background: #faf1d8; }\n.mbk-entry-status[data-status=\"Removed\"] { color: #873a35; background: #fae9e7; }\n.mbk-variant-status { color: var(--chrome-muted); }\n.mbk-selection-error { margin: 0; padding: 10px 24px; color: var(--chrome-ink); }\n.mbk-workspace-panes { display: flex; flex: 1; flex-direction: column; position: relative; min-height: 0; min-width: 0; }\n.mbk-preview-pane { display: flex; flex: 1; flex-direction: column; min-height: 100px; min-width: 0; overflow: hidden; }\n.mbk-inspector { position: relative; flex: none; display: flex; flex-direction: column; min-height: 45px; background: var(--chrome-surface); border-top: 1px solid var(--chrome-border); z-index: 5; }\n.mbk-inspector[data-open=\"true\"] { height: var(--inspector-height, 260px); max-height: calc(100% - 100px); }\n.mbk-inspector-tabs { display: flex; align-items: center; flex: none; gap: 5px; height: 45px; padding: 5px 16px; }\n.mbk-inspector-title { font-size: 12px; font-weight: 600; margin-left: 6px; flex: 1; }\n.mbk-inspector-content { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; font-size: 13px; }\n.mbk-inspector-content > section { padding: 10px 24px 24px; }\n.mbk-inspector-content .mbk-details-body { padding: 0; }\n.mbk-inspector-content h3 { font-size: 13px; margin: 0 0 12px; }\n.mbk-inspector-content p { line-height: 1.5; }\n.mbk-inspector-content a { color: var(--mokly-accent); }\n.mbk-inspector-resize { position: absolute; top: -8.5px; left: 0; right: 0; height: 16px; cursor: row-resize; touch-action: none; z-index: 2; }\n.mbk-inspector-resize::after { content: ''; position: absolute; width: 42px; height: 3px; border-radius: 9px; background: var(--chrome-muted); left: 50%; top: 6.5px; transform: translateX(-50%); }\n.mbk-inspector:not([data-open=\"true\"]) .mbk-inspector-resize { display: none; }\n.mbk-sheet-grab { display: none; }\n.mbk-component-stage { align-items: flex-start; overflow: auto; }\n.mbk-component-canvas { flex: none; }\n.mbk-component-canvas.mbk-frame-mobile { width: 390px; }\n.mbk-component-canvas.mbk-frame-desktop { width: 1024px; }\n.mbk-component-canvas iframe { width: 100%; height: 520px; display: block; border: 1px solid var(--chrome-border); border-radius: 8px; background: white; }\n.mbk-workspace [data-mokly-stage][data-viewport=\"mobile\"] .mbk-frame-desktop,\n.mbk-workspace [data-mokly-stage][data-viewport=\"desktop\"] .mbk-frame-mobile { display: none; }\n.mbk-diff-screen[data-diff-component] .mb-pane-doc iframe { width: 100%; min-width: 390px; height: 520px; border: 1px solid var(--chrome-border); background: white; }\n.mbk-instance-context { display: inline-block; margin: 0 8px 12px 0; }\n.mbk-instance-tree, .mbk-usage-list { list-style: none; padding: 0; margin: 0; }\n.mbk-instance-tree .mbk-instance-tree { padding-left: 20px; border-left: 1px solid var(--chrome-border); }\n.mbk-instance-tree li { padding: 3px 0; }\n.mbk-instance-tree summary { cursor: pointer; color: var(--chrome-muted); font-size: 12px; padding: 4px 0; }\n.mbk-instance-select { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 6px 8px; color: var(--chrome-ink); text-align: left; cursor: pointer; font: inherit; }\n.mbk-instance-select[aria-pressed=\"true\"] { background: var(--mokly-accent-soft); color: var(--mokly-accent); border-color: var(--chrome-border); }\n.mbk-props-table { width: 100%; border-collapse: collapse; text-align: left; }\n.mbk-props-table td, .mbk-props-table th { border-bottom: 1px solid var(--chrome-border); padding: 8px; vertical-align: top; }\n.mbk-props-table th { width: 130px; font-size: 12px; }\n.mbk-props-table pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 12px; }\n.mbk-usage-list li { padding: 8px 0; border-bottom: 1px solid var(--chrome-border); }\n.mbk-usage-list small { display: block; margin-top: 4px; color: var(--chrome-muted); }\n.mbk-comparison-evidence { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--chrome-border); }\n.mbk-highlight-layer { position: fixed; pointer-events: none; z-index: 4; overflow: hidden; }\n.mbk-highlight-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.mbk-highlight-label { position: absolute; pointer-events: auto; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 4px; background: #336249; color: white; padding: 3px 7px; font: 11px var(--sans); cursor: pointer; }\n.mbk-control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; }\n.mbk-control-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }\n.mbk-control-field > label:not(.mbk-control-supplied) { font-size: 12px; font-weight: 600; }\n.mbk-control-field input:not([type=checkbox]), .mbk-control-field select { min-width: 0; width: 100%; padding: 8px 10px; font: inherit; color: var(--chrome-ink); border: 1px solid var(--chrome-border); border-radius: 6px; background: var(--chrome-surface); }\n.mbk-control-field input[type=checkbox] { align-self: start; accent-color: var(--mokly-accent); width: 16px; height: 16px; }\n.mbk-control-field [aria-invalid=true] { border-color: #a33737; }\n.mbk-control-field input:focus-visible, .mbk-control-field select:focus-visible { outline: 2px solid var(--mokly-accent); outline-offset: 2px; }\n.mbk-control-field :disabled { opacity: .6; cursor: default; }\n.mbk-control-field small { color: var(--chrome-muted); }\n.mbk-control-field .mbk-control-supplied { display: flex; align-items: center; gap: 4px; position: absolute; right: 0; top: -3px; color: var(--chrome-muted); font-size: 11px; }\n.mbk-control-field .mbk-control-error, .mbk-control-error { color: #9b3333; }\n.mbk-control-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n.mbk-control-actions p { margin: 0 auto 0 0; color: var(--chrome-muted); }\n@media (max-width: 56.25rem) {\n  .mbk-workspace .mbk-screen-head { gap: 8px; padding: 12px; }\n  .mbk-workspace .mbk-title-row { gap: 6px; flex-wrap: wrap; }\n  .mbk-workspace .mbk-title-row h2 { font-size: 17px; }\n  .mbk-selection-bar { padding: 8px 12px; }\n  .mbk-workspace-panes { padding-bottom: 46px; }\n  .mbk-inspector { position: absolute; left: 8px; right: 8px; bottom: 0; border: 1px solid var(--chrome-border); border-bottom: 0; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -5px 20px #0000000a; }\n  .mbk-inspector[data-open=\"true\"] { height: min(42%, 320px); min-height: 190px; max-height: calc(100% - 36px); }\n  .mbk-inspector[data-expanded=\"true\"][data-open=\"true\"] { height: 80%; }\n  .mbk-inspector-resize { display: none; }\n  .mbk-inspector-tabs { padding: 4px 10px; }\n  .mbk-inspector-content > section { padding: 8px 14px 20px; }\n  .mbk-sheet-grab { display: grid; flex: none; place-items: center; height: 22px; padding: 0; border: 0; border-radius: 14px 14px 0 0; background: transparent; touch-action: none; cursor: ns-resize; }\n  .mbk-sheet-grab span { width: 36px; height: 5px; border-radius: 9px; background: var(--chrome-muted); opacity: .5; }\n  .mbk-inspector:not([data-open=\"true\"]) .mbk-sheet-grab { display: none; }\n}\n";
+//# sourceMappingURL=css_workspace.d.ts.map

package/dist/server/shell/css_workspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_workspace.d.ts","sourceRoot":"","sources":["../../../src/server/shell/css_workspace.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,eAAO,MAAM,mBAAmB,m6SA8G/B,CAAC"}