@humanforest/nuxt-layer 0.3.2 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@humanforest/nuxt-layer",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Forest design system as a Nuxt layer — extend it to inherit the theme, colour roles, icons and brand fonts in one line.",
   "main": "./nuxt.config.ts",
   "files": [

package/packages/charts/src/FSparkline.vue

@@ -18,6 +18,7 @@ import { VisXYContainer, VisLine, VisArea } from '@unovis/vue';
 import { CurveType } from '@unovis/ts';
 import { motionDuration } from './motionDuration';
 import { useThemeVersion } from './useThemeVersion';
+import { sparklineDomain } from './sparklineDomain';
 
 const props = withDefaults(
   defineProps<{
@@ -50,6 +51,12 @@ const props = withDefaults(
     area?: boolean;
     /** Marks the last point, so the series has an end rather than running off the edge. */
     endpoint?: boolean;
+    /**
+     * Takes the height its container gives it, with `height` as the floor. For a graphic in a space
+     * its surroundings have made taller (a KPI's chart row that a stretched card or a group has given
+     * more height), where the chart is the part that should grow. Works for both marks.
+     */
+    fill?: boolean;
     /**
      * Monotone interpolation, on by default. Monotone rather than a plain spline: it stays inside
      * the data's own range, so no peak appears between two points that neither of them reached.
@@ -71,7 +78,7 @@ const props = withDefaults(
      */
     mark?: 'line' | 'bar';
   }>(),
-  { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
+  { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, fill: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
 );
 
 if (import.meta.env.DEV) {
@@ -94,23 +101,18 @@ type Point = { i: number; v: number | null; c: number | null };
 const points = computed<Point[]>(() =>
   props.data.map((v, i) => ({ i, v, c: props.compare?.[i] ?? null })),
 );
+// Readings are plotted as their height above the frame's floor, which is 0 except under `area`.
 const x = (d: Point) => d.i;
-const y = (d: Point) => d.v;
-const yCompare = (d: Point) => d.c;
+const y = (d: Point) => (d.v === null ? null : d.v - frame.value.floor);
+const yCompare = (d: Point) => (d.c === null ? null : d.c - frame.value.floor);
 
 const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !== undefined));
 
 // The line marks share one scale, framed by the floor and ceiling of everything drawn on it — a
-// line reads as a shape, and a shape wants its own range. Set by hand because an Unovis area is
-// measured from a baseline: left to itself, `area` pulls the floor to zero and flattens the line it
-// is filling under. `null` when there is nothing to draw, so the container keeps its own fallback.
-const domain = computed<[number, number] | null>(() => {
-  const vals = [...props.data, ...(props.compare ?? [])].filter((v): v is number => typeof v === 'number');
-  return vals.length ? [Math.min(...vals), Math.max(...vals)] : null;
-});
-// An area is a band from its baseline to baseline + y, not a fill up to y, so reaching the line
-// from the floor of the frame means passing the height above that floor.
-const yFromFloor = (d: Point) => (d.v === null || !domain.value ? null : d.v - domain.value[0]);
+// line reads as a shape, and a shape wants its own range. The frame, and why `area` shifts it to
+// start at 0, live in sparklineDomain. An area is a band from its baseline to baseline + y, so with
+// the floor at 0 it runs from 0 up to each reading's height above the floor.
+const frame = computed(() => sparklineDomain(props.data, props.compare, props.area));
 
 // Bars are the exception: they are measured from zero, not from the data's own floor. A bar reads
 // as a LENGTH, and a bar that starts anywhere but zero has a length no longer proportional to its
@@ -148,21 +150,21 @@ const last = computed(() => {
 });
 // Fraction of the height the final point sits at, for the endpoint dot.
 const endpointTop = computed(() => {
-  const [lo, hi] = domain.value ?? [0, 0];
+  const [lo, hi] = frame.value.domain ?? [0, 0];
   if (last.value === null || hi === lo) return 50;
-  return (1 - (last.value - lo) / (hi - lo)) * 100;
+  return (1 - (last.value - frame.value.floor - lo) / (hi - lo)) * 100;
 });
 </script>
 
 <template>
-  <div class="relative w-full" :style="{ height: `${height}px`, color }">
+  <div class="relative w-full" :class="fill ? 'h-full' : ''" :style="fill ? { minHeight: `${height}px`, color } : { height: `${height}px`, color }">
     <!-- Plain DOM rather than a mark: there are no axes, scales or tooltip to share with the XY
          container, so a flex row of columns is the whole implementation and costs no chart runtime.
          The 2px gap is fixed, so the bucket count sets how thin the bars get: n buckets across w
          pixels leaves (w - 2(n - 1)) / n each. A tile 280px wide holds 12 buckets at 21px and 60 at
          2.7px — still bars; past roughly 60 the gap outweighs the bar and the row reads as a
          texture, where the measure belongs to a line instead. -->
-    <div v-if="mark === 'bar'" class="flex h-full w-full items-end gap-0.5" aria-hidden="true">
+    <div v-if="mark === 'bar'" class="flex w-full items-end gap-0.5" :class="fill ? 'absolute inset-0' : 'h-full'" aria-hidden="true">
       <span
         v-for="(v, i) in data"
         :key="i"
@@ -180,14 +182,19 @@ const endpointTop = computed(() => {
     <!-- No bottom margin: the graphic sits on the tile's own bottom edge, and 2px of clearance
          there reads as a misaligned card rather than as breathing room. The top keeps its 2px so a
          peak is not clipped by the stroke's own width, and the right reserves room for the endpoint
-         dot when there is one. -->
+         dot when there is one. Under `fill` the container is laid over the root rather than sizing
+         it: the root takes the space it is given, floored at `height`, and Unovis measures that box,
+         never its own SVG (which would feed back) and never its 300px fallback for an empty box.
+         An inline style, not a utility: Unovis's own stylesheet pins `.unovis-xy-container` to
+         `position: relative`, and a class loses to it. -->
     <VisXYContainer
       v-else
       :key="themeVersion"
+      :style="fill ? { position: 'absolute', inset: '0' } : undefined"
       :data="points"
-      :height="height"
+      :height="fill ? undefined : height"
       :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
-      :y-domain="domain ?? undefined"
+      :y-domain="frame.domain ?? undefined"
       :duration="motionDuration('slow')"
     >
       <!-- Comparison first, so the current series draws over it. Dashed and thinner: the dash says
@@ -203,7 +210,7 @@ const endpointTop = computed(() => {
         :opacity="0.45"
         :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear"
       />
-      <VisArea v-if="area" :x="x" :y="yFromFloor" :baseline="domain?.[0] ?? 0" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
+      <VisArea v-if="area" :x="x" :y="y" :baseline="0" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
       <VisLine :x="x" :y="y" :color="color" :line-width="1.5" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
     </VisXYContainer>
     <span

package/packages/charts/src/sparklineDomain.ts

@@ -0,0 +1,25 @@
+/**
+ * The frame a sparkline's line marks are plotted in: the floor and ceiling of everything drawn,
+ * shared by the series and its comparison, or null when there is nothing to draw so the container
+ * keeps its own fallback. Set by hand because an Unovis area is measured from a baseline: left to
+ * itself, `area` pulls the floor to zero and flattens the line it is filling under.
+ *
+ * Under `area` the frame starts at 0 and every reading is plotted as its height above the floor.
+ * Unovis insets a line's scale by half its stroke unless the domain starts at 0, and the area shares
+ * that scale, so from a non-zero floor the fill stopped 0.75px above the bottom edge: a hairline of
+ * card under the chart. From 0 the fill meets the edge, and the line's lowest point gives the lower
+ * half of its stroke to that edge, where the graphic sits anyway. A plain line keeps its range and
+ * its whole stroke.
+ */
+export function sparklineDomain(
+  data: (number | null)[],
+  compare: (number | null)[] | undefined,
+  area: boolean,
+): { floor: number; domain: [number, number] | null } {
+  const vals = [...data, ...(compare ?? [])].filter((v): v is number => typeof v === 'number');
+  if (!vals.length) return { floor: 0, domain: null };
+  const lo = Math.min(...vals);
+  const hi = Math.max(...vals);
+  const floor = area ? lo : 0;
+  return { floor, domain: [lo - floor, hi - floor] };
+}

package/packages/ui/src/card/FInsetCard.vue

@@ -117,13 +117,20 @@ const props = withDefaults(
      * body rather than the card's.
      */
     flush?: boolean;
+    /**
+     * The card fills the height its row gives it instead of hugging its content, so cards in a row
+     * end level. Only for content that can take the extra height: an FKpi whose chart is a
+     * `fill` sparkline grows into it. A fixed-height chart, a table or a line of text cannot, and the spare height
+     * lands as a gap under it.
+     */
+    stretch?: boolean;
 
     /** Footer action label. `to` makes it a link; without one it is a button. */
     action?: string;
     to?: string;
 
   }>(),
-  { gap: 8, outlined: true, bare: false, flush: false },
+  { gap: 8, outlined: true, bare: false, flush: false, stretch: false },
 );
 
 const slots = useSlots();
@@ -151,8 +158,11 @@ if (import.meta.env.DEV) {
 // Set as a var rather than a class so the radius follows it.
 const style = computed(() => ({ '--forest-card-pad': PAD[props.gap] }));
 
+// Under `stretch` the body takes whatever height the card is given beyond its strip.
 const ui = computed(() => ({
-  body: hasFooter.value ? BODY.footer : hasHeader.value ? BODY.header : BODY.none,
+  body: [hasFooter.value ? BODY.footer : hasHeader.value ? BODY.header : BODY.none, props.stretch ? 'flex-1' : '']
+    .filter(Boolean)
+    .join(' '),
   header: STRIP.header,
   footer: STRIP.footer,
 }));
@@ -175,13 +185,15 @@ const ui = computed(() => ({
 // ★ `h-fit` IS LOAD-BEARING, not a layout preference. A grid or flex row stretches its children by
 // default, and a stretched card grows past its content — the extra height lands BELOW the box, so
 // the even inset turns into a lopsided gap at the bottom and the frame stops reading as a frame.
-// The card must hug its content vertically.
+// The card must hug its content vertically. `stretch` drops it for a row whose cards should end
+// level: the card becomes a flex column and its body takes the spare height, which only reads well
+// when the content can grow into it.
 // ⚠ NOT `self-start`, which was the first cut: `align-self` acts on the CROSS axis, so in a flex
 // COLUMN it stops the card filling the width instead of capping its height — the card shrank to its
 // content in every column layout. `h-fit` caps the height and leaves width alone, which is the axis
 // actually at issue.
 const rootClass = computed(() =>
-  ['h-fit', props.outlined ? 'ring ring-[var(--forest-card-ring)]' : ''].filter(Boolean).join(' '),
+  [props.stretch ? 'flex flex-col' : 'h-fit', props.outlined ? 'ring ring-[var(--forest-card-ring)]' : ''].filter(Boolean).join(' '),
 );
 
 // ★ THE BOX IS ALWAYS RAISED — there is no ramp option, on purpose. Letting the nesting ladder fill
@@ -197,7 +209,7 @@ const rootClass = computed(() =>
 // pads at ≥640px. The box keeps its own overflow-hidden either way, which is what clips a flush
 // child to the rounded corner; a child that must scroll (UTable) already scrolls itself.
 const boxUi = computed(() => ({
-  root: `bg-[var(--forest-card-inset)] ${PAD_CLASS[props.gap]}`,
+  root: `bg-[var(--forest-card-inset)] ${PAD_CLASS[props.gap]}${props.stretch ? ' h-full' : ''}`,
   ...(props.flush ? { body: 'p-0 sm:p-0' } : {}),
 }));
 
@@ -209,7 +221,7 @@ const boxUi = computed(() => ({
 //     expression, so `visual-fit="bleed"` still zeroes the bottom and meets both edges. A padding
 //     class cannot do this: FKpi merges `ui.root` last, so a `pb-4` here would beat the bleed's `pb-0`.
 const selfBoxUi = computed(() => ({
-  root: `bg-[var(--forest-card-inset)] [--forest-kpi-pad:1rem] ${PAD_CLASS[props.gap]}`,
+  root: `bg-[var(--forest-card-inset)] [--forest-kpi-pad:1rem] ${PAD_CLASS[props.gap]}${props.stretch ? ' h-full' : ''}`,
 }));
 </script>
 

package/packages/ui/src/kpi/kpi.theme.ts

@@ -22,8 +22,8 @@ export const kpiTheme = tv({
     // bleed pulls by the same expression, so the graphic meets the edge the padding leaves.
     //
     // No row template: the rows are implicit, one per part present, so a tile without a visual has
-    // no empty track under its caption, and no gap in front of one. A grouped tile takes its rows
-    // from the group instead (`aligned`).
+    // no empty track under its caption, and no gap in front of one. A visual adds a flexible last
+    // row (`visualFit`); a grouped tile takes its rows from the group instead (`aligned`).
     //
     // One explicit minmax(0,1fr) column: without it the implicit column sizes to max-content, and a
     // chart with an intrinsic width (Unovis defaults to 300px) makes the tile's own grid wider than
@@ -78,19 +78,22 @@ export const kpiTheme = tv({
      * carry only the first — which left every other visual undoing it with utilities at the call
      * site.
      *
-     * `bleed` (the default) is for a graphic that IS data and nothing else, a sparkline being the
-     * case: it runs through the tile's gutter to both side edges and sits on the bottom edge, which
+     * `bleed` (the default) is for a graphic that IS data and nothing else, a line or area sparkline
+     * being the case: it runs through the tile's gutter to both side edges and sits on the bottom edge, which
      * the tile reaches by zeroing its own bottom padding rather than by a negative margin — a
-     * margin would shrink the grid row and pull the graphic up over the caption.
+     * margin would shrink the grid row and pull the graphic up over the caption. Its row is the
+     * tile's last and flexible one, and the graphic spans it bottom-aligned: a tile given more
+     * height than it needs — a group's shared row, a stretched FInsetCard — grows a `fill`
+     * sparkline into the spare height and leaves any other graphic on the bottom edge.
      *
-     * `inset` is for a graphic carrying text, FDistributionBar's legend being the case. Text set
-     * against the card's edge reads as a mistake, so the padding stays. It also top-aligns, and
-     * packs the tile's rows to the top with `content-start`, so a tile stretched taller than its
-     * content keeps the extra height below the graphic rather than spread between its rows.
+     * `inset` is for bars, and for a graphic carrying text, FDistributionBar's legend being the
+     * case. Text set against the card's edge reads as a mistake, so the padding stays. It shares
+     * bleed's last, flexible row, with the graphic at the top of it: spare height lands below a
+     * graphic that cannot grow, and a `fill` sparkline grows into it.
      */
     visualFit: {
-      bleed: { root: 'pb-0', visual: 'self-end -mx-[var(--forest-kpi-pad,var(--forest-card-pad))]' },
-      inset: { root: 'content-start', visual: 'self-start' },
+      bleed: { root: 'pb-0 grid-rows-[auto_auto_auto_1fr]', visual: 'self-stretch flex flex-col justify-end -mx-[var(--forest-kpi-pad,var(--forest-card-pad))]' },
+      inset: { root: 'grid-rows-[auto_auto_auto_1fr]', visual: 'self-stretch flex flex-col justify-start' },
     },
     // A grouped tile spans exactly the rows its group declares (kpiGroupRows), so a group with no
     // visual has no empty last track and no group gap under its captions.