konpeki 0.3.0 → 0.4.0

package/src/lib/alignment.ts

@@ -0,0 +1,21 @@
+export type Guide = { axis: "x" | "y"; value: number };
+
+export function closest(points: number[], targets: number[], threshold: number) {
+  let match: { delta: number; target: number } | undefined;
+  for (const point of points)
+    for (const target of targets) {
+      const delta = target - point;
+      if (Math.abs(delta) <= threshold && (!match || Math.abs(delta) < Math.abs(match.delta)))
+        match = { delta, target };
+    }
+  return match;
+}
+
+/** Visual references only. Never change the dragged coordinates. */
+export function referenceGuides(rect: { x: number; y: number; width: number; height: number }, targets: { x: number[]; y: number[] }, threshold = 2): Guide[] {
+  return (["x", "y"] as const).flatMap(axis => {
+    const size = axis === "x" ? rect.width : rect.height;
+    const match = closest([rect[axis], rect[axis] + size / 2, rect[axis] + size], targets[axis], threshold);
+    return match ? [{ axis, value: match.target }] : [];
+  });
+}

package/src/lib/page-board.ts

@@ -0,0 +1,25 @@
+/** Presentation geometry only; never stored in the authored document. */
+export function layoutPages(sizes: readonly { width: number; height: number }[], availableWidth: number, availableHeight: number) {
+  const gap = 80, heading = 32;
+  let nextX = 0;
+  const pages = sizes.map(size => {
+    const scale = Math.min(availableWidth / size.width, Math.max(0, availableHeight - heading) / size.height);
+    const width = size.width * scale, height = size.height * scale;
+    const x = nextX;
+    nextX += width + gap;
+    return { x, y: heading, width, height };
+  });
+  const arrows = pages.slice(1).map((next, index) => {
+    const previous = pages[index];
+    const start = previous.x + previous.width + 16;
+    const end = next.x - 16;
+    const middle = (start + end) / 2;
+    return `M ${start} ${previous.y + previous.height / 2} H ${middle} V ${next.y + next.height / 2} H ${end}`;
+  });
+  return {
+    // The board centers this tightly bounded row when it fits the viewport.
+    width: pages.length ? nextX - gap : availableWidth,
+    height: pages.length ? heading + Math.max(...pages.map(page => page.height)) : 0,
+    pages, arrows,
+  };
+}

package/src/lib/review-position.ts

@@ -0,0 +1,19 @@
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** Fixed viewport coordinates; the caller measures the already-zoomed target. */
+export function reviewPosition(anchor: Rect, panel: Pick<Rect, "width" | "height">, viewport: Rect) {
+  const margin = 16, gap = 12;
+  const minX = viewport.x + margin, minY = viewport.y + margin;
+  const maxX = Math.max(minX, viewport.x + viewport.width - margin - panel.width);
+  const maxY = Math.max(minY, viewport.y + viewport.height - margin - panel.height);
+  const left = Math.max(minX, Math.min(anchor.x, maxX));
+  const top = Math.max(minY, Math.min(anchor.y, maxY));
+  const candidates = [
+    { left, top: anchor.y + anchor.height + gap },
+    { left, top: anchor.y - gap - panel.height },
+    { left: anchor.x + anchor.width + gap, top },
+    { left: anchor.x - gap - panel.width, top },
+  ];
+  return candidates.find(p => p.left >= minX && p.left <= maxX && p.top >= minY && p.top <= maxY)
+    ?? { left, top: Math.max(minY, Math.min(candidates[0].top, maxY)) };
+}

package/src/styles/base.css

@@ -17,6 +17,7 @@
   --ui-hover: #f2f2f2;
   --ui-selected: #edf6fa;
   --ui-shadow: 0 8px 28px #00000014, 0 1px 3px #00000012;
+  --ui-floating-shadow: 0 0 0 1px #0000000f, 0 2px 4px #00000006, 0 8px 24px #0000000a;
 }
 * {
   box-sizing: border-box;
@@ -52,6 +53,9 @@ button:disabled {
   cursor: default;
   color: #767676;
 }
+.revision-note-count {
+  font-variant-numeric: tabular-nums;
+}
 :focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
@@ -98,12 +102,6 @@ h2 {
   background: #383838;
   border-color: #383838;
 }
-.panel-toggle:active:not(:disabled),
-.action-island button:active:not(:disabled),
-.component-dock button:active:not(:disabled),
-.segmented-options button:active:not(:disabled),
-.theme-options button:active:not(:disabled),
-.appearance-options button:active:not(:disabled),
 .revision-note-submit button:active:not(:disabled),
 .revision-note-remove:active:not(:disabled) {
   transform: scale(0.96);

package/src/styles/feedback.css

@@ -1,42 +1,79 @@
-.toast {
+.feedback-notice {
   position: fixed;
-  top: 20px;
-  bottom: auto;
   left: 50%;
-  transform: translateX(-50%);
-  transform-origin: center top;
-  display: none;
-  align-items: center;
-  gap: 12px;
+  z-index: 50;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate(-50%, -3px);
+  transition: opacity 120ms ease-in, transform 120ms ease-in,
+    visibility 0s 120ms;
   background: var(--ui-surface);
   color: var(--ui-text);
-  border: 1px solid var(--ui-border);
-  box-shadow: 0 4px 16px #0000000a, 0 1px 3px #00000008;
-  padding: 10px 14px;
+  border: 1px solid transparent;
   border-radius: 12px;
+  box-shadow: var(--ui-floating-shadow);
   font-size: 13px;
   line-height: 1.5;
+}
+.feedback-notice.visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translate(-50%, 0);
+  transition: opacity 180ms ease-out, transform 180ms ease-out,
+    visibility 0s;
+}
+@starting-style {
+  .feedback-notice.visible {
+    opacity: 0;
+    transform: translate(-50%, -6px);
+  }
+}
+.toast {
+  top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
   width: max-content;
-  max-width: min(520px, max(240px, calc(100vw - 744px)), calc(100vw - 40px));
-  z-index: 50;
+  max-width: min(560px, calc(100vw - 40px));
 }
-.toast > span {
+.toast > span,
+.recovery > span,
+.parameter-error {
   min-width: 0;
   overflow-wrap: anywhere;
+  text-wrap: pretty;
 }
-.toast.visible {
-  display: flex;
-  animation: toast-enter 180ms ease-out both;
+.toast > button {
+  flex: none;
+  min-height: 36px;
+  font-size: 12px;
+  border: 0;
 }
-.toast.visible.closing {
-  pointer-events: none;
-  animation: toast-exit 180ms ease-in both;
+.toast > button,
+.recovery-actions button {
+  border-radius: 6px;
+  background: transparent;
 }
+.toast > button:hover:not(:disabled),
+.recovery-actions button:hover:not(:disabled) {
+  background: var(--ui-hover);
+}
+.toast-dismiss {
+  width: 36px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: 20px !important;
+  color: inherit;
+}
+.toast-undo { margin-left: 12px; padding: 4px 8px; border: 0; background: transparent; color: var(--accent); font-weight: 500; }
 .toast.error {
-  border-color: #e4b5b5;
   background: #fff7f7;
   color: #8d1717;
-  box-shadow: 0 0 0 1px #b13d3d14, 0 4px 16px #5f11110d;
+  box-shadow: 0 0 0 1px #b13d3d33, 0 4px 16px #5f11110d;
 }
 .toast.error::before {
   display: grid;
@@ -50,52 +87,51 @@
   content: "!";
   font-weight: 600;
 }
-@keyframes toast-enter {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -6px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-}
-@keyframes toast-exit {
-  from {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -6px);
-  }
-}
 .recovery {
-  position: fixed;
   bottom: 100px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 50;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  display: grid;
   gap: 12px;
   width: max-content;
-  max-width: min(520px, max(240px, calc(100vw - 744px)), calc(100vw - 40px));
-  background: var(--ui-surface);
-  border: 1px solid var(--ui-border);
-  border-radius: 12px;
-  box-shadow: var(--ui-shadow);
+  max-width: min(420px, calc(100vw - 40px));
   padding: 12px;
-  font-size: 13px;
-  line-height: 1.5;
 }
-.recovery > span {
-  min-width: 0;
-  overflow-wrap: anywhere;
+.recovery-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
 }
-.recovery > button {
-  flex: none;
+.recovery-actions button {
+  min-height: 36px;
+  font-size: 12px;
+  border: 1px solid var(--ui-border);
+}
+.recovery-actions button:hover:not(:disabled) {
+  border-color: var(--ui-control);
+}
+input[aria-invalid="true"] {
+  border-color: #b13d3d;
+  box-shadow: none;
+}
+input[aria-invalid="true"]:focus-visible {
+  outline: 2px solid #b13d3d;
+  outline-offset: -1px;
+}
+.parameter-error {
+  position: fixed;
+  z-index: 60;
+  width: 260px;
+  padding: 10px 12px;
+  border: 1px solid #e4b5b5;
+  border-radius: 8px;
+  background: #fff7f7;
+  color: #8d1717;
+  box-shadow: 0 4px 16px #0000000a;
+  font-size: 12px;
+  line-height: 1.5;
+}
+@media (max-width: 900px) {
+  .toast { top: 16px; }
 }
 @media (prefers-reduced-motion: reduce) {
   *,