@checkstack/notification-frontend 0.4.7 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # @checkstack/notification-frontend
 
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies [13373ce]
+  - @checkstack/common@0.14.0
+  - @checkstack/auth-frontend@0.7.1
+  - @checkstack/frontend-api@0.7.1
+  - @checkstack/notification-common@1.3.1
+  - @checkstack/tips-frontend@0.3.1
+  - @checkstack/ui@1.13.1
+  - @checkstack/signal-frontend@0.2.1
+
+## 0.5.0
+
+### Minor Changes
+
+- 9dcc848: Cut initial-load JS: lazy plugin contributions, a hardened lazy-by-default contribution contract, on-demand Monaco, and a lighter icon/chart load.
+
+  - Lazy plugin route pages: each plugin's route `element` references a `React.lazy`-wrapped page rendered inside a shared `<Suspense>` boundary. Plugins still register synchronously, so nav, slots, commands, API factories, and `foreignSignals` are available on first paint. This moves ~37 route-page chunks (~600 KB) out of the entry; the entry chunk drops from ~2.4 MB to ~190 KB. Auth flow pages stay eager. The `@checkstack/scripts` scaffold template generates lazy route pages too.
+  - Hardened contribution contract (BREAKING, frontend plugin contract): plugins declare contributions lazily and let the framework own code-splitting, Suspense, and per-plugin error isolation. Routes use `load: () => import("./Page").then((m) => ({ default: m.Page }))` instead of `element: <Page />` (`element` is still accepted for the rare page that must paint without a chunk fetch; provide exactly one). Slot extensions accept either an eager `component` or a lazy `load`; new `getLazyContribution` + `ExtensionComponent` exports from `@checkstack/frontend-api` render either kind. This also fixes runtime-installed plugins: `ExtensionSlot` subscribes to the plugin registry, and the API registry rebuilds when the plugin set changes (`getPlugins()` returns an immutable snapshot via `useSyncExternalStore`). A per-plugin error boundary contains a bad contribution.
+  - On-demand Monaco: the `@checkstack/ui` barrel no longer pulls the `@codingame/*` / `monaco-languageclient` stack into the initial load. `CodeEditor` lazy-loads its Monaco-backed editor behind `React.lazy` + Suspense, `validateTypeScriptSources` imports the editor API via in-body `await import(...)`, and the "vscode services ready" signal moved to a Monaco-free module. The ~10 MB editor body loads only when a `CodeEditor` mounts. A `react-vendor` `manualChunks` split was added for stable vendor caching.
+  - lucide-react 1.x + lighter icons/charts (BREAKING for icon consumers): lucide-react unified from three drifting ranges to `^1.17.0`. lucide v1 removed brand icons, so the GitHub/GitLab marks are vendored in `@checkstack/ui` (`GithubIcon`, `GitlabIcon`, `brandIcons`); a new `IconName` type (`LucideIconName | BrandIconName`) in `@checkstack/common` is canonical, accepted by `AuthStrategy.icon` and the card components, so data-driven brand names keep working. `DynamicIcon` no longer eagerly imports lucide's ~1600-icon map (~1 MB) - it lives in a `React.lazy` `iconRegistry` chunk fetched on first data-driven render, while statically named-imported icons tree-shake normally. The recharts-backed health-check charts (~300 KB) and the `HealthCheckSystemOverview` drawer leave the initial load.
+
+  BREAKING CHANGES:
+
+  - Frontend plugin contract: routes/slot contributions are lazy-by-default (`load` instead of `element`/eager elements) as described above.
+  - Any external consumer importing a brand icon from `lucide-react` (e.g. `import { Github } from "lucide-react"`) must switch to the vendored `@checkstack/ui` brand icons or a custom SVG.
+
+  This is a beta minor.
+
+- 9dcc848: Align workspace dependency versions and migrate React Router to v7.
+
+  BREAKING CHANGES (React Router v7): All frontend packages now depend on `react-router-dom@^7.16.0`. Previously the workspace declared four divergent ranges (`^6.20.0`, `^6.22.0`, `^7.1.1`, `^7.14.2`), which resolved both `react-router@6` and `react-router@7` into a single bundle. Everything is now unified on v7. The public imports the app uses (`BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`, `MemoryRouter`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`) are unchanged between v6 and v7, so no source rewrites were required - but any out-of-tree plugin still on react-router v6 should upgrade to v7 (see the React Router v6 -> v7 upgrade guide) to share the host's single router instance via the import map.
+
+  Other unified ranges (no API change): `react` -> `^18.3.1`, the `@orpc/*` family (`contract`, `server`, `client`, `tanstack-query`, `openapi`, `zod`) -> `^1.14.4`, and `better-auth` -> `^1.6.13`.
+
+  Removed the pre-rename `@orpc/react-query` leftover from `@checkstack/frontend-api`; its `createRouterUtils` / `RouterUtils` / `ProcedureUtils` now come from `@orpc/tanstack-query` (the package already in use).
+
+  Stale in-range runtime deps pulled up to current published versions: `hono` `^4.12.23`, `@tanstack/react-query` (+devtools) `^5.100.14`, `date-fns` `^4.4.0`, `jose` `^6.2.3`, `tar` `^7.5.16`, `semver` `^7.8.1`, `@xyflow/react` `^12.11.0`.
+
+### Patch Changes
+
+- 9dcc848: Move primary navigation into a left sidebar, and serve the user guide in-app.
+
+  Feature navigation (a ~20-item user-menu dropdown) now lives in a persistent left sidebar (a slide-over drawer on mobile), grouped by section with the active route highlighted; the user menu keeps only account actions. A route opts into the sidebar with new `nav` metadata (`{ group, icon, label?, order?, accessRule? }`) on its registration, co-located with path + access + title. The sidebar filters entries with the same access check as page guards. `@checkstack/common` gains `isAccessRuleSatisfied` and a centralized set of in-app doc slugs (`APP_DOC_SLUGS` + `docsPath`, with a test asserting each resolves to a real docs page); `@checkstack/auth-frontend` exports `useAccessRules`.
+
+  The backend now serves the Astro Starlight docs build same-origin at `/checkstack/*` (the same artifact deployed to GitHub Pages), so the user guide is available inside the app including for self-hosted / air-gapped installs (served verbatim, no rebuild, no link rewriting; from `CHECKSTACK_DOCS_DIST`, before the SPA catch-all, degrading gracefully when absent; the Docker image builds and ships `docs/dist`; Vite proxies `/checkstack` in dev). The "Docs" link is a shell-owned external sidebar entry under the Documentation group (book icon), opening `/checkstack/user-guide/` in a new tab; the group renders even when no plugin route contributes to it.
+
+  BREAKING (plugin authors): `UserMenuItemsSlot` is no longer the way to add navigation - registering a top user-menu item no longer surfaces it anywhere. Add `nav` to the page's route instead. `UserMenuItemsBottomSlot` (account items) is unchanged. All bundled plugins have been migrated.
+
+  This is a beta minor.
+
+- 9dcc848: Guard component animations behind isLowPower, and add a shared inline Spinner.
+
+  - `@checkstack/ui` shared components (`Tabs`, `ConfirmationModal`, `Accordion`, `CodeEditor` popout-button backdrop blur) now drop their `animate-*` / `backdrop-blur` classes when the device reports the low-power tier, matching `LoadingSpinner` / `Skeleton`. No public API change; normal-power rendering is unchanged.
+  - A new shared inline `Spinner` (`@checkstack/ui`) renders a lucide `Loader2` whose `animate-spin` is gated internally behind `usePerformance().isLowPower`, so call sites inherit the low-power guard. Props: `size` (`sm`/`md`/`lg`), `className`, rest spread to the icon; decorative by default (`aria-hidden`), `role="status"` when given `aria-label`. The hand-rolled `Loader2` button/table spinners in `HealthCheckDrawer`, `HealthCheckRunsTable`, `IncidentEditor`, `IncidentUpdateForm`, `ProviderConnectionsPage`, `MaintenanceEditor`, `MaintenanceUpdateForm`, `UserChannelCard`, and `DynamicOptionsField` are migrated onto it.
+  - Remaining unguarded `animate-*` / `animate-in` / blur classes across the auth, gitops, healthcheck, incident, integration, maintenance, and notification frontends are gated behind `usePerformance().isLowPower`, so effects degrade gracefully on low-power devices per the performance rule.
+
+  Normal-power behavior is unchanged; low-power rendering drops the animations.
+
+  This is a beta minor.
+
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+  - @checkstack/ui@1.13.0
+  - @checkstack/auth-frontend@0.7.0
+  - @checkstack/notification-common@1.3.0
+  - @checkstack/common@0.13.0
+  - @checkstack/frontend-api@0.7.0
+  - @checkstack/tips-frontend@0.3.0
+  - @checkstack/signal-frontend@0.2.0
+
 ## 0.4.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.4.7",
+  "version": "0.5.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,21 +13,21 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.6.6",
-    "@checkstack/common": "0.12.0",
-    "@checkstack/frontend-api": "0.6.0",
-    "@checkstack/notification-common": "1.2.1",
-    "@checkstack/signal-frontend": "0.1.5",
-    "@checkstack/tips-frontend": "0.2.6",
-    "@checkstack/ui": "1.11.0",
-    "lucide-react": "^0.344.0",
-    "react": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "@checkstack/auth-frontend": "0.7.0",
+    "@checkstack/common": "0.13.0",
+    "@checkstack/frontend-api": "0.7.0",
+    "@checkstack/notification-common": "1.3.0",
+    "@checkstack/signal-frontend": "0.2.0",
+    "@checkstack/tips-frontend": "0.3.0",
+    "@checkstack/ui": "1.13.0",
+    "lucide-react": "^1.17.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.16.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.3.4"
+    "@checkstack/scripts": "0.4.0"
   }
 }

package/src/components/UserChannelCard.tsx

@@ -4,7 +4,6 @@ import {
   Link2Off,
   Check,
   X,
-  Loader2,
   ChevronDown,
   ChevronUp,
   Send,
@@ -17,6 +16,7 @@ import {
   cn,
   DynamicIcon,
   MarkdownBlock,
+  Spinner,
   type LucideIconName,
 } from "@checkstack/ui";
 
@@ -191,7 +191,7 @@ export function UserChannelCard({
                 className="text-destructive hover:text-destructive"
               >
                 {connecting ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Spinner size="sm" />
                 ) : (
                   <Link2Off className="h-4 w-4 mr-1" />
                 )}
@@ -205,7 +205,7 @@ export function UserChannelCard({
                 disabled={saving || connecting}
               >
                 {connecting ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Spinner size="sm" />
                 ) : (
                   <Link2 className="h-4 w-4 mr-1" />
                 )}
@@ -246,7 +246,7 @@ export function UserChannelCard({
               title="Send test notification"
             >
               {testing ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Spinner size="sm" />
               ) : (
                 <Send className="h-4 w-4" />
               )}

package/src/index.tsx

@@ -1,18 +1,13 @@
 import {
   createFrontendPlugin,
-  createSlotExtension,
   NavbarRightSlot,
-  UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
 import {
   notificationRoutes,
   pluginMetadata,
 } from "@checkstack/notification-common";
+import { Bell } from "lucide-react";
 import { NotificationBell } from "./components/NotificationBell";
-import { NotificationsPage } from "./pages/NotificationsPage";
-import { NotificationSettingsPage } from "./pages/NotificationSettingsPage";
-import { DeliveryAttemptsPage } from "./pages/DeliveryAttemptsPage";
-import { NotificationUserMenuItems } from "./components/UserMenuItems";
 
 // Plugin-extensible kind registry — domain frontends call `registerSubjectKind`
 // at module load to bind their kinds (e.g., "catalog.system") to icon + label.
@@ -42,15 +37,29 @@ export const notificationPlugin = createFrontendPlugin({
   routes: [
     {
       route: notificationRoutes.routes.home,
-      element: <NotificationsPage />,
+      load: () =>
+        import("./pages/NotificationsPage").then((m) => ({
+          default: m.NotificationsPage,
+        })),
     },
     {
       route: notificationRoutes.routes.settings,
-      element: <NotificationSettingsPage />,
+      load: () =>
+        import("./pages/NotificationSettingsPage").then((m) => ({
+          default: m.NotificationSettingsPage,
+        })),
+      nav: {
+        group: "Configuration",
+        icon: Bell,
+        label: "Notification Settings",
+      },
     },
     {
       route: notificationRoutes.routes.deliveryAttempts,
-      element: <DeliveryAttemptsPage />,
+      load: () =>
+        import("./pages/DeliveryAttemptsPage").then((m) => ({
+          default: m.DeliveryAttemptsPage,
+        })),
     },
   ],
   extensions: [
@@ -59,10 +68,5 @@ export const notificationPlugin = createFrontendPlugin({
       slot: NavbarRightSlot,
       component: NotificationBell,
     },
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "notification.user.setting",
-      component: NotificationUserMenuItems,
-      metadata: { group: "Configuration" },
-    }),
   ],
 });

package/src/components/UserMenuItems.tsx

@@ -1,16 +0,0 @@
-import { Link } from "react-router-dom";
-import { Bell } from "lucide-react";
-import type { UserMenuItemsContext } from "@checkstack/frontend-api";
-import { DropdownMenuItem } from "@checkstack/ui";
-import { resolveRoute } from "@checkstack/common";
-import { notificationRoutes } from "@checkstack/notification-common";
-
-export const NotificationUserMenuItems = (_props: UserMenuItemsContext) => {
-  return (
-    <Link to={resolveRoute(notificationRoutes.routes.settings)}>
-      <DropdownMenuItem icon={<Bell className="h-4 w-4" />}>
-        Notification Settings
-      </DropdownMenuItem>
-    </Link>
-  );
-};