konpeki 0.3.0 → 0.4.0

package/src/styles/shell.css

@@ -1,332 +1,104 @@
-.skip-link {
-  position: fixed;
-  top: -60px;
-  left: 12px;
-  background: white;
-  padding: 10px;
-  z-index: 100;
-  color: var(--accent);
-}
-.skip-link:focus {
-  top: 8px;
-}
 .workspace {
-  --panel-duration: 200ms;
-  --panel-easing: cubic-bezier(0.2, 0, 0, 1);
-  --panel-header-height: 58px;
-  position: relative;
   height: 100dvh;
-  min-height: 100dvh;
-  overflow: hidden;
+  overflow: auto;
+  padding: 32px 48px;
   background: var(--ui-bg);
-}
-.left-sidebar,
-.right-panel {
+  scrollbar-gutter: stable;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+}
+.board-heading { margin: 0 0 24px; }
+.board-heading h1 { font-size: 17px; font-weight: 500; }
+.board-help { margin: 24px auto 0; text-align: center; font-size: 12px; color: var(--ui-muted); }
+.page-board { display: flex; align-items: center; justify-content: center; width: max-content; min-width: 100%; }
+.page-board-content { position: relative; flex: none; }
+.board-page { position: absolute; }
+.stage-meta { display: flex; align-items: baseline; gap: 12px; height: 32px; padding-top: 2px; color: var(--ui-muted); font-size: 12px; line-height: 18px; }
+.page-index { flex: none; font-variant-numeric: tabular-nums; }
+.stage-meta h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: inherit; }
+.stage-meta input { width: min(300px, 100%); height: 26px; margin-top: -3px; padding: 2px 6px; font: inherit; }
+.page-order { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
+.page-order path { fill: none; stroke: #8b969c; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
+.review-launcher {
   position: fixed;
-  top: 20px;
-  height: calc(100dvh - 112px);
-  width: var(--panel-width);
-  z-index: 30;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--ui-surface);
-  min-height: 0;
-  border: 1px solid var(--ui-border);
-  border-radius: 12px;
-  box-shadow: var(--ui-shadow);
-  transition: width var(--panel-duration) var(--panel-easing),
-    height var(--panel-duration) var(--panel-easing);
-}
-.left-sidebar {
-  --panel-width: 252px;
-  left: 20px;
+  right: 24px;
+  bottom: 24px;
   z-index: 40;
-}
-.left-sidebar.collapsed {
-  width: 107px;
-  height: calc(var(--panel-header-height) + 2px);
-}
-.left-sidebar:not(.collapsed):has(.browser-menu[open]) {
-  overflow: visible;
-}
-.right-panel {
-  --panel-width: min(328px, calc(100vw - 40px));
-  right: 20px;
-}
-.right-panel.collapsed {
-  width: 50px;
-  height: calc(var(--panel-header-height) + 2px);
-}
-.right-panel.collapsed > .panel-toolbar {
-  gap: 0;
-  padding: 0 4px;
-  border-bottom-color: transparent;
-}
-.right-panel.collapsed .panel-tabs {
-  visibility: hidden;
-}
-.left-panel,
-.right-panel-body {
-  width: calc(var(--panel-width) - 2px);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.right-panel-body {
-  align-self: flex-end;
-}
-.left-panel,
-.action-island,
-.right-panel-body {
-  transition: opacity var(--panel-duration) var(--panel-easing),
-    visibility 0s;
-}
-.left-panel.collapsed,
-.left-collapsed .action-island,
-.right-panel.collapsed .right-panel-body {
-  opacity: 0;
-  visibility: hidden;
-  transition-delay: 0s, var(--panel-duration);
-}
-.panel-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 48px;
-  background: var(--ui-surface);
-  border-bottom: 1px solid var(--ui-border);
-}
-.left-panel > .panel-toolbar {
-  flex: none;
-  padding: 0 8px 0 16px;
-  border-bottom: 0;
-}
-.right-panel > .panel-toolbar {
-  flex: none;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 40px;
-  height: var(--panel-header-height);
-  padding: 0 8px 0 12px;
-  overflow: hidden;
-  transition: padding var(--panel-duration) var(--panel-easing),
-    gap var(--panel-duration) var(--panel-easing);
-}
-.panel-heading {
-  flex: 1;
-  color: var(--ui-text);
-  font-size: 13px;
-  font-weight: 500;
-}
-.panel-toggle {
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: 0;
-  border-radius: 6px;
-  border-color: transparent;
-  box-shadow: none;
-}
-.panel-toggle:hover:not(:disabled) {
-  border-color: transparent;
-  background: var(--ui-hover);
-}
-.panel-close-icon,
-.panel-collapse-icon {
-  position: relative;
-  display: block;
-  width: 14px;
-  height: 14px;
-  margin: auto;
-}
-.panel-collapse-icon {
-  width: 18px;
-  height: 18px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.7;
-}
-.panel-close-icon::before,
-.panel-close-icon::after {
-  position: absolute;
-  top: 6px;
-  left: 1px;
-  width: 12px;
-  height: 1.5px;
-  border-radius: 1px;
-  background: currentColor;
-  content: "";
-}
-.panel-close-icon::before {
-  transform: rotate(45deg);
-}
-.panel-close-icon::after {
-  transform: rotate(-45deg);
-}
-.panel-tabs {
-  flex: 1;
-  display: flex;
-  align-self: stretch;
-  min-width: 0;
-  justify-content: flex-start;
-  gap: 20px;
-}
-.left-panel .panel-tabs button {
-  padding-inline: 1px;
-  font-size: 12px;
-}
-.panel-tabs button {
-  position: relative;
-  border: 0;
-  border-radius: 0;
-  padding: 0 2px;
-  background: transparent;
-  color: var(--ui-muted);
-  font-size: 13px;
-  font-weight: 500;
-}
-.panel-tabs button:hover:not(:disabled) {
-  border-color: transparent;
-  background: transparent;
-  color: var(--ui-text);
-}
-.panel-tabs button.active {
-  background: transparent;
-  color: #006aa1;
-  box-shadow: none;
-}
-.panel-tabs button.active::after {
-  position: absolute;
-  right: 0;
-  bottom: -1px;
-  left: 0;
-  height: 2px;
-  background: var(--accent);
-  content: "";
-}
-.stage {
-  position: absolute;
-  inset: 0;
-  padding: 112px 376px 110px 292px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  transition: padding-left var(--panel-duration) var(--panel-easing),
-    padding-right var(--panel-duration) var(--panel-easing);
-}
-.workspace.left-collapsed .stage {
-  padding-left: 96px;
-}
-.workspace.right-collapsed .stage {
-  padding-right: 96px;
-}
-.editor-content {
-  display: contents;
-}
-.is-building .canvas {
-  opacity: 0.18;
-  filter: none;
-}
-.build-loading {
-  z-index: 45;
-  pointer-events: none;
-}
-.build-loading-card {
-  pointer-events: auto;
-  display: grid;
-  gap: 10px;
-  width: min(320px, 100%);
-  padding: 24px;
-  border: 1px solid var(--ui-border);
-  border-radius: 16px;
-  background: var(--ui-surface);
-  box-shadow: var(--ui-shadow);
-  text-align: center;
-}
-.build-loading-card button {
-  min-height: 40px;
-  border-radius: 8px;
-}
-.build-loading-card strong {
-  font-size: 14px;
-  font-weight: 500;
-}
-.build-loading-card span {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ui-muted);
-}
-.build-nebula {
-  position: relative;
-  width: 88px;
-  height: 88px;
-  margin: -4px auto 4px;
-}
-.build-nebula::before {
-  content: "";
-  position: absolute;
-  inset: 14px;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  padding: 14px;
+  border: 1px solid #00000014;
   border-radius: 50%;
-  background: conic-gradient(from 45deg, #77d3ed70, #b994dc60, #729fec50, #77d3ed70);
-  filter: blur(10px);
-  animation: orb-turn 12s linear infinite reverse;
-}
-.slide-wrap {
-  width: 100%;
-  max-width: min(1200px, calc((100vh - 270px) * var(--page-ratio)));
-}
-.stage-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 26px;
-  margin: 0 0 12px;
-}
-.edit-elements-action {
-  flex-shrink: 0;
-  min-height: 40px;
-  padding: 7px 10px;
-  font-size: 12px;
-}
-.stage-meta h2 {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--ui-muted);
-  margin: 0;
-  cursor: text;
-}
-.stage-meta input {
-  width: min(240px, 100%);
-  height: 40px;
-  padding: 7px 9px;
-  font-size: 12px;
-}
-@media (max-width: 1200px) {
-  .stage {
-    padding-right: 96px;
-    padding-left: 276px;
-  }
-}
-@media (max-width: 900px) {
-  .workspace.left-collapsed .stage,
-  .workspace.right-collapsed .stage,
-  .workspace.left-collapsed.right-collapsed .stage {
-    padding: 96px 16px 110px;
-  }
-}
-
+  background: #25292c;
+  color: white;
+  box-shadow: 0 2px 4px #00000006, 0 6px 16px #0000000d;
+}
+.review-launcher:hover:not(:disabled) { background: #373d41; border-color: #00000014; color: white; box-shadow: 0 2px 4px #00000008, 0 8px 20px #00000012; }
+.review-launcher:active:not(:disabled) { transform: translateY(1px); }
+.review-launcher[aria-pressed="true"] { border-color: var(--accent); background: var(--ui-selected); color: var(--accent); box-shadow: 0 2px 4px #00000008, 0 6px 18px #007bbb26; }
+.review-launcher[aria-pressed="true"]:hover:not(:disabled),
+.review-launcher[aria-pressed="true"][aria-expanded="true"] { background: #e0f0f8; color: #006da7; }
+.review-launcher svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; animation: review-icon-in 160ms ease-out; }
+.review-count { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; background: var(--accent); color: white; border: 2px solid var(--ui-bg); border-radius: 20px; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; animation: review-icon-in 180ms ease-out; }
+.revision-notes { position: fixed; right: 24px; bottom: 88px; z-index: 40; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 112px); overflow: auto; overscroll-behavior: contain; scroll-padding-block: 16px 68px; scrollbar-width: thin; scrollbar-color: #00000026 transparent; padding: 0 16px 16px; border: 1px solid #00000014; border-radius: 14px; background: var(--ui-surface); box-shadow: 0 4px 12px -2px #0000000f, 0 16px 32px -4px #0000001a; font-size: 13px; line-height: 1.5; animation: review-panel-in 180ms cubic-bezier(.2,.8,.2,1); }
+.revision-notes:not(.comment-composer) { max-height: min(50dvh, calc(100dvh - 108px)); }
+.revision-notes > header:not(.sr-only) { padding: 12px 0 0; }
+.revision-notes h2 { min-width: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
+.revision-notes svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.revision-note-scope { overflow-wrap: anywhere; font-weight: 500; }
+.revision-notes form { padding-top: 14px; }
+.revision-notes textarea { display: block; min-height: 90px; max-height: 220px; padding: 10px 12px; border-color: #dcdfe4; border-radius: 8px; font-size: 14px; }
+.revision-notes textarea::placeholder { color: var(--ui-muted); }
+.revision-notes textarea:hover { border-color: #aab4ba; }
+.revision-notes textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #007bbb1f; }
+.revision-notes .primary, .review-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 12px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; }
+.revision-notes .primary { background: var(--accent); border-color: var(--accent); }
+.revision-notes .primary:hover:not(:disabled) { background: #006da7; border-color: #006da7; }
+.review-secondary { border-color: transparent; background: #eceff1; font-weight: 500; }
+.review-secondary:hover:not(:disabled) { border-color: transparent; background: #e1e6e9; }
+.revision-notes .primary:disabled { background: #f0f2f3; border-color: #e6e9eb; color: #788087; box-shadow: none; }
+.revision-note-submit { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.comment-error { margin-top: 12px; color: #9b2929; font-size: 12px; }
+.comment-copy-fallback { display: grid; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ui-muted); }
+.comment-copy-fallback textarea { font-size: 12px; }
+.revision-note-list { list-style: none; padding: 0; margin: 0; }
+.revision-note-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; padding: 14px 0; border-top: 1px solid var(--ui-border); }
+.revision-note-list li:first-child { border-top: 0; }
+.revision-note-list li p { grid-column: 2 / -1; grid-row: 2; margin-top: 6px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.revision-note-list button { border: 0; background: transparent; border-radius: 6px; font-size: 12px; line-height: 18px; color: var(--ui-muted); }
+.revision-note-target { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; text-align: left; }
+.revision-note-target > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.revision-note-target:hover:not(:disabled) { background: transparent; color: var(--accent); }
+.revision-note-number { display: inline-grid; flex: none; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 50%; background: var(--ui-selected); color: #006da7; font-size: 10px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.revision-note-actions { grid-column: 3; grid-row: 1; display: flex; gap: 2px; margin: -4px -6px -4px 0; }
+.revision-note-actions button { display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; }
+.revision-note-actions button:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-text); }
+.revision-note-actions .revision-note-remove:hover:not(:disabled) { background: #fff1f0; color: #9b2929; }
+.current-comments li p { grid-row: 1; grid-column: 2; margin-top: 0; }
+.current-comments + form { border-top: 1px solid var(--ui-border); }
+.review-empty { margin: 28px 0; color: var(--ui-muted); text-align: center; }
+.review-actions { position: sticky; bottom: -16px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 -16px -16px; padding: 10px 12px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
+.comment-copy-fallback + .review-actions, .comment-error + .review-actions { margin-top: 16px; }
+.comment-composer { padding-bottom: 0; }
+.comment-composer:focus-within { border-color: #007bbb55; }
+.comment-composer .revision-note-scope { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-muted); font-size: 12px; line-height: 18px; }
+.comment-composer form { padding-top: 0; }
+.comment-composer #revision-note { min-height: 88px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.comment-composer .revision-note-submit { margin: 4px -16px 0; padding: 10px 12px; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); }
+.comment-composer > .comment-error { margin-bottom: 12px; }
+@keyframes review-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes review-icon-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
 @media (prefers-reduced-motion: reduce) {
-  .workspace {
-    --panel-duration: 0ms;
-  }
+  .revision-notes, .review-launcher svg, .review-count { animation: none; }
+  .review-launcher, .revision-notes button { transition: none; }
+}
+@media (max-width: 600px) {
+  .workspace { padding: 24px 16px; }
+  .board-heading { margin-bottom: 28px; }
+  .review-launcher { right: 16px; bottom: 16px; }
+  .revision-notes { right: 16px; bottom: 80px; max-height: calc(100dvh - 96px); }
+  .revision-note-actions button { width: 32px; height: 32px; }
+  .review-actions button, .revision-note-submit button { min-height: 36px; }
 }

package/theme-base.css

@@ -0,0 +1,90 @@
+/* Shared output geometry and type scales. Themes supply visual treatments;
+   documents own composition. See html/theme.md for the public contract. */
+[data-page] {
+  --kp-page-width: 1920px; --kp-page-height: 1080px; --kp-page-margin: 72px;
+  --kp-font-fine: 20px; --kp-font-caption: 24px; --kp-font-body: 28px; --kp-font-lead: 36px; --kp-font-heading: 44px; --kp-font-title: 60px; --kp-font-display: 76px;
+  --kp-leading-fine: 28px; --kp-leading-caption: 32px; --kp-leading-body: 40px; --kp-leading-lead: 46px; --kp-leading-heading: 52px; --kp-leading-title: 68px; --kp-leading-display: 84px;
+}
+[data-size="portrait"], [data-size="square"] {
+  --kp-page-width: 1080px; --kp-page-height: 1350px; --kp-page-margin: 60px;
+  --kp-font-fine: 18px; --kp-font-caption: 22px; --kp-font-body: 28px; --kp-font-lead: 34px; --kp-font-heading: 44px; --kp-font-title: 60px; --kp-font-display: 76px;
+  --kp-leading-fine: 24px; --kp-leading-caption: 28px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-heading: 52px; --kp-leading-title: 68px; --kp-leading-display: 84px;
+}
+[data-size="square"] { --kp-page-height: 1080px; }
+[data-size="link"] {
+  --kp-page-width: 1200px; --kp-page-height: 630px; --kp-page-margin: 48px;
+  --kp-font-fine: 16px; --kp-font-caption: 20px; --kp-font-body: 24px; --kp-font-lead: 30px; --kp-font-heading: 40px; --kp-font-title: 52px; --kp-font-display: 64px;
+  --kp-leading-fine: 20px; --kp-leading-caption: 24px; --kp-leading-body: 32px; --kp-leading-lead: 36px; --kp-leading-heading: 48px; --kp-leading-title: 60px; --kp-leading-display: 72px;
+}
+[data-size="article"] {
+  --kp-page-width: 1600px; --kp-page-height: 600px; --kp-page-margin: 48px;
+  --kp-font-fine: 18px; --kp-font-caption: 22px; --kp-font-body: 28px; --kp-font-lead: 34px; --kp-font-heading: 44px; --kp-font-title: 56px; --kp-font-display: 72px;
+  --kp-leading-fine: 24px; --kp-leading-caption: 28px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-heading: 52px; --kp-leading-title: 64px; --kp-leading-display: 80px;
+}
+[data-size="a4"] {
+  --kp-page-width: 210mm; --kp-page-height: 297mm; --kp-page-margin: 56px;
+  --kp-font-fine: 10px; --kp-font-caption: 12px; --kp-font-body: 14px; --kp-font-lead: 18px; --kp-font-heading: 24px; --kp-font-title: 32px; --kp-font-display: 44px;
+  --kp-leading-fine: 14px; --kp-leading-caption: 16px; --kp-leading-body: 20px; --kp-leading-lead: 24px; --kp-leading-heading: 30px; --kp-leading-title: 38px; --kp-leading-display: 50px;
+}
+[data-size="explainer"] { --kp-page-width: 1200px; --kp-page-height: 1600px; --kp-page-margin: 60px; }
+[data-size="gallery"] {
+  --kp-page-width: 1600px; --kp-page-height: 1000px; --kp-page-margin: 64px;
+  --kp-font-lead: 34px; --kp-font-title: 56px; --kp-font-display: 72px;
+  --kp-leading-fine: 24px; --kp-leading-body: 36px; --kp-leading-lead: 44px; --kp-leading-title: 64px; --kp-leading-display: 80px;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; }
+:root { color-scheme: light; }
+[data-page] {
+  --kp-space-1: var(--kp-unit); --kp-space-2: calc(2 * var(--kp-unit)); --kp-space-3: calc(3 * var(--kp-unit));
+  --kp-space-4: calc(4 * var(--kp-unit)); --kp-space-6: calc(6 * var(--kp-unit)); --kp-space-8: calc(8 * var(--kp-unit));
+  --kp-space-5: calc(5 * var(--kp-unit)); --kp-space-10: calc(10 * var(--kp-unit));
+  --kp-space-12: calc(12 * var(--kp-unit)); --kp-space-16: calc(16 * var(--kp-unit));
+  position: relative; display: flow-root;
+  width: var(--kp-page-width); height: var(--kp-page-height); padding: var(--kp-page-margin);
+  background: var(--kp-bg); color: var(--kp-fg);
+  font-family: var(--kp-font-family); font-size: var(--kp-font-body); line-height: var(--kp-leading-body);
+  font-weight: var(--kp-weight-body); letter-spacing: var(--kp-tracking-body);
+  font-synthesis: none;
+  /* Avoid stranded last words; headline roles below balance their lines. */
+  text-wrap: pretty;
+}
+
+/* Zero-specificity defaults leave page-authored CSS in control. An explicit
+   data-type replaces the element's default role without changing its semantics. */
+:where([data-page]) :where(h1, h2, h3, p, figure) { margin: 0; }
+:where([data-page]) :where([data-type="fine"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-fine); line-height: var(--kp-leading-fine);
+  font-weight: var(--kp-weight-fine); letter-spacing: var(--kp-tracking-fine); color: var(--kp-muted);
+}
+:where([data-page]) :where(figcaption:not([data-type]), [data-type="caption"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-caption); line-height: var(--kp-leading-caption);
+  font-weight: var(--kp-weight-caption); letter-spacing: var(--kp-tracking-caption); color: var(--kp-muted);
+}
+:where([data-page]) :where([data-type="body"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-body); line-height: var(--kp-leading-body);
+  font-weight: var(--kp-weight-body); letter-spacing: var(--kp-tracking-body); color: var(--kp-fg);
+}
+:where([data-page]) :where(h3:not([data-type]), [data-type="lead"]) {
+  font-family: var(--kp-font-family); font-size: var(--kp-font-lead); line-height: var(--kp-leading-lead);
+  font-weight: var(--kp-weight-lead); letter-spacing: var(--kp-tracking-lead);
+}
+:where([data-page]) :where(h2:not([data-type]), [data-type="heading"]) {
+  font-family: var(--kp-font-family-heading); font-size: var(--kp-font-heading); line-height: var(--kp-leading-heading);
+  font-weight: var(--kp-weight-heading); letter-spacing: var(--kp-tracking-heading);
+  text-wrap: balance;
+}
+:where([data-page]) :where(h1:not([data-type]), [data-type="title"]) {
+  font-family: var(--kp-font-family-heading); font-size: var(--kp-font-title); line-height: var(--kp-leading-title);
+  font-weight: var(--kp-weight-title); letter-spacing: var(--kp-tracking-title); color: var(--kp-accent);
+  text-wrap: balance;
+}
+:where([data-page]) :where([data-type="display"]) {
+  font-family: var(--kp-font-family-display); font-size: var(--kp-font-display); line-height: var(--kp-leading-display);
+  font-weight: var(--kp-weight-display); letter-spacing: var(--kp-tracking-display); color: var(--kp-accent);
+  text-wrap: balance;
+}
+:where([data-page]) :where(strong) { font-weight: var(--kp-weight-strong); }
+:where([data-page]) :where(code) { font-family: var(--kp-font-family-mono); font-weight: var(--kp-weight-mono); color: var(--kp-accent); }
+:where([data-page]) :where(hr) { margin: var(--kp-space-3) 0; border: 0; border-top: var(--kp-rule-width) solid var(--kp-line); }

package/theme.css

@@ -0,0 +1,56 @@
+/* Konpeki: cobalt ink, paper, measured type. Fonts load from Google Fonts. */
+@import url("theme-base.css");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:ital,wght@0,400;0,600;0,700;1,400&display=block");
+
+:root {
+  --kp-theme: 1;
+  --kp-font-family: "IBM Plex Sans", sans-serif;
+  --kp-font-family-heading: "IBM Plex Sans", sans-serif;
+  --kp-font-family-display: "IBM Plex Sans", sans-serif;
+  --kp-font-family-mono: "IBM Plex Mono", monospace; --kp-weight-mono: 400;
+  --kp-weight-fine: 400; --kp-weight-caption: 400; --kp-weight-body: 400; --kp-weight-lead: 400;
+  --kp-weight-heading: 400; --kp-weight-title: 600; --kp-weight-display: 600; --kp-weight-strong: 600;
+  --kp-tracking-fine: 0em; --kp-tracking-caption: 0em; --kp-tracking-body: 0em; --kp-tracking-lead: 0em;
+  --kp-tracking-heading: -.02em; --kp-tracking-title: -.035em; --kp-tracking-display: -.035em;
+  --kp-unit: 8px;
+  --kp-rule-width: 1px; --kp-stroke: 2px; --kp-stroke-heavy: 5px;
+  --kp-radius: 0px; --kp-radius-small: 0px;
+  --kp-bg: #faf9f6; --kp-fg: #20242a; --kp-muted: #505b68;
+  --kp-line: #c9cfd6; --kp-line-subtle: #e2e5e9; --kp-line-strong: #747f8c;
+  --kp-contrast: #20242a; --kp-on-contrast: #f2f2f2; --kp-on-contrast-muted: #b7bcc4;
+  --kp-inverse: #ffffff;
+  --kp-accent: #2458b8; --kp-wash: #eaf0fa; --kp-surface: #f1f3f5;
+  --kp-emphasis: #98451f; --kp-emphasis-wash: #f1e1d4;
+  --kp-complete: #276749; --kp-attention: #946200; --kp-blocked: #ac3348;
+
+  /* Six categorical colors encode identity; five sequential steps encode
+     ordered amounts. Status is an independent color channel. */
+  --kp-category-1: #3569b7; --kp-category-2: #167d8d;
+  --kp-category-3: #8061a8; --kp-category-4: #a27616;
+  --kp-category-5: #ba536a; --kp-category-6: #59734a;
+  --kp-sequence-1: #e8effb; --kp-sequence-2: #b9cdea;
+  --kp-sequence-3: #7ca2d4; --kp-sequence-4: #4677b8; --kp-sequence-5: #24518d;
+}
+
+/* Cobalt's scale follows the viewing format, not a scaled-up document.
+   Keep these on pages: root type values are shadowed by the shared base. */
+[data-page] {
+  --kp-font-fine: 24px; --kp-font-caption: 28px; --kp-font-body: 32px; --kp-font-lead: 40px; --kp-font-heading: 52px; --kp-font-title: 84px; --kp-font-display: 112px;
+  --kp-leading-fine: 32px; --kp-leading-caption: 36px; --kp-leading-body: 44px; --kp-leading-lead: 50px; --kp-leading-heading: 60px; --kp-leading-title: 92px; --kp-leading-display: 116px;
+}
+[data-size="portrait"], [data-size="square"] {
+  --kp-font-fine: 24px; --kp-font-caption: 28px; --kp-font-body: 32px; --kp-font-lead: 40px; --kp-font-heading: 52px; --kp-font-title: 80px; --kp-font-display: 128px;
+  --kp-leading-fine: 32px; --kp-leading-caption: 36px; --kp-leading-body: 44px; --kp-leading-lead: 50px; --kp-leading-heading: 60px; --kp-leading-title: 88px; --kp-leading-display: 132px;
+}
+[data-size="link"] {
+  --kp-font-fine: 24px; --kp-font-caption: 28px; --kp-font-body: 32px; --kp-font-lead: 40px; --kp-font-heading: 48px; --kp-font-title: 72px; --kp-font-display: 88px;
+  --kp-leading-fine: 32px; --kp-leading-caption: 36px; --kp-leading-body: 44px; --kp-leading-lead: 50px; --kp-leading-heading: 56px; --kp-leading-title: 80px; --kp-leading-display: 92px;
+}
+[data-size="article"] {
+  --kp-font-fine: 24px; --kp-font-caption: 28px; --kp-font-body: 32px; --kp-font-lead: 40px; --kp-font-heading: 48px; --kp-font-title: 72px; --kp-font-display: 96px;
+  --kp-leading-fine: 32px; --kp-leading-caption: 36px; --kp-leading-body: 44px; --kp-leading-lead: 50px; --kp-leading-heading: 56px; --kp-leading-title: 80px; --kp-leading-display: 100px;
+}
+[data-size="a4"] {
+  --kp-font-fine: 11px; --kp-font-caption: 12px; --kp-font-body: 14px; --kp-font-lead: 18px; --kp-font-heading: 24px; --kp-font-title: 32px; --kp-font-display: 44px;
+  --kp-leading-fine: 16px; --kp-leading-caption: 18px; --kp-leading-body: 20px; --kp-leading-lead: 24px; --kp-leading-heading: 30px; --kp-leading-title: 38px; --kp-leading-display: 50px;
+}

package/vite.config.ts

@@ -1,6 +1,3 @@
 import { defineConfig } from "vite";
-export default defineConfig({
-  base: "./",
-  server: { host: "0.0.0.0", allowedHosts: [".onamp.dev"] },
-  preview: { host: "0.0.0.0", allowedHosts: [".onamp.dev"] },
-});
+
+export default defineConfig({ base: "./" });