react-os-shell 0.6.4 → 0.6.7

package/dist/index.d.ts

@@ -298,6 +298,57 @@ declare function GlobalSearch({ providers, typeIcons, placeholder }?: GlobalSear
 
 declare function ShortcutHelp(): react_jsx_runtime.JSX.Element;
 
+/**
+ * One help article. Generic shape — the consuming portal maps its own
+ * help-doc records onto this before passing them in.
+ */
+interface HelpCenterDoc {
+    id: string;
+    slug: string;
+    title: string;
+    body: string;
+    /** Grouping key (e.g. `'getting_started'`). */
+    category: string;
+    /** Group header text (e.g. "Getting Started"). */
+    category_label: string;
+    /** When `false`, a "Draft" badge is shown. Omit for always-published docs. */
+    is_published?: boolean;
+}
+interface HelpCenterProps {
+    docs: HelpCenterDoc[];
+    loading?: boolean;
+    /**
+     * Category keys in display order. Categories not listed fall to the end in
+     * first-seen order. Without it, groups follow first-seen order.
+     */
+    categoryOrder?: string[];
+    /** Show the New/Edit affordances (consumer gates this on write permission). */
+    canEdit?: boolean;
+    onNew?: () => void;
+    onEdit?: (doc: HelpCenterDoc) => void;
+    /** Custom body renderer; defaults to preformatted text. */
+    renderBody?: (doc: HelpCenterDoc) => ReactNode;
+    emptyMessage?: string;
+}
+/**
+ * In-app help / documentation viewer. Two panes: a searchable, collapsible
+ * category tree on the left, the selected article's body on the right.
+ *
+ * Presentational only — it holds no API or permission knowledge. The consumer
+ * fetches its own help docs, maps them to `HelpCenterDoc`, and (for editors)
+ * wires `canEdit` + `onNew`/`onEdit` to its own create/edit UI.
+ *
+ * Search is client-side: a case-insensitive substring match over title, body
+ * and category label. While searching, matching groups auto-expand.
+ */
+declare function HelpCenter({ docs, loading, categoryOrder, canEdit, onNew, onEdit, renderBody, emptyMessage, }: HelpCenterProps): react_jsx_runtime.JSX.Element;
+
+interface MarkdownProps {
+    children: string;
+    className?: string;
+}
+declare function Markdown({ children, className }: MarkdownProps): react_jsx_runtime.JSX.Element;
+
 declare const isMac: boolean;
 /** Platform-aware modifier symbols */
 declare const MOD: string;
@@ -1217,4 +1268,4 @@ declare function useNewHotkey(callback: () => void): void;
  */
 declare function useEditHotkey(callback: (() => void) | null): void;
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, Desktop, type DesktopHostConfig, DesktopHostProvider, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, Layout, type LayoutProps, ListFooter, type LoginPayload, MOD, type MailCapabilities, MailConnectModal, type MailUser, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, VERSION, WindowManagerProvider, WindowRegistry, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, glassStyle, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellMailServer, setShellNavIcons, setWindowDefaultPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useMailAuth, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, Desktop, type DesktopHostConfig, DesktopHostProvider, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, HelpCenter, type HelpCenterDoc, type HelpCenterProps, Layout, type LayoutProps, ListFooter, type LoginPayload, MOD, type MailCapabilities, MailConnectModal, type MailUser, Markdown, type MarkdownProps, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, VERSION, WindowManagerProvider, WindowRegistry, WindowTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, glassStyle, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellMailServer, setShellNavIcons, setWindowDefaultPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useMailAuth, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };

package/dist/index.js

@@ -21,7 +21,7 @@ import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
 export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-ZF6AYO4G.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-ZF6AYO4G.js';
-import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useMemo, useSyncExternalStore } from 'react';
+import { createContext, lazy, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { createPortal } from 'react-dom';
@@ -256,6 +256,312 @@ function ShortcutHelp() {
     ] }) })
   ] });
 }
+var INLINE_RE = /!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*/g;
+function renderInline(text) {
+  const out = [];
+  let last = 0;
+  let key = 0;
+  let m;
+  INLINE_RE.lastIndex = 0;
+  while ((m = INLINE_RE.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    if (m[1] !== void 0) {
+      out.push(
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+          "[",
+          m[1],
+          "]"
+        ] }, key++)
+      );
+    } else if (m[3] !== void 0) {
+      out.push(
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: m[4],
+            target: "_blank",
+            rel: "noreferrer",
+            className: "text-blue-600 hover:underline",
+            children: m[3]
+          },
+          key++
+        )
+      );
+    } else if (m[5] !== void 0) {
+      out.push(
+        /* @__PURE__ */ jsx("strong", { className: "font-semibold text-gray-900", children: m[5] }, key++)
+      );
+    } else if (m[6] !== void 0) {
+      out.push(
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "rounded bg-gray-100 px-1 py-0.5 font-mono text-[0.85em] text-gray-800",
+            children: m[6]
+          },
+          key++
+        )
+      );
+    } else if (m[7] !== void 0) {
+      out.push(/* @__PURE__ */ jsx("em", { children: m[7] }, key++));
+    }
+    last = INLINE_RE.lastIndex;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+function ScreenshotPlaceholder({ alt }) {
+  const label = alt.replace(/^screenshot:\s*/i, "");
+  return /* @__PURE__ */ jsxs("div", { className: "my-1 flex items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "mt-0.5 h-4 w-4 shrink-0 text-gray-400",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("path", { d: "M3 6a1.5 1.5 0 0 1 1.5-1.5h1.1l.4-.9a1 1 0 0 1 .9-.6h6.2a1 1 0 0 1 .9.6l.4.9h1.1A1.5 1.5 0 0 1 18 6v8.5A1.5 1.5 0 0 1 16.5 16h-13A1.5 1.5 0 0 1 2 14.5V6Zm7.5 1.5a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "Screenshot \u2014 " }),
+      label
+    ] })
+  ] });
+}
+function collectItems(lines, itemRe) {
+  const items = [];
+  for (const line of lines) {
+    const m = itemRe.exec(line);
+    if (m) {
+      items.push(m[1]);
+    } else if (items.length) {
+      items[items.length - 1] += " " + line.trim();
+    }
+  }
+  return items;
+}
+var splitCells = (line) => line.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").map((c) => c.trim());
+function isTable(lines) {
+  return lines.length >= 2 && lines[0].includes("|") && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(lines[1]) && lines[1].includes("-");
+}
+function renderTable(lines, key) {
+  const header = splitCells(lines[0]);
+  const rows = lines.slice(2).map(splitCells);
+  return /* @__PURE__ */ jsx("div", { className: "my-1 overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-gray-50", children: header.map((h, i) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: "border-b border-gray-200 px-3 py-1.5 text-left font-semibold text-gray-700",
+        children: renderInline(h)
+      },
+      i
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsx("tr", { className: "even:bg-gray-50/50", children: row.map((c, i) => /* @__PURE__ */ jsx("td", { className: "border-t border-gray-100 px-3 py-1.5 align-top text-gray-700", children: renderInline(c) }, i)) }, r)) })
+  ] }) }, key);
+}
+function renderBlock(block, key) {
+  const lines = block.split("\n");
+  const first = lines[0];
+  const heading = /^(#{2,4})\s+(.*)$/.exec(first);
+  if (heading && lines.length === 1) {
+    const level = heading[1].length;
+    const Tag = `h${level}`;
+    const cls = level === 2 ? "mt-2 text-[13px] font-semibold uppercase tracking-wide text-gray-500" : level === 3 ? "mt-1 text-base font-semibold text-gray-900" : "mt-1 text-sm font-semibold text-gray-900";
+    return /* @__PURE__ */ jsx(Tag, { className: cls, children: renderInline(heading[2]) }, key);
+  }
+  if (lines.length === 1 && /^---+$/.test(first)) {
+    return /* @__PURE__ */ jsx("hr", { className: "border-gray-200" }, key);
+  }
+  if (isTable(lines)) {
+    return renderTable(lines, key);
+  }
+  if (/^>\s?/.test(first)) {
+    const text = lines.map((l) => l.replace(/^>\s?/, "")).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "my-1 rounded-r-lg border-l-4 border-blue-300 bg-blue-50/60 px-3 py-2 text-gray-700",
+        children: renderInline(text)
+      },
+      key
+    );
+  }
+  const img = /^!\[([^\]]*)\]\(([^)]+)\)$/.exec(first);
+  if (img && lines.length === 1) {
+    return /* @__PURE__ */ jsx(ScreenshotPlaceholder, { alt: img[1] }, key);
+  }
+  if (/^[-*]\s+/.test(first)) {
+    const items = collectItems(lines, /^[-*]\s+(.*)$/);
+    return /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-1 pl-5 marker:text-gray-400", children: items.map((it, j) => /* @__PURE__ */ jsx("li", { children: renderInline(it) }, j)) }, key);
+  }
+  const ordered = /^(\d+)\.\s+/.exec(first);
+  if (ordered) {
+    const items = collectItems(lines, /^\d+\.\s+(.*)$/);
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        start: Number(ordered[1]),
+        className: "list-decimal space-y-1 pl-5 marker:text-gray-400",
+        children: items.map((it, j) => /* @__PURE__ */ jsx("li", { className: "pl-1", children: renderInline(it) }, j))
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx("p", { children: renderInline(lines.join(" ")) }, key);
+}
+function Markdown({ children, className }) {
+  const blocks = (children ?? "").replace(/\r\n/g, "\n").split(/\n{2,}/).map((b) => b.replace(/\s+$/, "")).filter((b) => b.trim() !== "");
+  return /* @__PURE__ */ jsx("div", { className: `space-y-3 text-sm leading-relaxed text-gray-700 ${className ?? ""}`.trim(), children: blocks.map((block, i) => renderBlock(block, i)) });
+}
+var Chevron = ({ open }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: `h-3.5 w-3.5 shrink-0 text-gray-400 transition-transform ${open ? "rotate-90" : ""}`,
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+function HelpCenter({
+  docs,
+  loading = false,
+  categoryOrder,
+  canEdit = false,
+  onNew,
+  onEdit,
+  renderBody,
+  emptyMessage = "No help articles yet."
+}) {
+  const [query, setQuery] = useState("");
+  const [selectedSlug, setSelectedSlug] = useState(null);
+  const [expanded, setExpanded] = useState({});
+  const q = query.trim().toLowerCase();
+  const groups = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const doc of docs) {
+      let g = map.get(doc.category);
+      if (!g) {
+        g = { key: doc.category, label: doc.category_label || doc.category, docs: [] };
+        map.set(doc.category, g);
+      }
+      g.docs.push(doc);
+    }
+    if (!categoryOrder?.length) return [...map.values()];
+    const rank = new Map(categoryOrder.map((k, i) => [k, i]));
+    return [...map.values()].sort(
+      (a, b) => (rank.get(a.key) ?? Infinity) - (rank.get(b.key) ?? Infinity)
+    );
+  }, [docs, categoryOrder]);
+  const matches = (doc) => !q || doc.title.toLowerCase().includes(q) || doc.body.toLowerCase().includes(q) || doc.category_label.toLowerCase().includes(q);
+  const visibleGroups = useMemo(
+    () => groups.map((g) => ({ ...g, docs: g.docs.filter(matches) })).filter((g) => g.docs.length > 0),
+    [groups, q]
+  );
+  const visibleDocs = useMemo(() => visibleGroups.flatMap((g) => g.docs), [visibleGroups]);
+  const selected = (selectedSlug ? visibleDocs.find((d) => d.slug === selectedSlug) : void 0) ?? visibleDocs[0] ?? null;
+  const isGroupOpen = (key) => q ? true : expanded[key] ?? key === selected?.category;
+  const toggleGroup = (key) => setExpanded((prev) => ({ ...prev, [key]: !isGroupOpen(key) }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full gap-4 px-4 py-3 min-h-0", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "w-64 shrink-0 flex flex-col bg-white rounded-lg shadow overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-900", children: "Help" }),
+        canEdit && onNew && /* @__PURE__ */ jsx("button", { type: "button", onClick: onNew, className: "text-xs text-blue-600 hover:underline", children: "+ New" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 border-b border-gray-100 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400",
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M9 3.5a5.5 5.5 0 1 0 3.36 9.85l3.14 3.15a.75.75 0 1 0 1.06-1.06l-3.15-3.14A5.5 5.5 0 0 0 9 3.5ZM5 9a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "Search help\u2026",
+            className: "w-full rounded-md border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: loading ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-400", children: "Loading\u2026" }) : visibleGroups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-gray-500", children: q ? "No articles match your search." : emptyMessage }) : visibleGroups.map((group) => {
+        const open = isGroupOpen(group.key);
+        return /* @__PURE__ */ jsxs("div", { className: "py-0.5", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleGroup(group.key),
+              className: "w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[10px] font-semibold uppercase tracking-wide text-gray-400 hover:text-gray-600",
+              children: [
+                /* @__PURE__ */ jsx(Chevron, { open }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label })
+              ]
+            }
+          ),
+          open && group.docs.map((doc) => {
+            const active = selected?.slug === doc.slug;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSelectedSlug(doc.slug),
+                className: `w-full text-left pl-8 pr-3 py-1.5 text-sm flex items-center gap-1.5 transition-colors ${active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: doc.title }),
+                  doc.is_published === false && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] text-amber-600", children: "Draft" })
+                ]
+              },
+              doc.slug
+            );
+          })
+        ] }, group.key);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 min-w-0 bg-white rounded-lg shadow overflow-hidden flex flex-col", children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-5 py-3 border-b border-gray-200 bg-gray-50 shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900 truncate", children: selected.title }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-0.5", children: [
+            selected.category_label,
+            selected.is_published === false && /* @__PURE__ */ jsx("span", { className: "ml-2 text-amber-600", children: "\xB7 Draft" })
+          ] })
+        ] }),
+        canEdit && onEdit && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onEdit(selected),
+            className: "shrink-0 text-sm text-blue-600 hover:underline",
+            children: "Edit"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-5 py-4", children: renderBody ? renderBody(selected) : selected.body ? /* @__PURE__ */ jsx(Markdown, { children: selected.body }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 italic", children: "This article has no body yet." }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
+  ] });
+}
 function timeAgo(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
   const mins = Math.floor(diff / 6e4);
@@ -915,7 +1221,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.6.4" ;
+var VERSION = "0.6.7" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6123,6 +6429,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, Layout, ListFooter, MOD, MailConnectModal, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, Desktop, DesktopHostProvider, ENTER, EntityList, GlobalSearch, HelpCenter, Layout, ListFooter, MOD, MailConnectModal, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, VERSION, createWindowRegistry, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map