@humanforest/charts 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 Every @humanforest package shares one version, so one entry covers all seven packages. Newest first.
 
+## 0.5.1 — 2026-11-03
+
+### Features
+
+- **ui**: add FToggle and FToggleGroup
+- **docs**: add screen options and a width handle to recipe previews
+- **ui**: add FPasswordInput, a password field with a show/hide toggle
+- **ui**: show a bay's fill on the place mark
+- **recipes**: preview web recipes at phone, tablet or any dragged width
+- **charts,ui**: let chart frames fill the height their card gives them
+- **ui**: let an inset card's action sit in its header row
+- **ui**: one neutral disc for every vehicle marker, also when zoomed out
+- **ui**: marker tasks, selection, live pulse and FPlaceMark
+- **ui**: update the vehicle marker glyphs
+
+### Fixes
+
+- **docs**: let a recipe's live screen scroll
+- **docs**: show each recipe's name once on the index
+- **ui**: give FPlaceMark the place asset's P and house
+- **ui**: give FAppShell a main landmark and a skip link
+- **docs**: keep the battery-swap bike-ID field at 16px so iOS doesn't zoom
+- **ui**: give md buttons the md fields' 16px text on touch
+- **ui**: match md select triggers to the 16px fields on touch
+- **ui**: give each vehicle marker its state colour again
+- **recipes**: size the phone screens for the thumb and the glance
+- **recipes**: make the ops screens dense, ranked and full height
+- **recipes**: put the form and state screens on one heading scale
+- **recipes**: anchor the auth screens and tighten their hierarchy
+- **recipes**: move "Open full screen" above the preview
+- **recipes**: size phone specimens to the device frame
+- **recipes**: give the code and reset screens the sign-in frame
+- **recipes**: keep labels and warnings legible and every control visible
+- **recipes**: take state labels and battery tone from the platform
+- **recipes**: keep the phone flows doing what their comments argue
+- **recipes**: make the form recipes validate and reset as they claim
+- support exact sidebar route matching (#10)
+- **ui**: keep md text fields at 16px on touch so iOS doesn't zoom
+- **ui**: let a tap through the accuracy ring too
+- **ui**: let a tap through the position dot
+- **ui**: keep the position dot above the map's markers
+
+### Other changes
+
+- Add renovate.json
+
 ## 0.5.0 — 2026-10-25
 
 ### Breaking changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/charts",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "files": [
     "src",
@@ -29,7 +29,7 @@
     "vue": "^3.5.22"
   },
   "dependencies": {
-    "@humanforest/tokens": "^0.5.0"
+    "@humanforest/tokens": "^0.5.1"
   },
   "publishConfig": {
     "access": "public"

package/src/FChartFrame.vue

@@ -20,6 +20,7 @@ import { chartLabel, fromCategories } from './fromCategories';
 import { crosshairConfig } from './crosshairConfig';
 import { forestTooltip, type ForestTooltipOptions } from './forestTooltip';
 import { motionDuration } from './motionDuration';
+import { frameHeight, type FrameHeight } from './frameHeight';
 import { indexAxes, indexContainer } from './frameIndex';
 import { tooltipDefaults, tooltipContainer } from './presets';
 import { useThemeVersion } from './useThemeVersion';
@@ -32,7 +33,9 @@ const props = withDefaults(
     data: Datum[];
     /** Palette categories (from useChartPalette) — series order, names, colours. */
     categories: Record<string, BulletLegendItemInterface>;
-    height?: number;
+    /** The chart's height in px, or `fill` to take the height of the frame's container, floored at
+     *  FILL_MIN_HEIGHT. For a chart in a stretched card, which the card's row makes taller. */
+    height?: FrameHeight;
     /** Numeric field to plot on x (e.g. a timestamp). Default: the row index. */
     xKey?: keyof Datum & string;
     /** Blind spread onto VisXYContainer — any XYContainerConfigInterface key, presets last-wins. */
@@ -133,6 +136,9 @@ useTooltipSnap(rootEl, tipId, props.crosshair ? 'crosshair' : 'mark', () => !pro
 // propagates to marks and axes. Override via the prop or container.duration.
 const resolvedDuration = computed(() => props.duration ?? motionDuration());
 
+// The rules for `fill` live in frameHeight.ts; a number reaches the container exactly as before.
+const sizing = computed(() => frameHeight(props.height));
+
 // Theme flips and palette identity changes both remount: Unovis caches resolved colours on mount.
 const themeVersion = useThemeVersion();
 const repaintKey = computed(() =>
@@ -146,33 +152,37 @@ const repaintKey = computed(() =>
     role="img"
     :aria-label="chartLabel(categories, ariaLabel)"
     style="display: flex; flex-direction: column; gap: 0.75rem"
+    :style="sizing.root"
   >
-    <VisXYContainer
-      :key="repaintKey"
-      :data="data"
-      :height="height"
-      :duration="resolvedDuration"
-      v-bind="{ ...containerConfig, ...$attrs }"
-    >
-      <slot name="mark" :data="data" :x="acc.xAccessor" :y="acc.yAccessors" :colors="acc.colors" />
-      <VisAxis v-if="axisX !== false" v-bind="axes.axisX" />
-      <VisAxis v-if="axisY !== false" v-bind="axes.axisY" />
-      <template v-if="tooltip !== false">
-        <!-- duration 0 is deliberate, and load-bearing twice over. Unovis animates the crosshair
-             line's x through a transition, so it eases toward the row the pointer just snapped to
-             — which reads as lag on the one element that should track the pointer exactly, and
-             leaves the line's real position mid-flight while the snap is reading it as the
-             tooltip's anchor. Easing it would put the panel on the wrong side of the plot. -->
-        <VisCrosshair
-          v-if="crosshair"
-          ref="crosshairRef"
-          v-bind="crosshairProps"
-          :template="tipFn"
-          :duration="0"
-        />
-        <VisTooltip v-bind="tooltipConfig" />
-      </template>
-    </VisXYContainer>
+    <div :style="sizing.plot">
+      <VisXYContainer
+        :key="repaintKey"
+        :data="data"
+        :height="sizing.container"
+        :duration="resolvedDuration"
+        :style="sizing.host"
+        v-bind="{ ...containerConfig, ...$attrs }"
+      >
+        <slot name="mark" :data="data" :x="acc.xAccessor" :y="acc.yAccessors" :colors="acc.colors" />
+        <VisAxis v-if="axisX !== false" v-bind="axes.axisX" />
+        <VisAxis v-if="axisY !== false" v-bind="axes.axisY" />
+        <template v-if="tooltip !== false">
+          <!-- duration 0 is deliberate, and load-bearing twice over. Unovis animates the crosshair
+               line's x through a transition, so it eases toward the row the pointer just snapped to
+               — which reads as lag on the one element that should track the pointer exactly, and
+               leaves the line's real position mid-flight while the snap is reading it as the
+               tooltip's anchor. Easing it would put the panel on the wrong side of the plot. -->
+          <VisCrosshair
+            v-if="crosshair"
+            ref="crosshairRef"
+            v-bind="crosshairProps"
+            :template="tipFn"
+            :duration="0"
+          />
+          <VisTooltip v-bind="tooltipConfig" />
+        </template>
+      </VisXYContainer>
+    </div>
     <VisBulletLegend
       v-if="legend"
       :items="acc.legendItems"

package/src/FChartFrameSingle.vue

@@ -10,6 +10,7 @@ import type { BulletLegendItemInterface, TooltipConfigInterface } from '@unovis/
 // self-import through it would create a module cycle.
 import { chartLabel, fromCategories } from './fromCategories';
 import { motionDuration } from './motionDuration';
+import { frameHeight, type FrameHeight } from './frameHeight';
 import { tooltipDefaults, tooltipContainer } from './presets';
 import { useThemeVersion } from './useThemeVersion';
 import { useTooltipSnap, nextTipId } from './snapTooltip';
@@ -21,7 +22,9 @@ const props = withDefaults(
     data: Data;
     /** Optional: series colours + legend. Omit for charts that label directly (Sankey, Graph). */
     categories?: Record<string, BulletLegendItemInterface>;
-    height?: number;
+    /** The chart's height in px, or `fill` to take the height of the frame's container, floored at
+     *  FILL_MIN_HEIGHT — the same contract as FChartFrame's. */
+    height?: FrameHeight;
     /** Rendered only when given — single-container tooltips need `triggers` to show anything. */
     tooltip?: Partial<TooltipConfigInterface>;
     /** Let the panel track the pointer instead of snapping to the hovered mark. Off by default:
@@ -66,6 +69,7 @@ const tooltipConfig = computed<Partial<TooltipConfigInterface>>(() => ({
 const rootEl = ref<HTMLElement>();
 useTooltipSnap(rootEl, tipId, 'mark', () => !props.followCursor);
 const resolvedDuration = computed(() => props.duration ?? motionDuration());
+const sizing = computed(() => frameHeight(props.height));
 
 const themeVersion = useThemeVersion();
 const repaintKey = computed(() =>
@@ -79,17 +83,21 @@ const repaintKey = computed(() =>
     role="img"
     :aria-label="chartLabel(categories, ariaLabel)"
     style="display: flex; flex-direction: column; gap: 0.75rem"
+    :style="sizing.root"
   >
-    <VisSingleContainer
-      :key="repaintKey"
-      :data="data"
-      :height="height"
-      :duration="resolvedDuration"
-      v-bind="$attrs"
-    >
-      <slot name="mark" :data="data" :colors="acc.colors" />
-      <VisTooltip v-if="tooltip" v-bind="tooltipConfig" />
-    </VisSingleContainer>
+    <div :style="sizing.plot">
+      <VisSingleContainer
+        :key="repaintKey"
+        :data="data"
+        :height="sizing.container"
+        :duration="resolvedDuration"
+        :style="sizing.host"
+        v-bind="$attrs"
+      >
+        <slot name="mark" :data="data" :colors="acc.colors" />
+        <VisTooltip v-if="tooltip" v-bind="tooltipConfig" />
+      </VisSingleContainer>
+    </div>
     <VisBulletLegend
       v-if="legend && acc.legendItems.length"
       :items="acc.legendItems"

package/src/frameHeight.ts

@@ -0,0 +1,43 @@
+// How a frame's `height` reaches the chart. A number is the container's own height in px, handed to
+// Unovis as it always was. `fill` takes the height of the frame's own container instead, through CSS
+// alone: the root takes 100% of its parent, the plot box takes what the legend leaves, and the Unovis
+// host is laid over that box. Unovis measures the host when it renders, and its own ResizeObserver
+// redraws the chart when the box changes size, so the frame adds no resize handling of its own.
+//
+// ★ THE HOST IS LAID OVER THE BOX, NOT IN ITS FLOW. A Unovis container with no `height` measures its
+// host, and an in-flow host is as tall as the SVG inside it: the SVG sizes the host and the host sizes
+// the SVG, so the chart renders at Unovis's 300px fallback and stays there. Laid over the box, the
+// host adds nothing to the layout and the box's height comes from the layout alone. Inline styles,
+// not utilities: Unovis's stylesheet pins its containers to `position: relative`, and a class loses.
+//
+// Under a number the box is `display: contents`, which draws no box at all, so the host stays the
+// root's flex item exactly as it was before `fill` existed.
+
+export type FrameHeight = number | 'fill';
+
+/**
+ * The plot's floor under `fill`, in px. It holds when the container is shorter, and it is the whole
+ * height when the container has none of its own (a block in normal flow), so an unconstrained `fill`
+ * chart draws at the floor rather than collapsing to nothing. 160 sits under both frames' numeric
+ * defaults (280 and 260), so a `fill` chart never asks its row for more height than a numeric one
+ * would, and it keeps a readable band of plot between an XY chart's axes.
+ */
+export const FILL_MIN_HEIGHT = 160;
+
+type Style = Record<string, string>;
+
+/** What each layer of the frame gets: the container's `height` prop, and the root, plot box and host styles. */
+export function frameHeight(height: FrameHeight): {
+  container: number | undefined;
+  root: Style | undefined;
+  plot: Style;
+  host: Style | undefined;
+} {
+  if (height !== 'fill') return { container: height, root: undefined, plot: { display: 'contents' }, host: undefined };
+  return {
+    container: undefined,
+    root: { height: '100%' },
+    plot: { position: 'relative', flex: '1 1 0', minHeight: `${FILL_MIN_HEIGHT}px` },
+    host: { position: 'absolute', inset: '0' },
+  };
+}

package/src/index.ts

@@ -4,6 +4,7 @@
 // Importing this barrel needs an SFC pipeline (Vite/Nuxt) — everything here is browser-bound.
 export { default as FChartFrame } from './FChartFrame.vue';
 export { default as FChartFrameSingle } from './FChartFrameSingle.vue';
+export { FILL_MIN_HEIGHT, type FrameHeight } from './frameHeight';
 export { default as FChartLegend } from './FChartLegend.vue';
 // Word-sized graphic for a KPI tile's `visual` slot: shape only, no axes, no tooltip.
 export { default as FSparkline } from './FSparkline.vue';