Add handling for limitation, deferred, and follow-on items

Author: MikeRomaa

src/StoreProvider.tsx

@@ -1,16 +1,8 @@
 import { type Dispatch, type ReactNode, useCallback, useEffect, useReducer, useRef, useState } from "react";
 
+import { migrateAppState } from "./migrations";
 import { loadPersisted, savePersisted } from "./persistence";
-import {
-    type Action,
-    type AppState,
-    DispatchContext,
-    init,
-    reducer,
-    type SaveStatus,
-    StateContext,
-    StatusContext,
-} from "./state";
+import { type Action, DispatchContext, init, reducer, type SaveStatus, StateContext, StatusContext } from "./state";
 
 export function StoreProvider({ children }: { children: ReactNode }) {
     const [state, dispatch] = useReducer(reducer, undefined, init);
@@ -24,13 +16,16 @@ export function StoreProvider({ children }: { children: ReactNode }) {
         dispatch(action);
     }, []);
 
-    // Hydrate from IndexedDB once on mount.
+    // Hydrate from IndexedDB once on mount. The persisted value isn't schema-
+    // validated, so it's run through migrateAppState to normalize older shapes
+    // (e.g. pre-sections data) instead of discarding them.
     useEffect(() => {
         let cancelled = false;
-        loadPersisted<AppState>().then((saved) => {
+        loadPersisted<unknown>().then((saved) => {
             if (cancelled) return;
-            if (saved && Array.isArray(saved.databases)) {
-                dispatch({ type: "hydrate", state: saved });
+            const migrated = saved ? migrateAppState(saved) : null;
+            if (migrated) {
+                dispatch({ type: "hydrate", state: migrated });
             }
             loaded.current = true;
         });

src/checklist.ts

@@ -6,14 +6,21 @@ export interface ActionItem {
     challenge: string;
     response?: string;
     extension?: string;
+    /** Flags this action as a limitation. */
+    limitation?: boolean;
+    /** Id of another checklist this item defers to. */
+    defer?: string;
+    /** Id of another checklist to follow on to after this item. */
+    followOn?: string;
 }
 
 export interface SensedItem {
     type: "sensed";
     id: string;
     challenge: string;
     response?: string;
-    sensed: string;
+    /** Numeric ECL_VARIABLE index (see lib/vars.ts), not the variable name. */
+    sensed?: number;
     inverted?: boolean;
     latchable?: boolean;
 }
@@ -50,37 +57,47 @@ export type ChecklistItem = ActionItem | SensedItem | ConditionalItem | MultiSel
 
 export type ItemType = ChecklistItem["type"];
 
-export type Category = "normal" | "non-normal" | "procedure";
+export type Category = "normal" | "non_normal" | "procedure";
 
-export interface SectionHeader {
-    kind: "header";
-    id: string;
-    name: string;
-}
+export type Phase = "pre-flight" | "in-flight" | "post-flight";
 
 export interface Checklist {
     kind?: "checklist";
     id: string;
     name: string;
-    category: Category;
     items: ChecklistItem[];
+    /** Non-normal only. */
     cas?: CasMessage;
+    /** Normal only. */
+    phase?: Phase;
 }
 
-export type CategoryEntry = Checklist | SectionHeader;
-
-export interface ChecklistDatabase {
+/** A named group of checklists shown together in the sidebar (non_normal, by system; procedure, by phase/task). */
+export interface Section {
+    kind: "section";
     id: string;
     name: string;
-    categories: Record<Category, CategoryEntry[]>;
+    checklists: Checklist[];
 }
 
-export function isHeader(entry: CategoryEntry): entry is SectionHeader {
-    return (entry as SectionHeader).kind === "header";
+export interface ChecklistDatabase {
+    id: string;
+    name: string;
+    categories: {
+        normal: Checklist[];
+        non_normal: Section[];
+        procedure: Section[];
+    };
 }
 
 export const CATEGORY_LABELS: Record<Category, string> = {
     normal: "Normal",
-    "non-normal": "Non-Normal",
+    non_normal: "Non-Normal",
     procedure: "Procedure",
 };
+
+export const PHASE_LABELS: Record<Phase, string> = {
+    "pre-flight": "Pre-Flight",
+    "in-flight": "In-Flight",
+    "post-flight": "Post-Flight",
+};

src/components/TopBar.css

@@ -33,6 +33,10 @@
 }
 .topbar .file {
     color: var(--fg-2);
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 .topbar .file .slash {
     color: var(--fg-4);
@@ -63,6 +67,41 @@
     opacity: 0.4;
     pointer-events: none;
 }
+.export-ctl {
+    position: relative;
+}
+.export-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 160px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--bd-2);
+    border-radius: 6px;
+    background: var(--bg-2);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    z-index: 10;
+}
+.export-menu button {
+    display: flex;
+    justify-content: flex-start;
+    white-space: nowrap;
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    color: var(--fg-2);
+}
+.export-menu button:hover {
+    background: var(--bg-3);
+    color: var(--fg-1);
+}
+.export-menu button:disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}
 .topbar .pill {
     display: inline-flex;
     align-items: center;

src/components/TopBar.tsx

@@ -1,40 +1,54 @@
+import { useEffect, useRef, useState } from "react";
 import "./TopBar.css";
 
-import { CATEGORY_LABELS, isHeader } from "../checklist";
+import { CATEGORY_LABELS } from "../checklist";
 import { Icon } from "../icons";
-import { serializeChecklist } from "../schemas";
+import { nameResolverFor, serializeChecklist, serializePackage } from "../schemas";
 import { useSaveStatus, useSelectedChecklist } from "../state";
 
-function sectionFor(db: ReturnType<typeof useSelectedChecklist>["db"], checklistId: string): string | null {
-    if (!db) return null;
-    for (const cat of Object.values(db.categories)) {
-        let section: string | null = null;
-        for (const entry of cat) {
-            if (isHeader(entry)) {
-                section = entry.name;
-            } else if (entry.id === checklistId) {
-                return section;
-            }
-        }
-    }
-    return null;
+function downloadBlob(text: string, filename: string) {
+    const blob = new Blob([text], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
 }
 
 export function TopBar() {
-    const { checklist, db } = useSelectedChecklist();
+    const { checklist, db, category, section } = useSelectedChecklist();
     const status = useSaveStatus();
+    const [exportOpen, setExportOpen] = useState(false);
+    const exportMenuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!exportOpen) return;
+        function onDown(e: PointerEvent) {
+            if (exportMenuRef.current && !exportMenuRef.current.contains(e.target as Node)) setExportOpen(false);
+        }
+        function onKey(e: KeyboardEvent) {
+            if (e.key === "Escape") setExportOpen(false);
+        }
+        window.addEventListener("pointerdown", onDown);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("pointerdown", onDown);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [exportOpen]);
 
-    const section = checklist ? sectionFor(db, checklist.id) : null;
+    function handleExportPackage() {
+        if (!db) return;
+        downloadBlob(serializePackage(db), `${db.name.replace(/\s+/g, "_").toLowerCase()}.json`);
+    }
 
-    function handleExport() {
-        if (!checklist) return;
-        const blob = new Blob([serializeChecklist(checklist)], { type: "application/json" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `${checklist.name.replace(/\s+/g, "_").toLowerCase()}.json`;
-        a.click();
-        URL.revokeObjectURL(url);
+    function handleExportChecklist() {
+        if (!checklist || !db) return;
+        downloadBlob(
+            serializeChecklist(checklist, nameResolverFor(db)),
+            `${checklist.name.replace(/\s+/g, "_").toLowerCase()}.json`,
+        );
     }
 
     return (
@@ -47,14 +61,14 @@ export function TopBar() {
             <span className="sep" />
             <span className="file mono">
                 <span>{db ? db.name : "—"}</span>
-                {checklist && (
+                {checklist && category && (
                     <>
                         <span className="slash">/</span>
-                        <span>{CATEGORY_LABELS[checklist.category]}</span>
+                        <span>{CATEGORY_LABELS[category]}</span>
                         {section && (
                             <>
                                 <span className="slash">/</span>
-                                <span>{section}</span>
+                                <span>{section.name}</span>
                             </>
                         )}
                         <span className="slash">/</span>
@@ -67,10 +81,33 @@ export function TopBar() {
                 {status === "saving" ? "saving changes" : "changes automatically saved"}
             </span>
             <div className="spacer" />
-            <button className="btn-export" onClick={handleExport} disabled={!checklist}>
-                <Icon name="download" size={11} />
-                Export
-            </button>
+            <div className={`export-ctl${exportOpen ? " open" : ""}`} ref={exportMenuRef}>
+                <button className="btn-export" onClick={() => setExportOpen((o) => !o)} disabled={!db}>
+                    <Icon name="download" size={11} />
+                    Export
+                </button>
+                {exportOpen && (
+                    <div className="export-menu mono">
+                        <button
+                            onClick={() => {
+                                setExportOpen(false);
+                                handleExportPackage();
+                            }}
+                        >
+                            Export package…
+                        </button>
+                        <button
+                            disabled={!checklist}
+                            onClick={() => {
+                                setExportOpen(false);
+                                handleExportChecklist();
+                            }}
+                        >
+                            Export checklist…
+                        </button>
+                    </div>
+                )}
+            </div>
         </header>
     );
 }

src/components/common/CasCombobox.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { CAS_MESSAGE_OPTIONS, casMessageLabel, MESSAGE_LEVEL_COLOR } from "../../lib/cas";
-import type { CasMessage } from "../../lib/cas";
 import { Icon } from "../../icons";
+import type { CasMessage } from "../../lib/cas";
+import { CAS_MESSAGE_OPTIONS, casMessageLabel, MESSAGE_LEVEL_COLOR } from "../../lib/cas";
 import "./Combobox.css";
 
 interface Props {
@@ -27,9 +27,7 @@ export function CasCombobox({ value, onChange, placeholder = "select CAS message
     const listRef = useRef<HTMLUListElement>(null);
 
     const q = query.trim().toLowerCase();
-    const filtered = q
-        ? CAS_MESSAGE_OPTIONS.filter((o) => o.label.toLowerCase().includes(q))
-        : CAS_MESSAGE_OPTIONS;
+    const filtered = q ? CAS_MESSAGE_OPTIONS.filter((o) => o.label.toLowerCase().includes(q)) : CAS_MESSAGE_OPTIONS;
 
     function place() {
         const el = wrapRef.current;
@@ -96,7 +94,10 @@ export function CasCombobox({ value, onChange, placeholder = "select CAS message
     }
 
     const currentLabel = value !== undefined ? casMessageLabel(value) : "";
-    const currentColor = value !== undefined ? MESSAGE_LEVEL_COLOR[CAS_MESSAGE_OPTIONS.find((o) => o.message === value)!.level] : undefined;
+    const currentColor =
+        value !== undefined
+            ? MESSAGE_LEVEL_COLOR[CAS_MESSAGE_OPTIONS.find((o) => o.message === value)!.level]
+            : undefined;
 
     return (
         <div className="cbx" ref={wrapRef}>

src/components/common/EditableText.css

@@ -45,3 +45,40 @@
     flex: 1;
     width: 100%;
 }
+
+/* width-constrained field with explicit-only line breaks (Shift+Enter) — each
+   line stays put and is clipped rather than wrapping to fill the width */
+.edit.pre {
+    display: block;
+    width: 100%;
+    white-space: pre;
+    overflow: hidden;
+    resize: none;
+    line-height: 1.5;
+}
+
+/* clamped read-only preview (multiline fields with clampLines) — shows up to
+   N explicit lines, each individually ellipsized if it overflows the width;
+   swaps to the real textarea when clicked/focused */
+.edit-clamp {
+    border: 1px solid transparent;
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin: -1px -4px;
+    font: inherit;
+    line-height: 1.5;
+    color: inherit;
+    cursor: text;
+}
+.edit-clamp:hover {
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: 0 0 0 1px var(--bd-2);
+}
+.edit-clamp-line {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.edit-clamp .edit-ph {
+    color: var(--fg-4);
+}