@humanforest/frames 0.3.7 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,93 @@
 
 Every @humanforest package shares one version, so one entry covers all seven packages. Newest first.
 
+## 0.5.0 — 2026-10-25
+
+### Breaking changes
+
+- **ui**: let a sidebar nav item carry its own badge
+
+### Features
+
+- **ui**: let a HUD card centre between its band's rails
+
+### Fixes
+
+- **ui**: keep `center` off the HUD's bottom card
+- **ui**: drop the page-level scrollbar gutter
+- **ui**: the map search glyph is sized, not padded
+
+## 0.4.0 — 2026-09-15
+
+### Features
+
+- **docs**: the llms mirror prints a section kicker under its heading
+- **frames**: FFitFrame fits a slot that sizes itself
+- **charts**: a sparkline's area fades from its line to the floor
+- **charts**: the calendar month rule boxes each month in a toned line
+- **docs**: the llms mirror heads a non-prop table by its own column
+- **docs**: the llms mirror names the module a page destructures
+- **docs**: the llms mirror renders section loops
+- **docs**: the llms mirror resolves plain strings a page imports
+- **docs**: DemoStage puts a demo's controls above the specimen
+- **docs**: the llms mirror names each code tab in a ProseCodeGroup
+- **docs**: the llms mirror renders guidance cards and imported arrays
+
+### Fixes
+
+- **ui**: the scroll fade follows content that changes after mount
+- **ui**: map drawing places a corner only for a press on the map
+- **ui**: the scale bar measures at the centre and hides off the globe
+- **ui**: geolocate stays active through a location error while tracking
+- **ui**: map search names only a rendered row in aria-activedescendant
+- **ui**: a context menu that reopens elsewhere takes focus again
+- **ui**: map overlays add layers after the frame, not during placement
+- **ui**: the map context menu wires nothing on a non-interactive map
+- **ui**: map search rings kept focus and never sends a pair to suggest
+- **ui**: fullscreen reads nothing without a fullscreen API
+- **ui**: geolocate is a plain action with track off
+- **ui**: coordinates read Mapbox's 512px world and name the copied pair
+- **docs**: chord, treemap and sankey demos keep their heights
+- **charts**: resolveVar leaves the document alone without a DOM
+- **docs**: the battery-swap stage keeps its start edge reachable
+- **docs**: foundations and layout diagrams fit a phone
+- **docs**: device frames scale down to fit a phone's pane
+- **docs**: component specimens fit a phone's preview pane
+- **filter**: the chip's number segments drop their steppers
+- **docs**: the table page's pager drops its arrows on a phone
+- **filter**: a chip wider than its bar wraps its segments
+- **tokens**: the display role steps down to 4xl below 40rem
+- **tokens**: long inline code wraps instead of overflowing its column
+- **docs**: long inline code and prop types wrap instead of widening main
+- **ui**: a vehicle mark's badge outline follows its edge
+- **ui**: ramp swatches abut and round only the ramp's ends
+- **docs**: a context switch keeps a page's live demos mounted
+- **ui**: a bound popup closes on a second click and unbinds on unmount
+- **ui**: a marker is a button only when it acts as one
+- **ui**: FMap applies every padding side and logs each map error
+- **ui**: a track slice no longer bridges a signal gap
+- **ui**: track playback keeps the playhead when the speed changes
+- **ui**: balance maps paint by magnitude, and legends label exactly
+- **charts**: the tooltip snap looks for its panel on pointer entry
+- **ui**: unavailable reasons name a state by its label
+- **ui**: zones ignore a kind they do not know
+- **ui**: a selected vehicle takes its new state on resync
+- **docs**: a cross-page anchored link lands on its target
+- **ui**: useMapReady never runs for a caller that has unmounted
+- **tokens**: area fills keep their opacity under data-theme dark
+- **charts**: crosshair dots sit on stacked band tops
+- **charts**: a fitted London map labels only the areas it draws
+- **charts**: a missing reading breaks a line sparkline
+- **charts**: a dotted map's missing values add nothing
+- **charts**: a selectable London map is reachable at every size
+- **charts**: cell tracks and grids take one Tab stop, props read live
+- **docs**: urgent vehicles draw on top of the fleet
+- **ui**: alt shortcuts select, and deleted features leave the selection
+- **ui**: a crossing edit springs back, and a drag reports once
+- **ui**: selected markers rise, popups are named, one button opens them
+- **ui**: the coordinate tile stays copyable as the pointer moves onto it
+- **ui**: the scale bar's fill is as long as the distance it names
+
 ## 0.3.7 — 2026-09-13
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/frames",
-  "version": "0.3.7",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "src",

package/src/FFitFrame.vue

@@ -18,8 +18,9 @@ import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 const props = withDefaults(
   defineProps<{
-    /** Logical width the slot lays out at, whatever the space available. */
-    width: number;
+    /** Logical width the slot lays out at, whatever the space available. Omit it for a slot with a
+     *  fixed size of its own, such as a device frame, and its measured width is used. */
+    width?: number;
     /** Largest scale to draw at, so a wide page does not render the specimen at 1:1. */
     maxScale?: number;
   }>(),
@@ -33,6 +34,7 @@ const PAD_BOTTOM = 24;
 
 const inner = ref<HTMLElement | null>(null);
 const wrapper = ref<HTMLElement | null>(null);
+const naturalW = ref(0);
 const naturalH = ref(0);
 const availW = ref(0);
 
@@ -40,7 +42,7 @@ const availW = ref(0);
 // component's mounted hook runs, and a missed attach leaves the wrapper unsized with no visible error.
 // No loop between the two: the slot's unscaled height is fixed by its own content, and the wrapper's
 // width is its block width — neither depends on the scale derived from them.
-const innerRO = new ResizeObserver(([e]) => { naturalH.value = e!.contentRect.height; });
+const innerRO = new ResizeObserver(([e]) => { naturalW.value = e!.contentRect.width; naturalH.value = e!.contentRect.height; });
 const wrapRO = new ResizeObserver(([e]) => { availW.value = e!.contentRect.width; });
 watch(inner, (el) => { innerRO.disconnect(); if (el) innerRO.observe(el); }, { immediate: true, flush: 'post' });
 watch(wrapper, (el) => { wrapRO.disconnect(); if (el) wrapRO.observe(el); }, { immediate: true, flush: 'post' });
@@ -48,7 +50,12 @@ onBeforeUnmount(() => { innerRO.disconnect(); wrapRO.disconnect(); });
 
 // ★ SCALE TO FIT, capped. A fixed factor overflows its container the moment the page is narrower than
 // width × scale — the slot's layout width never changes, so nothing else absorbs it.
-const fit = computed(() => (availW.value ? Math.min(props.maxScale, availW.value / props.width) : props.maxScale));
+// The wrapper needs a width of its own to fit into: inside a shrink-to-fit parent it takes the slot's
+// width, and the frame never scales.
+const fit = computed(() => {
+  const w = props.width ?? naturalW.value;
+  return availW.value && w ? Math.min(props.maxScale, availW.value / w) : props.maxScale;
+});
 
 // Height the scaled frame actually takes on the page. 0 until measured, so nothing jumps.
 const reservedH = computed(() =>