@plannotator/ui 0.53.1 → 0.55.0

package/components/KeyboardShortcuts.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import {
   formatShortcutBindingTokens,
   listScopeShortcuts,
+  resolveShortcutBindings,
+  reviewExplorerShortcuts,
+  reviewMarkdownPreviewShortcuts,
   vimSelectionShortcuts,
+  type ShortcutScopeDefinition,
 } from '../shortcuts';
 import { isMac, modKey, altKey } from '../utils/platform';
 
@@ -141,6 +145,23 @@ const vimShortcuts: ShortcutSection[] = (() => {
   return Array.from(sections, ([title, shortcuts]) => ({ title, shortcuts }));
 })();
 
+/** Sections read from registry scopes (this system's keys), so they cannot drift. */
+function scopeSections(scope: ShortcutScopeDefinition<any>): ShortcutSection[] {
+  const sections = new Map<string, Shortcut[]>();
+  const entries = listScopeShortcuts(scope)
+    .sort((left, right) => (left.displayOrder ?? 0) - (right.displayOrder ?? 0));
+  for (const entry of entries) {
+    const shortcuts = sections.get(entry.section) ?? [];
+    shortcuts.push({
+      keys: formatShortcutBindingTokens(resolveShortcutBindings(entry)[0] ?? ''),
+      desc: entry.description,
+      hint: entry.hint,
+    });
+    sections.set(entry.section, shortcuts);
+  }
+  return Array.from(sections, ([title, shortcuts]) => ({ title, shortcuts }));
+}
+
 const planActionShortcuts: ShortcutSection = {
   title: 'Actions',
   shortcuts: [
@@ -213,6 +234,8 @@ const reviewShortcuts: ShortcutSection[] = [
       { keys: ['Z'], desc: 'Undo collapse', hint: 'Reopens the last collapsed file and scrolls to it' },
     ],
   },
+  ...scopeSections(reviewExplorerShortcuts),
+  ...scopeSections(reviewMarkdownPreviewShortcuts),
   {
     title: 'Annotations',
     shortcuts: [

package/components/LazyBlockBoundary.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+
+/**
+ * A part of the page that a code-split build loads as its own chunk (a
+ * diagram, an HTML or SVG embed, the diagram popout, the Markdown preview)
+ * can fail to arrive: a flaky link, a server that has stopped, or a tab older
+ * than the server's build, whose chunk names no longer exist. React.lazy then
+ * throws, and without a boundary React unmounts the whole app, taking the
+ * user's unsent comments and edits off the screen with it.
+ *
+ * This boundary keeps the failure in place of that one part. The caller's
+ * `fallback` gets a small notice with a Reload action (`LazyLoadNotice`) and
+ * draws it beside whatever it can still show, usually the block's source.
+ * The rest of the page stays mounted. Nothing reloads by itself.
+ *
+ * With no error it renders its children and nothing else.
+ */
+export class LazyBlockBoundary extends React.Component<
+  { fallback: (notice: React.ReactNode) => React.ReactNode; children: React.ReactNode },
+  { failed: boolean; error: unknown }
+> {
+  state = { failed: false, error: null as unknown };
+
+  static getDerivedStateFromError(error: unknown) {
+    return { failed: true, error };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error('[plannotator] A part of the page could not load:', error);
+  }
+
+  render() {
+    if (this.state.failed) return this.props.fallback(<LazyLoadNotice error={this.state.error} />);
+    return this.props.children;
+  }
+}
+
+/**
+ * The URL of the chunk a failed dynamic import asked for, when the error names
+ * one on this page's origin. Chromium and Firefox put it in the message
+ * ("Failed to fetch dynamically imported module: http://…/assets/x.js");
+ * Safari does not, and then the notice says the general thing.
+ */
+export function failedChunkUrl(error: unknown): string | null {
+  if (typeof window === 'undefined') return null;
+  const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+  const match = /(https?:\/\/[^\s'"]+|\/assets\/[^\s'"]+)/.exec(message);
+  if (!match) return null;
+  try {
+    const url = new URL(match[1], window.location.href);
+    return url.origin === window.location.origin ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * One quiet line: why the part is missing, and Reload. A chunk the server
+ * answers with 404 is a tab older than the server's build (the server was
+ * updated on the same port), so the line says that instead. Finding out costs
+ * one HEAD request, made only after a failure.
+ */
+export const LazyLoadNotice: React.FC<{ error: unknown }> = ({ error }) => {
+  const [updated, setUpdated] = useState(false);
+  useEffect(() => {
+    const url = failedChunkUrl(error);
+    if (url === null || typeof fetch !== 'function') return;
+    let live = true;
+    fetch(url, { method: 'HEAD', cache: 'no-store' }).then(
+      (response) => {
+        if (live && response.status === 404) setUpdated(true);
+      },
+      () => {},
+    );
+    return () => {
+      live = false;
+    };
+  }, [error]);
+
+  return (
+    <div
+      role="status"
+      data-lazy-load-failed={updated ? 'updated' : ''}
+      className="mb-1.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground"
+    >
+      <span>{updated ? 'This page was updated.' : "Couldn't load this view."}</span>
+      {/* The hit area is padding cancelled by a negative margin, so the line
+          looks the same: 24px tall everywhere, 44px on a touch screen. On
+          touch it grows upward into the block's top margin, never down over
+          the source under it. */}
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        className="relative -mx-1 -my-1 px-1 py-1 font-medium text-foreground underline-offset-2 hover:underline [@media(pointer:coarse)]:-mb-1.5 [@media(pointer:coarse)]:-mt-[22px] [@media(pointer:coarse)]:pb-1.5 [@media(pointer:coarse)]:pt-[22px]"
+      >
+        {updated ? 'Reload to see this' : 'Reload'}
+      </button>
+    </div>
+  );
+};

package/components/ListMarker.tsx

@@ -60,17 +60,17 @@ export const ListMarker: React.FC<ListMarkerProps> = ({
       aria-checked={interactive ? checked : undefined}
     >
       {showNumeral && (
-        <span className="text-primary/60 tabular-nums text-right" style={{ minWidth: '1.5rem' }}>
+        <span className="text-primary/60 tabular-nums text-right" style={{ minWidth: '1.5rem' }} data-list-numeral="">
           {orderedIndex}.
         </span>
       )}
       {isCheckbox ? (
         checked ? (
-          <svg className="w-4 h-4 text-success mt-[3px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+          <svg data-list-check="" className="w-4 h-4 text-success mt-[3px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
         ) : (
-          <svg className={`w-4 h-4 text-muted-foreground/50 mt-[3px]${interactive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          <svg data-list-check="" className={`w-4 h-4 text-muted-foreground/50 mt-[3px]${interactive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
             <circle cx="12" cy="12" r="9" />
           </svg>
         )

package/components/LookAndFeelAnnouncementDialog.tsx

@@ -12,6 +12,12 @@ interface LookAndFeelAnnouncementDialogProps {
   onToggleGrid: (value: boolean) => void;
   /** Persists the current choice and closes the dialog. */
   onDismiss: () => void;
+  /**
+   * `first-run` (default): the first-use choice. `moved`: the one-time notice
+   * for someone moved from Grid to Clean when Clean became the default; the
+   * same chooser, with a line saying what changed.
+   */
+  variant?: 'first-run' | 'moved';
 }
 
 const LOOK_OPTIONS: {
@@ -48,6 +54,7 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
   gridEnabled,
   onToggleGrid,
   onDismiss,
+  variant = 'first-run',
 }) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const continueRef = useRef<HTMLButtonElement>(null);
@@ -115,6 +122,7 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
       <div
         ref={dialogRef}
         role="dialog"
+        data-plan-look-prompt={variant}
         aria-modal="true"
         aria-labelledby="plan-look-choice-title"
         aria-describedby="plan-look-choice-description"
@@ -129,13 +137,15 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
             id="plan-look-choice-title"
             className="text-balance text-xl font-semibold tracking-tight sm:text-2xl"
           >
-            Choose how plans look
+            {variant === 'moved' ? 'Plans now open in Clean' : 'Choose how plans look'}
           </h2>
           <p
             id="plan-look-choice-description"
             className="mt-1 text-sm leading-relaxed text-muted-foreground"
           >
-            Pick a starting view. You can change it anytime in Settings.
+            {variant === 'moved'
+              ? "Grid is one switch away in Settings, or pick it here."
+              : "Pick a starting view. You can change it anytime in Settings."}
           </p>
         </header>