npm - @humanforest/nuxt-layer - Versions diffs - 0.1.0 - Mend

@humanforest/nuxt-layer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

package/LICENSE +67 -0
package/README.md +208 -0
package/app.config.ts +10 -0
package/assets/icons/forest/bike-asterisk.svg +21 -0
package/assets/icons/forest/bike-down.svg +19 -0
package/assets/icons/forest/bike-off.svg +20 -0
package/assets/icons/forest/bike-up.svg +19 -0
package/assets/icons/forest/bike-x.svg +19 -0
package/assets/icons/forest/bike.svg +18 -0
package/assets/icons/forest/mark-fill.svg +6 -0
package/assets/icons/forest/mark.svg +6 -0
package/assets/icons/forest/parking.svg +3 -0
package/assets/icons/forest/star-fill.svg +4 -0
package/assets/icons/forest/star.svg +4 -0
package/assets/icons/forest/traffic-light-caution.svg +8 -0
package/assets/icons/forest/traffic-light-go.svg +8 -0
package/assets/icons/forest/traffic-light-lit.svg +8 -0
package/assets/icons/forest/traffic-light-stop.svg +8 -0
package/assets/icons/forest/traffic-light.svg +8 -0
package/nuxt.config.ts +81 -0
package/package.json +35 -0
package/packages/charts/src/FBoroughShape.vue +52 -0
package/packages/charts/src/FCalendarGrid.vue +332 -0
package/packages/charts/src/FCellLegend.vue +54 -0
package/packages/charts/src/FChartFrame.vue +201 -0
package/packages/charts/src/FChartFrameSingle.vue +91 -0
package/packages/charts/src/FChartLegend.vue +26 -0
package/packages/charts/src/FDistributionBar.vue +224 -0
package/packages/charts/src/FDottedMap.vue +335 -0
package/packages/charts/src/FLondonMap.vue +399 -0
package/packages/charts/src/FSparkline.vue +198 -0
package/packages/charts/src/FStatusTrack.vue +151 -0
package/packages/charts/src/cellSize.ts +46 -0
package/packages/charts/src/distribution.ts +99 -0
package/packages/charts/src/engine.ts +15 -0
package/packages/charts/src/forestTooltip.ts +110 -0
package/packages/charts/src/fromCategories.ts +43 -0
package/packages/charts/src/index.ts +87 -0
package/packages/charts/src/londonAreas.ts +75 -0
package/packages/charts/src/londonGrid.ts +67 -0
package/packages/charts/src/motionDuration.ts +49 -0
package/packages/charts/src/presets.ts +143 -0
package/packages/charts/src/resolveVar.ts +21 -0
package/packages/charts/src/snapTooltip.ts +154 -0
package/packages/charts/src/tooltipStandIn.ts +58 -0
package/packages/charts/src/useCellScale.ts +155 -0
package/packages/charts/src/useChartPalette.ts +61 -0
package/packages/charts/src/useChartRepaintKey.ts +22 -0
package/packages/charts/src/useThemeVersion.ts +17 -0
package/packages/frames/src/FBrowserFrame.vue +53 -0
package/packages/frames/src/FDeviceFrame.vue +242 -0
package/packages/frames/src/FFitFrame.vue +83 -0
package/packages/frames/src/art/iphone-11.svg +124 -0
package/packages/frames/src/art/iphone-12.svg +601 -0
package/packages/frames/src/art/iphone-13-pro.svg +820 -0
package/packages/frames/src/art/iphone-13.svg +849 -0
package/packages/frames/src/art/iphone-14.svg +681 -0
package/packages/frames/src/art/iphone-15-pro.svg +633 -0
package/packages/frames/src/art/iphone-15.svg +713 -0
package/packages/frames/src/art/iphone-16-plus.svg +685 -0
package/packages/frames/src/art/iphone-16-pro-max.svg +611 -0
package/packages/frames/src/art/iphone-16-pro.svg +631 -0
package/packages/frames/src/art/iphone-16.svg +713 -0
package/packages/frames/src/art/iphone-17-pro-max.svg +355 -0
package/packages/frames/src/art/iphone-17.svg +305 -0
package/packages/frames/src/art/iphone-air.svg +389 -0
package/packages/frames/src/art/iphone-se-3.svg +473 -0
package/packages/frames/src/art/iphone-x.svg +652 -0
package/packages/frames/src/art/pixel-10-pro-xl.svg +32 -0
package/packages/frames/src/art/pixel-10-pro.svg +32 -0
package/packages/frames/src/art/pixel-10.svg +32 -0
package/packages/frames/src/art/pixel-8-pro.svg +208 -0
package/packages/frames/src/art/pixel-8.svg +208 -0
package/packages/frames/src/art/pixel-8a.svg +8 -0
package/packages/frames/src/art/pixel-9-pro-xl.svg +32 -0
package/packages/frames/src/art/pixel-9-pro.svg +34 -0
package/packages/frames/src/art/pixel-9a.svg +25 -0
package/packages/frames/src/art.ts +29 -0
package/packages/frames/src/devices.ts +337 -0
package/packages/frames/src/index.ts +15 -0
package/packages/tokens/geo/london-boroughs.json +1 -0
package/packages/tokens/geo/london-dots-coarse.json +1 -0
package/packages/tokens/geo/london-dots-fine.json +1 -0
package/packages/tokens/geo/london-dots-medium.json +1 -0
package/packages/tokens/geo/london-dots-ultra.json +1 -0
package/packages/tokens/geo/london-wards.json +1 -0
package/packages/tokens/glyphs/glyphs.json +1 -0
package/packages/tokens/logos/f-rot.svg +4 -0
package/packages/tokens/logos/f.svg +4 -0
package/packages/tokens/logos/favicon-c2w.svg +9 -0
package/packages/tokens/logos/favicon-console.svg +9 -0
package/packages/tokens/logos/favicon-ds.svg +9 -0
package/packages/tokens/logos/favicon-fleet.svg +9 -0
package/packages/tokens/logos/favicon-flex.svg +9 -0
package/packages/tokens/logos/favicon-plus.svg +9 -0
package/packages/tokens/logos/favicon-radar.svg +9 -0
package/packages/tokens/logos/favicon-tower.svg +9 -0
package/packages/tokens/logos/lockup-horizontal.svg +17 -0
package/packages/tokens/logos/lockup-vertical.svg +17 -0
package/packages/tokens/logos/mark-mono.svg +4 -0
package/packages/tokens/logos/mark.svg +7 -0
package/packages/tokens/logos/wordmark.svg +9 -0
package/packages/tokens/src/colourEngine.ts +604 -0
package/packages/tokens/src/glyphs.ts +127 -0
package/packages/tokens/src/logo.ts +50 -0
package/packages/tokens/src/subbrands.ts +44 -0
package/packages/tokens/src/sublogo.ts +80 -0
package/packages/ui/icons/forest/map/forest-place-count.svg +21 -0
package/packages/ui/icons/forest/map/forest-place-marker.svg +17 -0
package/packages/ui/icons/forest/map/forest-vehicle-marker.svg +73 -0
package/packages/ui/icons/forest/map/manifest.json +373 -0
package/packages/ui/icons/forest/map/place-count-manifest.json +83 -0
package/packages/ui/icons/forest/map/place-manifest.json +74 -0
package/packages/ui/src/address/address.ts +125 -0
package/packages/ui/src/address/autofill.ts +78 -0
package/packages/ui/src/address/geocode.ts +55 -0
package/packages/ui/src/address/index.ts +31 -0
package/packages/ui/src/address/validate.ts +91 -0
package/packages/ui/src/canvas/FCanvasCard.vue +97 -0
package/packages/ui/src/canvas/FCanvasControl.vue +121 -0
package/packages/ui/src/canvas/FCanvasControlGroup.vue +100 -0
package/packages/ui/src/canvas/FCanvasFlyout.vue +216 -0
package/packages/ui/src/canvas/FCanvasHud.vue +402 -0
package/packages/ui/src/canvas/canvasSurface.ts +39 -0
package/packages/ui/src/canvas/index.ts +17 -0
package/packages/ui/src/contexts/ForestContext.vue +53 -0
package/packages/ui/src/contexts/contexts.ts +153 -0
package/packages/ui/src/contexts/index.ts +23 -0
package/packages/ui/src/contexts/marketing-theme.ts +214 -0
package/packages/ui/src/contexts/mobile-theme.ts +402 -0
package/packages/ui/src/filter/FFilterBar.vue +72 -0
package/packages/ui/src/filter/FFilterChip.vue +362 -0
package/packages/ui/src/filter/FFilterClauses.vue +104 -0
package/packages/ui/src/filter/FFilterTrigger.vue +183 -0
package/packages/ui/src/filter/filter.theme.ts +27 -0
package/packages/ui/src/filter/filterClause.ts +265 -0
package/packages/ui/src/filter/filterPredicate.ts +134 -0
package/packages/ui/src/filter/filterSchema.ts +82 -0
package/packages/ui/src/filter/index.ts +36 -0
package/packages/ui/src/forest-preset.ts +68 -0
package/packages/ui/src/icons.ts +79 -0
package/packages/ui/src/index.ts +17 -0
package/packages/ui/src/kpi/FKpi.vue +253 -0
package/packages/ui/src/kpi/FKpiGroup.vue +161 -0
package/packages/ui/src/kpi/index.ts +20 -0
package/packages/ui/src/kpi/kpi.theme.ts +168 -0
package/packages/ui/src/kpi/kpiDelta.ts +82 -0
package/packages/ui/src/kpi/kpiFormat.ts +72 -0
package/packages/ui/src/kpi/kpiGroupState.ts +63 -0
package/packages/ui/src/logo/FLogo.vue +52 -0
package/packages/ui/src/logo/FSubLogo.vue +214 -0
package/packages/ui/src/logo/index.ts +8 -0
package/packages/ui/src/map/FMap.vue +355 -0
package/packages/ui/src/map/FMapCompass.vue +154 -0
package/packages/ui/src/map/FMapCoordinates.vue +134 -0
package/packages/ui/src/map/FMapDrawTools.vue +116 -0
package/packages/ui/src/map/FMapFullscreen.vue +92 -0
package/packages/ui/src/map/FMapGeolocate.vue +208 -0
package/packages/ui/src/map/FMapLayers.vue +75 -0
package/packages/ui/src/map/FMapLegend.vue +45 -0
package/packages/ui/src/map/FMapPopup.vue +129 -0
package/packages/ui/src/map/FMapRamp.vue +69 -0
package/packages/ui/src/map/FMapRegion.vue +77 -0
package/packages/ui/src/map/FMapScale.vue +107 -0
package/packages/ui/src/map/FMapSearch.vue +362 -0
package/packages/ui/src/map/FMapTilt.vue +87 -0
package/packages/ui/src/map/FMapTools.vue +61 -0
package/packages/ui/src/map/FMapZoom.vue +81 -0
package/packages/ui/src/map/FMarker.vue +218 -0
package/packages/ui/src/map/FTrackScrubber.vue +94 -0
package/packages/ui/src/map/FVehicleLegend.vue +72 -0
package/packages/ui/src/map/FVehicleMark.vue +166 -0
package/packages/ui/src/map/bin.ts +196 -0
package/packages/ui/src/map/coordinates.ts +83 -0
package/packages/ui/src/map/density.ts +401 -0
package/packages/ui/src/map/draw.ts +356 -0
package/packages/ui/src/map/ease.ts +67 -0
package/packages/ui/src/map/fullscreen.ts +59 -0
package/packages/ui/src/map/heat.ts +160 -0
package/packages/ui/src/map/index.ts +351 -0
package/packages/ui/src/map/liveMarkers.ts +60 -0
package/packages/ui/src/map/map.css +116 -0
package/packages/ui/src/map/mapColor.ts +31 -0
package/packages/ui/src/map/mapContext.ts +12 -0
package/packages/ui/src/map/mapLayers.ts +55 -0
package/packages/ui/src/map/mapLegend.ts +70 -0
package/packages/ui/src/map/mapSearch.theme.ts +79 -0
package/packages/ui/src/map/mapSearch.ts +279 -0
package/packages/ui/src/map/mapUrl.ts +117 -0
package/packages/ui/src/map/markerAsset.ts +3 -0
package/packages/ui/src/map/padding.ts +39 -0
package/packages/ui/src/map/place.ts +192 -0
package/packages/ui/src/map/ramp.ts +95 -0
package/packages/ui/src/map/regionSelect.ts +163 -0
package/packages/ui/src/map/route.ts +167 -0
package/packages/ui/src/map/scale.ts +329 -0
package/packages/ui/src/map/scaleBar.ts +67 -0
package/packages/ui/src/map/selectionModel.ts +50 -0
package/packages/ui/src/map/sources/coordinates.ts +58 -0
package/packages/ui/src/map/sources/mapboxPlaces.ts +71 -0
package/packages/ui/src/map/style.ts +14 -0
package/packages/ui/src/map/track.ts +279 -0
package/packages/ui/src/map/useFeatureSelect.ts +230 -0
package/packages/ui/src/map/useLiveMarkers.ts +84 -0
package/packages/ui/src/map/useMap.ts +150 -0
package/packages/ui/src/map/useMapDraw.ts +776 -0
package/packages/ui/src/map/useMapOverlay.ts +421 -0
package/packages/ui/src/map/useMapTableSelection.ts +101 -0
package/packages/ui/src/map/useMapUrlState.ts +155 -0
package/packages/ui/src/map/useMarkerSource.ts +163 -0
package/packages/ui/src/map/useRegionSelect.ts +309 -0
package/packages/ui/src/map/useTokenMode.ts +61 -0
package/packages/ui/src/map/useTrackPlayback.ts +131 -0
package/packages/ui/src/map/useVehicleFilter.ts +51 -0
package/packages/ui/src/map/useVisibleFeatures.ts +124 -0
package/packages/ui/src/map/vehicle.ts +807 -0
package/packages/ui/src/map/vehicleFilter.ts +284 -0
package/packages/ui/src/map/vehicleLegend.ts +155 -0
package/packages/ui/src/map/visibleFeatures.ts +192 -0
package/packages/ui/src/map/zone.ts +291 -0
package/packages/ui/src/shell/FAppNavbar.vue +68 -0
package/packages/ui/src/shell/FAppShell.vue +163 -0
package/packages/ui/src/shell/FAppSidebar.vue +215 -0
package/packages/ui/src/shell/FPageToolbar.vue +126 -0
package/packages/ui/src/shell/FScrollShadow.vue +43 -0
package/packages/ui/src/shell/FSidePanel.vue +258 -0
package/packages/ui/src/shell/FToolbarActions.vue +32 -0
package/packages/ui/src/shell/index.ts +33 -0
package/packages/ui/src/shell/nav.ts +37 -0
package/packages/ui/src/shell/pageToolbar.ts +69 -0
package/packages/ui/src/shell/shell.ts +74 -0
package/packages/ui/src/shell/sidePanel.ts +115 -0
package/packages/ui/src/themes/accordion.ts +36 -0
package/packages/ui/src/themes/alert.ts +16 -0
package/packages/ui/src/themes/auth-form.ts +19 -0
package/packages/ui/src/themes/avatar-group.ts +9 -0
package/packages/ui/src/themes/avatar.ts +18 -0
package/packages/ui/src/themes/badge.ts +51 -0
package/packages/ui/src/themes/banner.ts +21 -0
package/packages/ui/src/themes/breadcrumb.ts +10 -0
package/packages/ui/src/themes/button.mechanics.ts +191 -0
package/packages/ui/src/themes/button.ts +136 -0
package/packages/ui/src/themes/calendar.ts +29 -0
package/packages/ui/src/themes/card.ts +67 -0
package/packages/ui/src/themes/carousel.ts +41 -0
package/packages/ui/src/themes/checkbox-group.ts +20 -0
package/packages/ui/src/themes/checkbox.ts +47 -0
package/packages/ui/src/themes/chip.ts +50 -0
package/packages/ui/src/themes/collapsible.ts +26 -0
package/packages/ui/src/themes/color-picker.ts +13 -0
package/packages/ui/src/themes/command-palette.ts +37 -0
package/packages/ui/src/themes/container.ts +14 -0
package/packages/ui/src/themes/context-menu.ts +38 -0
package/packages/ui/src/themes/dashboard-group.ts +11 -0
package/packages/ui/src/themes/dashboard-navbar.ts +10 -0
package/packages/ui/src/themes/dashboard-panel.ts +18 -0
package/packages/ui/src/themes/dashboard-resize-handle.ts +35 -0
package/packages/ui/src/themes/dashboard-sidebar-collapse.ts +7 -0
package/packages/ui/src/themes/dashboard-sidebar-toggle.ts +7 -0
package/packages/ui/src/themes/dashboard-sidebar.ts +58 -0
package/packages/ui/src/themes/dashboard-toolbar.ts +15 -0
package/packages/ui/src/themes/drawer.ts +45 -0
package/packages/ui/src/themes/dropdown-menu.ts +38 -0
package/packages/ui/src/themes/empty.ts +43 -0
package/packages/ui/src/themes/field-group.ts +52 -0
package/packages/ui/src/themes/file-upload.ts +38 -0
package/packages/ui/src/themes/footer-columns.ts +13 -0
package/packages/ui/src/themes/footer.ts +9 -0
package/packages/ui/src/themes/form-field.ts +25 -0
package/packages/ui/src/themes/form.ts +22 -0
package/packages/ui/src/themes/header.ts +12 -0
package/packages/ui/src/themes/icon.ts +61 -0
package/packages/ui/src/themes/index.ts +99 -0
package/packages/ui/src/themes/input-date.ts +73 -0
package/packages/ui/src/themes/input-menu.ts +66 -0
package/packages/ui/src/themes/input-number.ts +58 -0
package/packages/ui/src/themes/input-rating.ts +25 -0
package/packages/ui/src/themes/input-tags.ts +63 -0
package/packages/ui/src/themes/input-time.ts +70 -0
package/packages/ui/src/themes/input.ts +148 -0
package/packages/ui/src/themes/kbd.ts +27 -0
package/packages/ui/src/themes/link.ts +27 -0
package/packages/ui/src/themes/listbox.ts +48 -0
package/packages/ui/src/themes/main.ts +6 -0
package/packages/ui/src/themes/marquee.ts +45 -0
package/packages/ui/src/themes/modal.ts +46 -0
package/packages/ui/src/themes/navigation-menu.ts +80 -0
package/packages/ui/src/themes/page-anchors.ts +7 -0
package/packages/ui/src/themes/page-aside.ts +7 -0
package/packages/ui/src/themes/page-card.ts +22 -0
package/packages/ui/src/themes/page-cta.ts +18 -0
package/packages/ui/src/themes/page-feature.ts +13 -0
package/packages/ui/src/themes/page-header.ts +16 -0
package/packages/ui/src/themes/page-hero.ts +15 -0
package/packages/ui/src/themes/page-links.ts +12 -0
package/packages/ui/src/themes/page-section.ts +14 -0
package/packages/ui/src/themes/page.ts +7 -0
package/packages/ui/src/themes/pagination.ts +17 -0
package/packages/ui/src/themes/pin-input.ts +73 -0
package/packages/ui/src/themes/popover.ts +30 -0
package/packages/ui/src/themes/progress.ts +29 -0
package/packages/ui/src/themes/prose.ts +45 -0
package/packages/ui/src/themes/radio-group.ts +39 -0
package/packages/ui/src/themes/scroll-area.ts +23 -0
package/packages/ui/src/themes/select-menu.ts +71 -0
package/packages/ui/src/themes/select.ts +72 -0
package/packages/ui/src/themes/separator.ts +28 -0
package/packages/ui/src/themes/sidebar.ts +127 -0
package/packages/ui/src/themes/skeleton.ts +15 -0
package/packages/ui/src/themes/slideover.ts +87 -0
package/packages/ui/src/themes/slider.ts +48 -0
package/packages/ui/src/themes/stepper.ts +41 -0
package/packages/ui/src/themes/switch.ts +63 -0
package/packages/ui/src/themes/table.ts +34 -0
package/packages/ui/src/themes/tabs.ts +74 -0
package/packages/ui/src/themes/textarea.ts +77 -0
package/packages/ui/src/themes/timeline.ts +25 -0
package/packages/ui/src/themes/toast.ts +29 -0
package/packages/ui/src/themes/toaster.ts +66 -0
package/packages/ui/src/themes/tooltip.ts +31 -0
package/packages/ui/src/themes/tree.ts +41 -0
package/packages/ui/src/themes/user.ts +28 -0
package/styles.cdn.gen.css +2047 -0
package/theme.gen.json +1 -0

package/packages/ui/src/shell/FAppSidebar.vue ADDED Viewed

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+// The app shell's sidebar — the brand mark, the nav, and the collapsed icon rail.
+//
+//   <FAppSidebar :groups="nav" sub-brand="OPS" v-model:open="open" v-model:collapsed="collapsed" />
+//
+// The app supplies the LIST; everything else here is the same in every Forest app. Two of those are
+// pairings that break silently if a sidebar is composed by hand:
+//
+//   · The scrollbar is hidden (themes/dashboard-sidebar.ts), so <FScrollShadow> is what tells a reader
+//     the nav runs past the fold. Without it a long list clips with no signal at all.
+//   · Slot props, NOT the models: the mobile slideover re-renders these slots with collapsed=false, so
+//     reading `collapsed` here would leak the desktop rail's icon-only rows into the phone menu.
+import { computed } from 'vue';
+import { F, WORDMARK_H, WORDMARK_W } from '@humanforest/tokens/logo';
+import { setWord, runInk } from '@humanforest/tokens/glyphs';
+import { keycapGeometry, SUBLOGO_MOHR_SIZE } from '@humanforest/tokens/sublogo';
+import { FSubLogo } from '../logo';
+import FScrollShadow from './FScrollShadow.vue';
+import type { FNavGroup, FNavItem } from './nav';
+// ── The lockup and the room it owns ──
+// The brand's spacing module is the f from the wordmark: one f of clear space on every side, with no
+// type or edge inside that zone. One f is 0.982 × the rendered height, so the expanded lockup sits at
+// 24px in a block of 24 + 2×23.6 ≈ 71px.
+//
+// ★ THE BLOCK IS NOT A HEADER STRIP. UDashboardSidebar's header recipe is `h-(--ui-header-height)`,
+// and the largest lockup that keeps one f inside 48px is 16px, at which the wordmark reads as a
+// caption rather than a mark. So the block takes `h-auto` with the clear space as padding, and the
+// navbar beside it keeps that height — the rail reads as a brand block above the nav, not one strip.
+//
+// ★ THE MOBILE MENU CANNOT READ THE CUSTOM PROPERTIES. They are declared by `:style` on the sidebar
+// root, which is the DESKTOP column; the slideover is a sibling <Menu> teleported to <body>, so the
+// root is not an ancestor of it and `p-(--forest-rail-clear)` there resolves to nothing — the header
+// collapsed to 33px with the lockup 4px off the panel edge. The recipe's classes DO reach both, so the
+// padding splits on the breakpoint the two states already split on: the column is `hidden lg:flex` and
+// the menu content is `lg:hidden`, so `p-6` dresses the menu and `lg:p-(…)` the column. 24px is half a
+// pixel off one f at this size, which is as close as a spacing step gets to the module.
+//
+// The size is a HEIGHT, so the clear space holds whatever the lockup says; the width follows the lead
+// and the sub-brand together, and the mark does not shrink. `forest [CONSOLE]` measures 247px in a
+// 256px default column, so a lead and a word both long enough will run past the expanded rail.
+const LOCKUP_SIZE = 24;
+const oneF = (size: number) => size * (F.h / WORDMARK_H);
+const CLEAR = `${oneF(LOCKUP_SIZE).toFixed(2)}px`;
+// The block the brand owns, in BOTH states. Collapsing already narrows the column and swaps the mark;
+// growing the block as well would shove the whole nav down at the moment the rail is trying to give
+// the nav room. Holding it constant also keeps one f exactly when the rail mark is lockup-sized.
+const BLOCK_H = LOCKUP_SIZE + 2 * oneF(LOCKUP_SIZE);
+const props = withDefaults(defineProps<{
+  /** The nav, in the order it should read. Group labels head each section when expanded. */
+  groups?: FNavGroup[];
+  /** Sub-brand for the lockup — the keycap word. Drops to the keycap badge on the rail. */
+  subBrand?: string;
+  /**
+   * The word ahead of the keycap — `fleet [CONSOLE]`. 'forest' (default) draws the wordmark.
+   * Expanded only: the collapsed rail carries the keycap alone.
+   */
+  lead?: string;
+  /**
+   * The word on the collapsed rail. Defaults to the sub-brand, which is right while it reads at rail
+   * size — `DS` and `OPS` do. Set it where the sub-brand does not: `fleet [CONSOLE]` collapses to `C`,
+   * and the app says which letter that is rather than a width threshold deciding for it.
+   * A single letter draws the app icon; two or more draw the keycap.
+   */
+  railWord?: string;
+  /** Rail width in the dashboard group's unit, and the drag bounds. */
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+}>(), { groups: () => [], subBrand: 'DS', lead: 'forest', width: 16, minWidth: 14, maxWidth: 22 });
+const open = defineModel<boolean>('open', { default: false });
+const collapsed = defineModel<boolean>('collapsed', { default: false });
+// ── The collapsed rail's mark ──
+// The rail word is SHORT by construction — `railWord` exists so it can be — so the mark is sized to
+// the ROW GRID it sits above rather than fitted to the column. 32px is the collapsed nav item's box,
+// which is what the eye compares the mark against; one f either side inside the 4rem rail would hold
+// it to 21px instead, two thirds of the rows below it.
+//
+// ★ THE MODULE YIELDS IN BOTH DIRECTIONS ONCE THE MARK IS SIZED TO THE NAV. One f of a 32px mark is
+// 31.4px, which wants 63px of the 64px column across and a 95px block down — three times the mark, and
+// the nav shoved down by it. The mark centres in what BLOCK_H and the column leave instead, 19.6px
+// down and 16px across for `[C]`. That shortfall is the price of a mark that reads at the nav's scale;
+// the module still sets the block itself, from the expanded lockup.
+//
+// ★ WIDTH IS A CAP, NOT A FIT. `[C]` is 32px wide at full height and `DS` 46.9, so a word past two
+// letters solves its height down instead — `OPS` would want 63.2px and lands at 24px tall. That is the
+// app's signal to pass a shorter `railWord`.
+const RAIL_H = 32; // the collapsed nav item's box — see themes/dashboard-sidebar.ts
+const RAIL_W_MAX = 48; // the rail itself is --sidebar-width-icon (4rem), which :collapsed-size="4" matches
+// Painted width of a keycap holding `word`, per px of rendered height. Pure maths over the glyph atlas
+// — the same call <FSubLogo> composes through, so the two can never disagree.
+//
+// The `lead` does NOT enter it. keycapGeometry's leadW only sets boxX — where the keycap starts — and
+// the badge viewBox is [boxX - bleed, boxW + 2·bleed], so the lead moves the origin and never the
+// width. The constant below is the drawn wordmark's, and it stays right for any lead.
+const keycapRatio = (word: string) =>
+  keycapGeometry(
+    WORDMARK_W,
+    runInk(setWord(word, { font: 'mohr', size: SUBLOGO_MOHR_SIZE })),
+  ).badgeVB[1] / WORDMARK_H;
+const railKeycap = computed(() => (props.railWord ?? props.subBrand).toUpperCase());
+// ★ A SINGLE LETTER IS THE APP ICON, NOT A ONE-LETTER KEYCAP. Same idea — first letter, square — and
+// scripts/favicons.ts already writes that exact mark per registered product, so a rail composing its
+// own would put a second shape on one brand. They are close enough to miss and far enough to see:
+// keycapGeometry pads the letter's ink equally on four sides and lands portrait (18.9 × 21.4 plate at
+// 24px), where iconGeometry builds the square first and fits the letter to 62% of its cap (19.5 sq).
+const railIsIcon = computed(() => railKeycap.value.length === 1);
+// the icon is square; a keycap's width follows the word it holds
+const railRatio = computed(() => (railIsIcon.value ? 1 : keycapRatio(railKeycap.value)));
+const railSize = computed(() => Math.min(RAIL_H, Math.floor(RAIL_W_MAX / railRatio.value)));
+// whatever the block has left around the mark. At 32px that is 19.6px a side rather than the module's
+// 31.4 — the same relaxation the column already makes, and for the same reason: a mark sized to the
+// nav cannot also hold a module scaled to itself inside a 4rem rail.
+const railClear = computed(() => `${((BLOCK_H - railSize.value) / 2).toFixed(2)}px`);
+// <UNavigationMenu> draws a `separator` between each TOP-LEVEL ARRAY, so the item shape carries the
+// group boundary — and the two states want different shapes:
+//
+//   expanded  — ONE flat array. Each group already announces itself with an uppercase label; a rule
+//               as well is a second divider doing one job.
+//   collapsed — an array PER GROUP and no labels, since the labels are hidden at that width and the
+//               rule is then the only thing marking where a group ends.
+const toItem = (item: FNavItem) => ({
+  label: item.label,
+  icon: item.icon,
+  to: item.to,
+  disabled: !item.to,
+  ...(item.wip
+    ? { badge: { label: 'WIP', color: 'warning' as const, variant: 'subtle' as const } }
+    : !item.to
+      ? { badge: { label: 'Soon', color: 'neutral' as const, variant: 'subtle' as const } }
+      : {}),
+});
+const navFlat = computed(() =>
+  props.groups.flatMap((group) => [
+    { label: group.label, type: 'label' as const },
+    ...group.items.map(toItem),
+  ]),
+);
+const navGrouped = computed(() => props.groups.map((group) => group.items.map(toItem)));
+</script>
+<template>
+  <!-- Two corrections to the phone menu, which is stock's surface rather than the column's:
+       · `toggle-side` — stock opens with the close button at the START, which puts a dismiss control
+         where the brand goes and shoves the lockup off the panel's own left edge. The mark leads on
+         both surfaces; the close follows it.
+       · `content: divide-y-0` — the slideover recipe carries `divide-y divide-default`, drawing a rule
+         between the brand block and the nav. Same call as the shell's chrome gutter (see FAppShell's style
+         block): the block and the list are one surface, and the label above each group is what
+         separates them. -->
+  <UDashboardSidebar
+    v-model:open="open"
+    v-model:collapsed="collapsed"
+    collapsible
+    resizable
+    :collapsed-size="4"
+    :default-size="width"
+    :min-size="minWidth"
+    :max-size="maxWidth"
+    mode="slideover"
+    toggle-side="right"
+    :menu="{ inset: true }"
+    :style="{ '--forest-rail-clear': CLEAR, '--forest-rail-clear-icon': railClear }"
+    :ui="{
+      header: 'h-auto p-6 lg:p-(--forest-rail-clear) group-data-[collapsed=true]:px-0'
+        + ' group-data-[collapsed=true]:py-(--forest-rail-clear-icon)',
+      content: 'divide-y-0',
+    }"
+  >
+    <template #header="{ collapsed: rail }">
+      <slot name="brand" :collapsed="rail">
+        <!-- Ink is currentColor, so the mark follows the theme. On the rail the lockup drops to what
+             `railWord` says reads at that size — the app icon for one letter, the keycap for more.
+             The NAME does not abbreviate with the mark. FSubLogo builds its label from the word it
+             draws, which on the rail is an initial — "fleet C" is what the eye sees and not what the
+             mark means. The fallthrough attribute overrides the component's own on the root svg. -->
+        <span class="shrink-0 text-[var(--color-forest-950)] dark:text-white" :class="rail && 'mx-auto'">
+          <FSubLogo
+            :word="rail ? railKeycap : subBrand"
+            :aria-label="`${lead} ${subBrand.toUpperCase()}`"
+            :lead="lead"
+            :variant="rail ? (railIsIcon ? 'icon' : 'badge') : 'lockup'"
+            :size="rail ? railSize : LOCKUP_SIZE"
+          />
+        </span>
+      </slot>
+    </template>
+    <template #default="{ collapsed: rail }">
+      <FScrollShadow>
+        <UNavigationMenu
+          :items="rail ? navGrouped : navFlat"
+          :collapsed="rail"
+          orientation="vertical"
+          tooltip
+          class="w-full"
+        />
+      </FScrollShadow>
+    </template>
+    <template v-if="$slots.footer" #footer="{ collapsed: rail }">
+      <slot name="footer" :collapsed="rail" />
+    </template>
+  </UDashboardSidebar>
+</template>

package/packages/ui/src/shell/FPageToolbar.vue ADDED Viewed

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+// The page's own toolbar — the filters, search and view controls for the body below it, or the
+// section's sub-route navigation.
+//
+//   <FPageToolbar>
+//     <FFilterBar v-model="clauses" :schema="schema" />
+//   </FPageToolbar>
+//
+// Teleports to the top of <FAppShell>'s inset card. A page renders inside the panel and cannot fill a
+// slot on the shell that contains it — slots flow down. What makes teleport the answer rather than a
+// workaround is whose content this is: a navbar's crumb belongs to the app, but THIS route's filters
+// live in this route's setup, and a v-model has to reach them. Teleport moves the DOM node and leaves
+// the component tree alone, so it does.
+//
+// TWO LAYERS, and the split is the point. The root bleeds to the card's edge so the hairline reads as
+// a rule across the whole card; the container inside carries the well, so the controls line up with
+// the page content rather than with the card. On a 1720px card those are 252px apart.
+//
+// A page needing both nav and filters writes two of these. They stack, each keeping its own rule.
+//
+// Renders IN PLACE when no shell is above it. A page without chrome keeps its controls; they just
+// stop pinning.
+import { computed, inject, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, useSlots } from 'vue';
+import { TOOLBAR_SEAT_KEY } from './shell';
+import {
+  pageToolbarSurface,
+  pageToolbarWellClass,
+  type PageToolbarVariant,
+  type PageToolbarWell,
+} from './pageToolbar';
+const props = withDefaults(defineProps<{
+  /** Which rung the controls align to. Match the page body's own well, or they will not line up. */
+  well?: PageToolbarWell;
+  /**
+   * How the bar draws itself: a hairline rule across the card, or an inset panel sitting on it.
+   * A page stacking navigation over filters gives the navigation a rule and the filters a card.
+   */
+  variant?: PageToolbarVariant;
+}>(), { well: 'default', variant: 'rule' });
+const seat = inject(TOOLBAR_SEAT_KEY, null);
+const target = computed(() => seat?.toolbar.value ?? null);
+const wellClass = computed(() => pageToolbarWellClass(props.well));
+const surface = computed(() => pageToolbarSurface(props.variant));
+const slots = useSlots();
+// What pushes a view's actions to the right, and it moves depending on how the bar was filled. The
+// `right` wrapper carries `ms-auto`, and it only exists in the DEFAULT-slot fallback — a bar filled
+// through the default slot has no such wrapper, so nothing would push the seam over and the actions
+// would strand against the bar's own content.
+//
+// Never both: two auto margins SHARE the free space rather than one taking it, which opens a gap
+// between the bar's own right-hand content and the actions teleported after it.
+const seamPush = computed(() => (slots.default ? 'ms-auto' : ''));
+const actions = ref<HTMLElement | null>(null);
+// Claim while on screen, release when off it. The shell keeps claimants in claim order and derives
+// the seam from the first of them, so a section stacking a nav row over a filter row keeps the nav
+// row's seam while it is there, and promotes the filter row if the nav row goes.
+onMounted(() => {
+  if (seat && actions.value) seat.claimActions(actions.value);
+});
+onBeforeUnmount(() => {
+  if (seat && actions.value) seat.releaseActions(actions.value);
+});
+// BOTH pairs, and neither is spare. A toolbar cached by <KeepAlive> — an ordinary tabbed console
+// section — fires activated/deactivated and NEITHER of the pair above. A Teleport leaves its content
+// in the target while its component is cached, so a deactivated toolbar's bar is still sitting in the
+// seat: one that kept its claim would hold the seam on the bar of a tab nobody is looking at, and the
+// active view's actions would land there. Outside <KeepAlive> only the mount pair fires. Claiming and
+// releasing are idempotent, so the two firing together — first appearance, or a cached toolbar
+// finally unmounting — costs nothing.
+//
+// Reappearing claims afresh, at the BACK of the list. A cached nav row returning to a section whose
+// filter row claimed while it was away leaves the seam where it now is.
+onActivated(() => {
+  if (seat && actions.value) seat.claimActions(actions.value);
+});
+onDeactivated(() => {
+  if (seat && actions.value) seat.releaseActions(actions.value);
+});
+</script>
+<template>
+  <!-- `disabled` rather than v-if: with no shell above, the bar still renders where it was written,
+       it just stops moving. Teleport wants a valid `to` even when disabled, hence the body fallback. -->
+  <Teleport :to="target ?? 'body'" :disabled="!target">
+    <!-- `px-0 sm:px-0` — BOTH, or tailwind-merge keeps stock's sm:px-6 and the bar is double-guttered.
+         The well owns the gutter now.
+         `overflow-x-visible`, NOT overflow-visible: tailwind-merge keeps `overflow` and `overflow-x`
+         in separate groups, so the plain one leaves stock's overflow-x-auto in place and the bleed
+         scrolls instead of the controls.
+         The height comes from themes/dashboard-toolbar.ts and is not restated here. -->
+    <UDashboardToolbar :ui="{ root: ['px-0 sm:px-0 overflow-x-visible', surface.root] }">
+      <!-- The lane <FAppShell> measures on the page's own scrollport (0px when it does not scroll).
+           This wrapper carries it, not the root above: the root's rule has to stay full-bleed, but
+           the well below has to centre over the same box the scrollport does, or the two drift apart
+           the moment a page is long enough to grow a scrollbar. -->
+      <div class="w-full pe-(--forest-scrollport-lane)">
+        <UContainer :class="wellClass">
+          <!-- The row, and the layer the `card` variant fills. It has to be INSIDE the container
+               rather than be it: a panel has to start where the content starts, and the container is
+               the thing that knows where that is. -->
+          <div :class="['flex items-center gap-1.5 overflow-x-auto', surface.row]">
+            <slot>
+              <div class="flex items-center gap-1.5"><slot name="left" /></div>
+              <div class="flex items-center gap-1.5 ms-auto"><slot name="right" /></div>
+            </slot>
+            <!-- Filled from below by <FToolbarActions>. LAST, and outside the <slot>, for two reasons:
+                 a view's controls land after whatever the section put in #right, and a toolbar using
+                 the default slot — which has no `right` region at all — can still receive them.
+                 `ms-auto` on `right` pushes that group over, so either way these end up rightmost. -->
+            <div ref="actions" :class="['flex items-center gap-1.5 empty:hidden', seamPush]" />
+          </div>
+        </UContainer>
+      </div>
+    </UDashboardToolbar>
+  </Teleport>
+</template>

package/packages/ui/src/shell/FScrollShadow.vue ADDED Viewed

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// Fades the top and bottom edges of the scroll container this sits inside, so a long column reads as
+// "more below" rather than as a hard clipped edge. Wraps Nuxt UI's useScrollShadow, whose mask only
+// appears while the container overflows and has not reached that edge.
+//
+// It is the overflow signal for the sidebar, which hides its scrollbar (themes/dashboard-sidebar.ts) —
+// a rail 64px wide has no room for a bar beside the icons, and expanded it draws hard against the
+// inset panel's edge. Without this the nav loses both, and a long list clips with nothing to say so.
+//
+// The scroller is the PARENT: UDashboardSidebar owns the scrolling `data-slot="body"` div and a child
+// cannot style it through a binding, so this wrapper is `display: contents` — no box of its own — and
+// reaches up. Scoping per mount also covers the sidebar rendering its default slot twice, for the
+// desktop rail and the mobile slideover: each gets its own instance and its own ref.
+import { onMounted, ref, watchEffect } from 'vue';
+import { useScrollShadow } from '@nuxt/ui/composables';
+const { size = 20 } = defineProps<{
+  /** Depth of the fade, in px. */
+  size?: number;
+}>();
+const root = ref<HTMLElement | null>(null);
+const scroller = ref<HTMLElement | null>(null);
+onMounted(() => {
+  scroller.value = root.value?.parentElement ?? null;
+});
+const { style } = useScrollShadow(scroller, { size: () => size });
+watchEffect(() => {
+  const el = scroller.value;
+  if (!el) return;
+  const mask = style.value?.maskImage ?? '';
+  el.style.maskImage = mask;
+  el.style.webkitMaskImage = mask;
+});
+</script>
+<template>
+  <div ref="root" style="display: contents">
+    <slot />
+  </div>
+</template>

package/packages/ui/src/shell/FSidePanel.vue ADDED Viewed

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+// A column that belongs to a CONTAINER rather than to the app — a settings sub-nav inside a card, a
+// filter or list panel over a map canvas.
+//
+//   <FSidePanel v-model:open="filters" title="Filters">…</FSidePanel>                  a page's own column
+//   <FSidePanel v-model:open="filters" behaviour="overlay" size="lg" title="Filters">  over a canvas
+//
+// ★ WHAT THIS IS NOT. It is not the app's sidebar — that is <FAppSidebar>, which is viewport-scoped,
+// carries navigation, persists its width and hands over to a menu on a phone. This one answers "what am
+// I looking at", not "where am I in the app", and it dies with the view it belongs to.
+//
+// ★ WHY IT EXISTS AT ALL, given <USidebar> is right there. One reason, and it is structural rather than
+// cosmetic: `collapsible="offcanvas"` is `hidden lg:block` and portals itself into a page-level slideover
+// under 1024px. Those are VIEWPORT decisions, and this column's container is a card that can be 600px
+// wide on a 1600px screen — the same panel would get the desktop treatment in one and a slideover flying
+// in from the page edge in the other. No `:ui` override reaches that; it is `collapsible`'s own
+// structure. So this uses `collapsible="none"` — which renders a single flow element, no gap spacer, no
+// fixed container, no rail — and owns the positioning, the open/close travel and the reflow itself.
+//
+// What it still takes from <USidebar>: the header/body/footer skeleton, the divided inner, and Forest's
+// sidebar theme fragment (the MohrAlt title), so a panel's heading and the app rail's
+// heading cannot drift apart.
+//
+// ★ `variant` is PINNED here rather than inherited. The Forest fragment defaults USidebar to `floating`
+// for the app rail's sake; a panel that let that default through would silently move the day the rail's
+// surface is retuned.
+import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
+import {
+  CANVAS_INSET_DURATION_VAR,
+  CANVAS_INSET_VAR,
+  SIDE_PANEL_GUTTER_PX,
+  SIDE_PANEL_WIDTH,
+  type SidePanelBehaviour,
+  type SidePanelSide,
+  type SidePanelSize,
+} from './sidePanel';
+const props = withDefaults(
+  defineProps<{
+    /** Does content beside it move over (`push`), or does it lie on top (`overlay`)? */
+    behaviour?: SidePanelBehaviour;
+    /** Which edge of the container it takes. `end` by default — see the note on the default. */
+    side?: SidePanelSide;
+    /** `md` matches the HUD's rail; `lg` is for a list of rows. */
+    size?: SidePanelSize;
+    title?: string;
+    description?: string;
+    /** The close affordance in the header. On by default for overlay, which has no other way out. */
+    close?: boolean;
+  }>(),
+  // ★ `end` by default, which is the opposite of what a lone column would want. A panel is SECONDARY
+  // chrome: the shell it sits in already has FAppSidebar at the start edge, so a panel there stacks two
+  // columns on one side and shoves the content across — while the end edge keeps the content beside the
+  // navigation and the weight split between two edges. It is what a console with a left rail does
+  // everywhere (Linear, Figma, Retool). Pass `side="start"` where the panel IS the navigation for its
+  // view, which in practice means a settings sub-nav.
+  { behaviour: 'push', side: 'end', size: 'md' },
+);
+const open = defineModel<boolean>('open', { default: true });
+const width = computed(() => SIDE_PANEL_WIDTH[props.size].css);
+const overlay = computed(() => props.behaviour === 'overlay');
+const showClose = computed(() => props.close ?? overlay.value);
+// ── The reflow ────────────────────────────────────────────────────────────────────────────────────
+// ★ Measured off the CONTAINER, never the viewport — the whole reason this component exists. Below the
+// threshold the panel takes the container whole: a 22rem column inside a 24rem card leaves 2rem for what
+// it is filtering, which is worse than covering it outright and being dismissed.
+//
+// A ResizeObserver rather than a CSS container query because the query would have to be declared on the
+// PARENT, and a child cannot stamp that on an element it does not own — a panel dropped into an
+// arbitrary card would silently never reflow. This measures whatever it is actually inside.
+const FULL_WIDTH_BELOW = 480;
+const el = ref<HTMLElement | null>(null);
+const narrow = ref(false);
+let ro: ResizeObserver | null = null;
+watchEffect(() => {
+  ro?.disconnect();
+  const parent = el.value?.parentElement;
+  if (!parent || typeof ResizeObserver === 'undefined') return;
+  ro = new ResizeObserver(() => {
+    narrow.value = parent.clientWidth > 0 && parent.clientWidth < FULL_WIDTH_BELOW;
+  });
+  ro.observe(parent);
+});
+// ── The inset it reports ──────────────────────────────────────────────────────────────────────────
+// An open overlay panel declares the strip it covers on its PARENT, where <FCanvasHud> reads it and
+// insets its rails on that edge — so a rail card steps aside instead of hiding underneath, with no
+// z-index fight and no bookkeeping at the usage site. Written to the parent because the HUD is a
+// SIBLING: the panel has nothing to pass it, but they share an ancestor.
+//
+// The camera is not reachable this way — `map.setPadding` takes a number — so a map reads the same
+// measure through `sidePanelInsetPx()` instead. One module, two consumers, no third copy.
+const insetVar = computed(() => CANVAS_INSET_VAR[props.side]);
+watchEffect((onCleanup) => {
+  const parent = el.value?.parentElement;
+  if (!parent || !overlay.value) return;
+  const prop = insetVar.value;
+  const covered = open.value && !narrow.value;
+  // ★ ONE gutter, not two: this is the strip the panel physically OCCUPIES — its own outer gutter plus
+  // its width. The HUD adds it to a safe inset and its areas then apply the chrome gutter as their own
+  // padding, so publishing a trailing gutter here would be counted twice and leave a 32px trough
+  // between the panel and the first rail item where every other pair of chrome shares 16 (measured).
+  // The CAMERA is the opposite case and keeps both gutters — see sidePanelInsetPx: a marker parked
+  // flush against the panel's edge reads as hidden behind it, so it wants clearance the rails do not.
+  parent.style.setProperty(prop, covered ? `calc(${width.value} + ${SIDE_PANEL_GUTTER_PX}px)` : '0px');
+  // ★ The inset alone makes followers JUMP: they get the new value in one frame while the panel takes its
+  // full travel to arrive, so a gesture that is one movement renders as three separate events. Publishing
+  // the duration too lets them run on the panel's clock — including its asymmetry, since a fast exit that
+  // the HUD glides out of over 240ms trails the panel visibly.
+  //
+  // Resolved to a time here rather than passed as `var(--motion-slow)`: the map reads this from JS and
+  // has no way to resolve a token, and one resolver is better than two that can disagree.
+  const token = open.value ? '--motion-slow' : '--motion-fast';
+  parent.style.setProperty(
+    CANVAS_INSET_DURATION_VAR,
+    getComputedStyle(parent).getPropertyValue(token).trim() || '0ms',
+  );
+  onCleanup(() => {
+    parent.style.removeProperty(prop);
+    parent.style.removeProperty(CANVAS_INSET_DURATION_VAR);
+  });
+});
+onBeforeUnmount(() => ro?.disconnect());
+// ── Placement, and the two motions it implies ─────────────────────────────────────────────────────
+// The behaviours travel differently, so the motion doctrine sorts them into different buckets. Neither
+// is a taste call — both are read off the tokens' own definitions (@humanforest/tokens/motion/motion.css).
+//
+//   PUSH collapses by WIDTH, so the content beside it widens in sympathy — but the panel is ENTERING and
+//   LEAVING, not resizing. `ease-in-out` belongs to the persistent case the doctrine names (the tabs
+//   indicator, the nav resize, the app rail's collapse: an element visible in BOTH states, changing size).
+//   Read as travel-along-an-axis this looked like the same thing; it is not, and the difference is
+//   audible. ★ MEASURED with ease-in-out (cubic-bezier(0.77, 0, 0.175, 1), an easeInOutQuart): the column
+//   moved 50px in the first 92ms, then 158px in the next 41ms — a ~4px/ms burst through the middle, with
+//   the pushed text rewrapping all the way through it. That mid-travel snap is what reads as jank; the
+//   content was tracking perfectly the whole time. So: `ease-out`, monotonically decelerating, same as the
+//   overlay, with the same enter/exit asymmetry.
+//
+//   OVERLAY enters and leaves the surface. Enters and exits take `ease-out` — `ease-in-out` would ease
+//   IN at the start of the exit, and ease-in is banned outright for starting slow at the moment the user
+//   is watching. And the two directions are NOT symmetric: `slow` for the enter (a slideover panel's
+//   travel), `fast` for the exit, because the doctrine buckets overlay EXITS there — a dismissal should
+//   get out of the way rather than perform its departure.
+//
+// The reduced-motion floor in the motion tokens covers the opt-out for both, globally.
+const wrapperClass = computed(() => [
+  overlay.value
+    ? [
+        'pointer-events-none absolute inset-y-0 z-20 flex p-(--forest-chrome-gutter)',
+        props.side === 'start' ? 'start-0' : 'end-0',
+        'transition-[translate,opacity] ease-(--motion-ease-out)',
+        open.value
+          ? 'translate-x-0 opacity-100 duration-(--motion-slow)'
+          : [
+              'opacity-0 duration-(--motion-fast)',
+              props.side === 'start' ? '-translate-x-full rtl:translate-x-full' : 'translate-x-full rtl:-translate-x-full',
+            ],
+      ]
+    : [
+        'h-full shrink-0 overflow-hidden',
+        // ★ `side` has to mean the same thing in both behaviours. Overlay anchors itself, but a push
+        // panel is a FLOW item, so without this its position would come from where it happens to be
+        // authored and `side="end"` would only flip which edge carries the hairline — the prop would
+        // silently do nothing about the side. `order-last` puts it after its siblings whatever the
+        // markup order, and is inert when it is already last. (Its container is a flex row either
+        // way: a push panel has nothing to push otherwise.)
+        props.side === 'end' && 'order-last',
+        'transition-[width] ease-(--motion-ease-out)',
+        open.value ? 'duration-(--motion-slow)' : 'duration-(--motion-fast)',
+      ],
+  narrow.value && 'w-full',
+]);
+const wrapperStyle = computed(() => {
+  if (narrow.value) return undefined;
+  return overlay.value ? undefined : { width: open.value ? width.value : '0px' };
+});
+// The column itself. Overlay takes the canvas-chrome surface (translucent + blurred, so the map stays
+// legible as context through its own controls); push is a flush column with the hairline edge that
+// separates it from the content beside it.
+//
+// ★ THE RING AND THE RADIUS BELONG TO `inner`, AND ONLY THERE. The floating variant already rings the
+// inner and gives it the radius, so adding either to the root draws a SECOND rounded rectangle around
+// the first — visibly, because the same variant's `collapsible="none"` compound also puts `p-4` on the
+// root, holding the two frames 16px apart.
+//
+// ★ `p-0` cancels that compound's padding, and it is a measurement fix rather than a cosmetic one. The
+// root is `w-(--sidebar-width)` and border-box, so its own padding comes OUT of the panel: at `lg` the
+// root measured 352px while the visible column was 320 (measured), i.e. the size rung quietly delivered
+// 20rem where it promised 22, and the strip the camera was told to keep clear no longer matched what was
+// covered. The gutter an overlay floats in is the wrapper's, once — the same --forest-chrome-gutter
+// every HUD card is inset by, which is what puts a panel and a rail card on one line.
+const sidebarUi = computed(() => ({
+  root: ['h-full', narrow.value ? 'w-full' : '', overlay.value ? 'pointer-events-auto p-0' : '']
+    .filter(Boolean)
+    .join(' '),
+  // ★ NO DIVIDERS on the canvas cut. Stock's skeleton rules its header, body and footer apart, which is
+  // right on a page and wrong over a map: the panel is a pane of glass on a moving, already-busy surface,
+  // and every line inside it competes with the map's own. The push cut keeps them — there the panel sits
+  // against a static page, where a rule reads as structure rather than as a seam in the glass.
+  // ★ The header loses its height FLOOR. Stock's `min-h-(--ui-header-height)` exists so the app rail's
+  // header lines up with the navbar beside it — a shell-level alignment. This panel is container-scoped:
+  // there is no navbar on its row, so the floor only made its title sit in a 48px box while a card two
+  // inches away sat in a 38px one, on the same canvas. `p-4 pb-0` is the card's own header rhythm, so a
+  // panel title and a card title share a baseline instead of nearly sharing one.
+  header: 'min-h-0 p-4 pb-0',
+  inner: overlay.value ? 'forest-canvas-chrome divide-y-0' : '',
+}));
+</script>
+<template>
+  <div ref="el" :class="wrapperClass" :style="wrapperStyle">
+    <USidebar
+      collapsible="none"
+      :variant="overlay ? 'floating' : 'sidebar'"
+      :side="side === 'start' ? 'left' : 'right'"
+      :title="title"
+      :description="description"
+      :style="{ '--sidebar-width': narrow ? '100%' : width }"
+      :ui="sidebarUi"
+    >
+      <template v-if="$slots.header" #header="slotProps">
+        <slot name="header" v-bind="slotProps" />
+      </template>
+      <template v-if="showClose" #actions>
+        <slot name="actions" />
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          aria-label="Close panel"
+          @click="open = false"
+        />
+      </template>
+      <template v-else-if="$slots.actions" #actions>
+        <slot name="actions" />
+      </template>
+      <slot />
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
+    </USidebar>
+  </div>
+</template>