@plannotator/ui 0.30.0 → 0.31.0

package/utils/vimScroll.ts

@@ -1,3 +1,8 @@
+import {
+  getScrollViewportRect,
+  offsetScrollViewport,
+} from '../hooks/useScrollViewport';
+
 /**
  * Keep the Vim cursor clear of the HUD bands that hug the viewport edges.
  *
@@ -131,11 +136,11 @@ export function scrollVimTargetIntoView(
     return;
   }
 
-  const viewportRect = viewport.getBoundingClientRect();
+  const viewportRect = getScrollViewportRect(viewport);
   const targetRect = element.getBoundingClientRect();
   if (targetRect.height === 0 && targetRect.width === 0) return;
 
-  const margin = resolveVimScrollMargin(viewport.clientHeight);
+  const margin = resolveVimScrollMargin(viewportRect.height);
   const stickyBottom = viewport
     .querySelector<HTMLElement>('[data-sticky-actions]')
     ?.getBoundingClientRect().bottom;
@@ -153,10 +158,10 @@ export function scrollVimTargetIntoView(
     : margin;
 
   const delta = computeVimScrollDelta(
-    { top: viewportRect.top, height: viewport.clientHeight },
+    { top: viewportRect.top, height: viewportRect.height },
     { top: targetRect.top, bottom: targetRect.bottom },
     { topMargin, bottomMargin },
   );
   if (delta === 0) return;
-  viewport.scrollTop += delta;
+  offsetScrollViewport(viewport, delta);
 }

package/utils/wideMode.ts

@@ -1,4 +1,5 @@
 import type { SidebarTab } from '@plannotator/ui/hooks/useSidebar';
+import type { WideModeType } from '@plannotator/ui/types';
 export type { WideModeType } from '@plannotator/ui/types';
 
 export type WideModeLayoutSnapshot = {
@@ -26,6 +27,25 @@ export function canUseAnnotateWideMode(options: {
   return !options.archiveMode && !options.isPlanDiffActive;
 }
 
+/** What the focus-mode keyboard shortcut should do on this press. */
+export type FocusShortcutAction = 'enter-focus' | 'exit' | 'none';
+
+/**
+ * Decide the next step for the focus-mode keyboard shortcut.
+ *
+ * The shortcut is a single "hide the chrome / give it back" toggle, so ANY
+ * active panel-hiding view mode restores the remembered layout — including
+ * `wide`, which the toolbar control would instead swap for `focus`. A press
+ * that could only re-hide already-hidden panels would look like a dead key.
+ */
+export function resolveFocusShortcutAction(state: {
+  canUseWideMode: boolean;
+  wideModeType: WideModeType | null;
+}): FocusShortcutAction {
+  if (state.wideModeType !== null) return 'exit';
+  return state.canUseWideMode ? 'enter-focus' : 'none';
+}
+
 export function resolveWideModeExitLayout(
   snapshot: WideModeLayoutSnapshot | null,
   options?: WideModeExitOptions,

package/components/PlanAIAnnouncementDialog.tsx

@@ -1,187 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import type { Origin } from '@plannotator/core/agents';
-import { AGENT_CONFIG, getAgentAIProviderTypes, getAgentName } from '@plannotator/core/agents';
-import { SparklesIcon } from './SparklesIcon';
-import { getProviderMeta } from './ProviderIcons';
-
-interface PlanAIAnnouncementProvider {
-  id: string;
-  name: string;
-}
-
-interface PlanAIAnnouncementDialogProps {
-  isOpen: boolean;
-  origin?: Origin | null;
-  providerName?: string | null;
-  /** Actually-detected providers (installed + authenticated). Cards matching one of these are selectable. */
-  providers?: PlanAIAnnouncementProvider[];
-  onSelectProvider?: (providerId: string) => void;
-  onOpenAI: () => void;
-  onDismiss: () => void;
-}
-
-const SUPPORTED_AI_PROVIDER_TYPES = Array.from(
-  new Set(
-    (Object.keys(AGENT_CONFIG) as Origin[])
-      .flatMap(agentOrigin => getAgentAIProviderTypes(agentOrigin))
-  )
-);
-
-const UNSUPPORTED_AI_ORIGINS = (Object.keys(AGENT_CONFIG) as Origin[])
-  .filter(agentOrigin => getAgentAIProviderTypes(agentOrigin).length === 0);
-
-export const PlanAIAnnouncementDialog: React.FC<PlanAIAnnouncementDialogProps> = ({
-  isOpen,
-  origin,
-  providerName,
-  providers = [],
-  onSelectProvider,
-  onOpenAI,
-  onDismiss,
-}) => {
-  if (!isOpen) return null;
-
-  const agentLabel = getAgentName(origin ?? undefined);
-  const providerLabel = providerName ? getProviderMeta(providerName).label : null;
-  const unsupportedLabels = UNSUPPORTED_AI_ORIGINS.map(getAgentName).join(', ');
-
-  return createPortal(
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm p-4">
-      <div className="bg-card border border-border rounded-xl w-full max-w-xl shadow-2xl">
-        {/* Header */}
-        <div className="p-5 border-b border-border">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="p-1.5 rounded-lg bg-primary/15">
-              <SparklesIcon className="w-5 h-5 text-primary" />
-            </div>
-            <h3 className="font-semibold text-base">New: Ask AI for annotated documents</h3>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            Chat with plans and annotated documents directly inside Plannotator.
-          </p>
-          {providerLabel && (
-            <p className="text-xs text-muted-foreground/70 mt-1">
-              Plannotator selected {providerLabel} for {agentLabel}.
-            </p>
-          )}
-        </div>
-
-        {/* Details */}
-        <div className="p-4 space-y-4">
-          {SUPPORTED_AI_PROVIDER_TYPES.length > 0 && (
-            <div>
-              <div className="text-xs text-muted-foreground mb-2">Supported providers</div>
-              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                {SUPPORTED_AI_PROVIDER_TYPES.map(providerType => {
-                  const meta = getProviderMeta(providerType);
-                  const Icon = meta.icon;
-                  const isSelected = providerType === providerName;
-                  // A card is selectable only if the provider is actually detected on this machine.
-                  const detected = providers.find(p => p.name === providerType) ?? null;
-                  const isSelectable = Boolean(detected && onSelectProvider);
-
-                  const inner = (
-                    <>
-                      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-background/70 text-muted-foreground">
-                        <Icon className="h-[18px] w-[18px]" />
-                      </div>
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">{meta.label}</div>
-                        {isSelected ? (
-                          <div className="text-[10px] uppercase tracking-wide text-primary">selected</div>
-                        ) : !detected ? (
-                          <div className="text-[10px] text-muted-foreground/60">not installed</div>
-                        ) : null}
-                      </div>
-                    </>
-                  );
-
-                  if (!isSelectable) {
-                    return (
-                      <div
-                        key={providerType}
-                        className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 ${
-                          isSelected
-                            ? 'border-primary bg-primary/5'
-                            : 'border-border bg-muted/35 opacity-60'
-                        }`}
-                      >
-                        {inner}
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <button
-                      key={providerType}
-                      type="button"
-                      onClick={() => onSelectProvider?.(detected!.id)}
-                      aria-pressed={isSelected}
-                      className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 text-left transition-colors ${
-                        isSelected
-                          ? 'border-primary bg-primary/5'
-                          : 'border-border bg-muted/35 hover:border-muted-foreground/30 hover:bg-muted/60'
-                      }`}
-                    >
-                      {inner}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          <div className="grid gap-2 sm:grid-cols-2">
-            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
-              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
-              <div className="flex-1">
-                <div className="text-sm font-medium">Ask from comments</div>
-                <div className="text-xs text-muted-foreground">
-                  Use Ask AI from a comment popover to chat about selected text.
-                </div>
-              </div>
-            </div>
-            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
-              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
-              <div className="flex-1">
-                <div className="text-sm font-medium">Open the side chat</div>
-                <div className="text-xs text-muted-foreground">
-                  Use the AI button in the header for broader document questions.
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {unsupportedLabels && (
-            <p className="text-[11px] leading-relaxed text-muted-foreground/70">
-              Not supported for Ask AI yet: {unsupportedLabels}.
-            </p>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="p-4 border-t border-border flex justify-between items-center gap-3">
-          <p className="text-xs text-muted-foreground">
-            This notice only appears once.
-          </p>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onDismiss}
-              className="px-4 py-2 border border-border rounded-lg text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-            >
-              Dismiss
-            </button>
-            <button
-              onClick={onOpenAI}
-              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-            >
-              Open AI Chat
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-};