@campminder/components 0.1.0

package/dist/side-nav/SideNav.d.ts

@@ -0,0 +1,89 @@
+import { LitElement } from 'lit';
+import { MenuTree } from '@campminder/menu-tree';
+
+/**
+ * `<cm-side-nav>` — the left navigation.
+ *
+ * Ported 2026-09-02 from core-js's `SideNav.ts` (`<side-nav>`), core rendering path,
+ * with the desktop mega-menu flyout added 2026-09-04 (Floor 5) — mounted inside
+ * this component's own shadow root, not slotted; see the render() seam note below.
+ * Mobile and the search-bar integration remain out of scope for both floors.
+ */
+export declare class SideNav extends LitElement {
+    static readonly styles: import('lit').CSSResult[];
+    private hoveredCategory;
+    private hoverTimeout;
+    /**
+     * Collapsed state lives on `<campminder-app-shell>`, keyed per portal — see its
+     * doc comment. `cm-side-nav` only renders from it and reports intent to change
+     * it; it never reads or writes storage itself. core-js's `SIDENAV_STORAGE_KEY`
+     * (`isSideNavCollapsed`) was a single global key shared by every side-nav on one
+     * origin, which breaks the moment a second portal exists — dropped, not
+     * replaced, because ownership moved rather than the key itself needing a new
+     * name.
+     */
+    collapsed: boolean;
+    /**
+     * The current path, passed in rather than read from `window.location` (the plan's
+     * renames section). core-js's `getSelectedCategory` read
+     * `window.location.pathname + window.location.search` directly when the caller
+     * didn't supply one; every caller here always does, so the component never
+     * touches the global.
+     */
+    currentPath: string;
+    /**
+     * The menu tree, passed in as a property — not a base64 `data` attribute.
+     * core-js's `decodeString()` fused transport decoding, sorting and icon binding
+     * into one attribute converter, logged and returned `[]` on failure (a silently
+     * empty nav), and depended on `Category`/`Subcategory`/`MenuItem` from
+     * `Utils/types.ts`, which are not ported — the tree is typed against this repo's
+     * `MenuTree` (`../menu-tree`, generic — see that file's move note) instead. Icon binding is the only
+     * piece of that pipeline still intrinsic to rendering; see `icon-map.ts`.
+     *
+     * Not sorted here. core-js's `sortCategoriesData` sorted by `sort_order` then
+     * name at every level because the base64 fixture arrived unsorted; verified
+     * 2026-09-02 that the committed `campminder.json` categories are already in
+     * `sortOrder` order on disk, and `drift.test.ts` pins that order — so imposing a
+     * second sort here would just be a no-op that could silently start doing
+     * something the day the JSON stops being pre-sorted. If that's ever untrue, the
+     * fix belongs where the JSON is authored, not in a render-time sort this
+     * component would then always pay for.
+     */
+    tree: MenuTree;
+    /**
+     * Computed on render rather than cached in `@state` and refreshed from
+     * `updated()` — core-js's shape. That pattern writes state from inside the
+     * `updated()` lifecycle hook, which schedules a second update on top of the one
+     * already in flight (Lit warns: "scheduled an update ... after an update
+     * completed"). `selectedCategory` is a pure function of `tree` and
+     * `currentPath`, both already reactive properties, so there is nothing this
+     * getter needs to cache.
+     */
+    private get selectedCategory();
+    disconnectedCallback(): void;
+    private toggleSidenav;
+    private setSelectedCategory;
+    private handleMenuItemHover;
+    private clearHoverTimeout;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private get hamburgerIcon();
+    /**
+     * The category the mega-menu flyout is open for, or `undefined` when none
+     * is. Guards on `renderableSubCategories(category).length > 0` (the same
+     * predicate `hasSubmenus` uses for the chevron above) rather than on
+     * `hoveredCategory` alone — `hoveredCategory` can also be the literal
+     * string `'sidebar-toggle'` (see `handleMouseEnter` call sites), and a
+     * category with no renderable sub-categories must not open onto nothing.
+     */
+    private get openCategory();
+    private buildCategoryClass;
+    private getCategoryHtml;
+    private renderMainMenu;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cm-side-nav': SideNav;
+    }
+}

package/dist/side-nav/SideNav.styles.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Styles for `<cm-side-nav>`.
+ *
+ * Ported 2026-09-02 from core-js's `SideNav.styles.ts` + `SideNav.desktop-styles.ts`,
+ * folded into one file because mobile never lands here (Floor 5) and the
+ * `:host(.is-desktop)` conditional this repo's `desktop-styles.ts` gated on no
+ * longer applies — there is no `deviceCSS` to add that class, and there is only one
+ * mode. Design tokens and the bulk of the visual rules (buttons, categories, hover
+ * / focus / selected states, the gradient, scrollbar hiding, reduced-motion) carry
+ * across unchanged. What changed, and why:
+ *
+ * - `:host` no longer takes itself out of flow. core-js's `position: fixed; top: 0;
+ *   left: 0` assumed the component places itself on the page; inside
+ *   `<campminder-app-shell>`'s `[part='nav']` grid area that leaves the shell's
+ *   `--cm-side-nav-width` column empty and the nav floating over the page. The
+ *   shell places it now.
+ * - `.nav-container` drops `position: fixed` for the same reason.
+ * - `.nav-overlay` is gone outright — it only ever backed the mobile slide-in menu
+ *   (see `SideNavMobileStyles`, not ported), and dies with mobile.
+ * - The three `--z-nav*` tokens are gone. They existed to sit above a WebForms
+ *   page; inside a grid shell stacking is the shell's problem, and a component
+ *   asserting its own place in a stack it doesn't own is exactly the coupling this
+ *   port removes.
+ * - The `@import url(fonts.googleapis.com/...)` is gone. A network fetch from
+ *   inside a shadow root for a font the shell should provide has no place in a
+ *   component that renders itself and nothing else.
+ * - `--sidebar-width-expanded` / `--sidebar-width-collapsed` are gone.
+ *   `packages/campminder/src/layout.ts` is the single source for those dimensions
+ *   now (it says so in its own header) and already drives `--cm-side-nav-width` off
+ *   `campminder-app-shell[collapsed]`. `.side-nav` fills whatever width the host is
+ *   given rather than asserting its own — carrying both would let the two silently
+ *   disagree, which is the exact drift bug `layout.ts` exists to prevent.
+ * - `topOffsetPx`-driven inline styles (`position: fixed; top; height: calc(100vh -
+ *   Npx)` at several render sites) have no CSS counterpart here because the
+ *   property itself isn't ported — `--cm-top-bar-height` and a grid row are the
+ *   shell's answer to "how tall is the bar above me."
+ *
+ * 2026-09-04, Floor 5 added `position: relative` to `.nav-container` as the
+ * mega-menu flyout's positioning context. `.nav-main-content` was deliberately
+ * left at `overflow: hidden` — see that rule's own comment below for why.
+ */
+export declare const SideNavStyles: import('lit').CSSResult;

package/dist/side-nav/Utils/helpers.d.ts

@@ -0,0 +1,57 @@
+import { MenuCategory, MenuSubCategory, MenuTree } from '@campminder/menu-tree';
+
+/**
+ * Find the category id whose tree contains a given URL — checked at every level a
+ * link can live at, because `campminder.json` allows a category or sub-category to
+ * be a direct link (`Home` has `href: "/"` and zero children) as well as leaves.
+ * core-js's `findCategoryByUrl` only checked leaf `menu_items`; ported here as a
+ * strict superset, not a narrower rewrite.
+ */
+export declare function findCategoryByUrl(tree: MenuTree, url: string): string | undefined;
+/**
+ * Whether a sub-category has anything for a user to reach.
+ *
+ * Two sub-categories in the Campminder tree are **permanently empty by design** —
+ * `Reporting > Custom Reports` and `Reporting > Phone Reservations`. Their contents are
+ * per-client database rows, and `NavigationBuilder.cs:104-111` assigns them with `=`, not
+ * `+=`, so the host replaces the section wholesale at request time. This shell has no
+ * database (ADR D5 and D7: the tree is committed configuration, filtering is pure), so
+ * there is nothing to put in them and a rendered header would lead nowhere.
+ *
+ * Ruled 2026-09-02: **hide them**, and carry the gap to Phase 2, where the host that
+ * consumes the shell has the database anyway.
+ *
+ * `sub.href` matters because the tree format allows a sub-category to be a direct link
+ * with zero children — `findCategoryByUrl` above relies on that. Such a sub-category is
+ * reachable and must survive; only one with neither children nor a link of its own is
+ * dead weight. (Neither of today's two empty sub-categories has an `href`.)
+ *
+ * This is a **render-time** rule, not a tree edit, deliberately: Floor 6's visibility
+ * filter will produce the same situation dynamically whenever every leaf in a section is
+ * gated off for a given user. One predicate covers both, so Floor 6 does not need its own.
+ */
+export declare function isRenderableSubCategory(sub: MenuSubCategory): boolean;
+/** A category's sub-categories minus the ones with nothing to reach. Floor 5's mega menu renders from this, not from `subCategories` directly. */
+export declare function renderableSubCategories(category: MenuCategory): MenuSubCategory[];
+/**
+ * Whether a category has sub-categories to show (mega-menu content, once Floor 5 lands).
+ *
+ * Counts only *renderable* sub-categories, so a category whose every section is empty
+ * does not advertise a chevron that opens onto nothing.
+ */
+export declare function hasSubmenus(tree: MenuTree, categoryId: string): boolean;
+/**
+ * Get the selected category id for a given path.
+ *
+ * The component must not read `window.location` (see the plan's renames section),
+ * so `currentPath` is a required parameter rather than a default read from the
+ * global — core-js's `getSelectedCategory` fell back to
+ * `window.location.pathname + window.location.search` when the caller omitted it;
+ * every caller here always passes one.
+ *
+ * The `'/' → Home` special case is preserved from core-js verbatim but keyed on
+ * `id === 'home'` rather than a hardcoded display name, since `MenuCategory.label`
+ * is not guaranteed to be "Home" (it is a terminology-resolved string elsewhere in
+ * the estate) while `id` is stable, committed configuration.
+ */
+export declare function getSelectedCategory(tree: MenuTree, currentPath: string): string;

package/dist/side-nav/assets/MegaMenuIcons/AccountsGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/AdminGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/AlumniGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/CampInTouchGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/CamperGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/CommunicationGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/DefaultMMIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/FinancialGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/MedicalGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/OpenInNewIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/ReportsGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/SchedulingGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/StaffGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/TravelGrayIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/MegaMenuIcons/index.d.ts

@@ -0,0 +1,16 @@
+import { default as AccountsGrayIcon } from './AccountsGrayIcon';
+import { default as AdminGrayIcon } from './AdminGrayIcon';
+import { default as AlumniGrayIcon } from './AlumniGrayIcon';
+import { default as CamperGrayIcon } from './CamperGrayIcon';
+import { default as CampInTouchGrayIcon } from './CampInTouchGrayIcon';
+import { default as CommunicationGrayIcon } from './CommunicationGrayIcon';
+import { default as DefaultMMIcon } from './DefaultMMIcon';
+import { default as FinancialGrayIcon } from './FinancialGrayIcon';
+import { default as MedicalGrayIcon } from './MedicalGrayIcon';
+import { default as OpenInNewIcon } from './OpenInNewIcon';
+import { default as ReportsGrayIcon } from './ReportsGrayIcon';
+import { default as SchedulingGrayIcon } from './SchedulingGrayIcon';
+import { default as StaffGrayIcon } from './StaffGrayIcon';
+import { default as TravelGrayIcon } from './TravelGrayIcon';
+
+export { AccountsGrayIcon, AdminGrayIcon, AlumniGrayIcon, CamperGrayIcon, CommunicationGrayIcon, CampInTouchGrayIcon, FinancialGrayIcon, MedicalGrayIcon, OpenInNewIcon, ReportsGrayIcon, SchedulingGrayIcon, StaffGrayIcon, TravelGrayIcon, DefaultMMIcon, };

package/dist/side-nav/assets/SideNavIcons/AccountsIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/AdminIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/AlumniIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/CampInTouch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/CamperIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/ChevronRightIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color?: string) => import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/CommunicationIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/DefaultNavIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/FinancialIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/HomeIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/MedicalIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/MenuCollapseIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/MenuIcon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hamburger menu icon with three horizontal lines.
+ *
+ * Normalized 2026-09-02 from core-js's `(color = 'white') => TemplateResult` to a
+ * plain value — the only surviving call site (`hamburgerIcon`) always used the
+ * default, and `MenuCollapsedSvgIcon` it sits beside in the same ternary was
+ * already a value. One form for both branches of that ternary.
+ */
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/ReportsIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/SchedulingIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/StaffIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/TravelIcon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').TemplateResult<1>;
+export default _default;

package/dist/side-nav/assets/SideNavIcons/index.d.ts

@@ -0,0 +1,20 @@
+import { default as AccountsSvgIcon } from './AccountsIcon';
+import { default as AdminSvgIcon } from './AdminIcon';
+import { default as AlumniSvgIcon } from './AlumniIcon';
+import { default as CamperSvgIcon } from './CamperIcon';
+import { default as CampInTouchSvgIcon } from './CampInTouch';
+import { default as ChevronRightSvgIcon } from './ChevronRightIcon';
+import { default as CloseSvgIcon } from './CloseIcon';
+import { default as CommunicationSvgIcon } from './CommunicationIcon';
+import { default as DefaultNavIcon } from './DefaultNavIcon';
+import { default as FinancialSvgIcon } from './FinancialIcon';
+import { default as HomeSvgIcon } from './HomeIcon';
+import { default as MedicalSvgIcon } from './MedicalIcon';
+import { default as MenuCollapsedSvgIcon } from './MenuCollapseIcon';
+import { default as MenuSvgIcon } from './MenuIcon';
+import { default as ReportsSvgIcon } from './ReportsIcon';
+import { default as SchedulingSvgIcon } from './SchedulingIcon';
+import { default as StaffSvgIcon } from './StaffIcon';
+import { default as TravelSvgIcon } from './TravelIcon';
+
+export { AlumniSvgIcon, CamperSvgIcon, CloseSvgIcon, CommunicationSvgIcon, CampInTouchSvgIcon, FinancialSvgIcon, MedicalSvgIcon, MenuSvgIcon, ReportsSvgIcon, SchedulingSvgIcon, StaffSvgIcon, TravelSvgIcon, AccountsSvgIcon, AdminSvgIcon, HomeSvgIcon, MenuCollapsedSvgIcon, DefaultNavIcon, ChevronRightSvgIcon, };

package/dist/side-nav/icon-map.d.ts

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit';
+
+/**
+ * Resolves a category's icon from its display label, the same way core-js's
+ * `mapCategoriesWithIcons` resolved it from `category.name`. An unmapped or
+ * missing label renders the fallback — never throws, never blanks the row.
+ */
+export declare function iconFor(label: string | undefined): TemplateResult;
+/**
+ * Whether `label` resolves to a real entry rather than the `DefaultNavIcon`
+ * fallback. Exists so callers (and tests) can ask the exhaustiveness question
+ * without importing `ICON_MAP` itself — some real icon assets happen to be
+ * pixel-identical to `DefaultNavIcon` (see `mega-menu-icon-map.ts`'s AB#25851
+ * comment for the sibling case), so checking rendered output can never tell a
+ * correct resolution apart from a silent fallback. Checking the key can.
+ */
+export declare function hasIconFor(label: string | undefined): boolean;

package/dist/side-nav/index.d.ts

@@ -0,0 +1,5 @@
+
+export { SideNav } from './SideNav';
+export { MegaMenu } from './MegaMenu';
+export { hasIconFor } from './icon-map';
+export { hasMegaMenuIconFor } from './mega-menu-icon-map';

package/dist/side-nav/mega-menu-icon-map.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult } from 'lit';
+import { MenuCategory } from '@campminder/menu-tree';
+
+/**
+ * Same defect and fix as `icon-map.ts`'s `iconFor`, corrected 2026-09-11 (see
+ * AB#25851): this had been reading a `category.icon` field that no transport
+ * has ever set, misdiagnosed as a tree-data gap rather than the dropped
+ * name-keying step it actually was. The Home exception is the one deliberate,
+ * named departure from label-keying, and it is inert today too: `home` has no
+ * `subCategories`, so it never opens a mega menu in the first place.
+ */
+export declare function megaMenuIconFor(category: MenuCategory | undefined): TemplateResult;
+/**
+ * Whether `category` resolves to a real entry rather than the `DefaultMMIcon`
+ * fallback. Same reason as `icon-map.ts`'s `hasIconFor`: `AdminGrayIcon` and
+ * `DefaultMMIcon` are pixel-identical assets (AB#25851), so a rendered-output
+ * check can never distinguish a correct resolution from a silent fallback for
+ * that category. Home is always true — it resolves via `id`, not the map.
+ */
+export declare function hasMegaMenuIconFor(category: MenuCategory | undefined): boolean;

package/dist/side-nav/mega-menu-layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared layout constants for `<cm-mega-menu>`'s column packing. Both
+ * `MegaMenu.styles.ts` (the `.menu-item` box) and `MegaMenu.ts` (the packing
+ * math in `setMenuItemsContainerWidth`) read these — a single source keeps
+ * the two from silently disagreeing, which is the exact drift class that
+ * bit the collapsed-width literal earlier in this floor.
+ */
+export declare const MENU_ITEM_WIDTH_PX = 248;
+export declare const MENU_ITEM_GUTTER_PX = 16;

package/dist/side-nav/mega-menu.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav/side-nav.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav.d.ts

@@ -0,0 +1 @@
+export * from './side-nav/index'