@fairgarden/design 0.1.0-0.canary.0

package/data/figure/figure.module.css

@@ -0,0 +1,162 @@
+/*
+ * Figure (§8.5). CVA function `figure`. Color roles: caption, label and
+ * credit --role-muted; technical frames --role-rule; the plate, a nested
+ * white face Ground: its ground, its --role-edge frame (--primary10 on a
+ * page ground, --primary12 as an island) [D179] and pattern-dotgrid-fine in
+ * its --role-hairline (the plate modifier). No secondary part. Colors are
+ * role variables only.
+ *
+ * Layout: the `figure` is an inline-size container on a 12-track grid;
+ * media and caption span it, and the side caption takes the last three
+ * tracks from 768 px of it, after the media in source and visual order.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.label {
+  composes: typeData typeMuted from '../../utils/type.module.css';
+}
+
+.text {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.credit {
+  composes: typeSmall typeMuted from '../../utils/type.module.css';
+}
+
+.plateMedia {
+  composes: patternDotgridFine patternPlate from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  .base {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--fgd-space-margin);
+    row-gap: var(--size-px-2);
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  .media,
+  .caption {
+    grid-column: 1 / -1;
+    min-inline-size: 0;
+  }
+
+  .media {
+    margin: 0;
+  }
+
+  .media > img,
+  .media > svg,
+  .media > picture,
+  .media > video,
+  .media > canvas {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  /* The caption says what to notice; one run of label, text and credit. */
+  .caption {
+    margin: 0;
+    color: var(--role-muted);
+  }
+}
+
+@layer variants {
+  /* Editorial photo: --radius-2-25 (square when it runs full-bleed); caption right-flush below. */
+  .photo .media {
+    border-radius: var(--radius-conditional-2-25);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .photo .media > img,
+  .photo .media > picture,
+  .photo .media > video {
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  .photo .caption {
+    text-align: end;
+  }
+
+  /* Technical figure and plate: square, never bleeding, native width; caption left, label on its own line. */
+  .technical .media,
+  .plate .media {
+    border-radius: var(--radius-0);
+  }
+
+  .technical .caption,
+  .plate .caption {
+    text-align: start;
+  }
+
+  .technical .label,
+  .plate .label {
+    display: block;
+  }
+
+  .framed .media {
+    border: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /*
+   * Specimen plate: the nested white face (its Ground paints the fill) with
+   * a --border-size-1 frame in the face's --role-edge over the fine dot grid
+   * in --role-hairline; the face is its frame's fill [D12, D179].
+   */
+  .plate .plateMedia {
+    padding: var(--size-px-3);
+    border: var(--border-size-1) solid var(--role-edge);
+  }
+
+  /* Side caption, from 768 px of the figure: the adjacent column, top-aligned, beside the media. */
+  @container (width >= 768px) {
+    .sideCaption .media {
+      grid-column: 1 / span 9;
+    }
+
+    .sideCaption .caption {
+      grid-column: 10 / -1;
+      align-self: start;
+      text-align: start;
+    }
+
+    .sideCaption .label {
+      display: block;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Figure and caption stay together (§8.5). */
+    .base {
+      break-inside: avoid;
+    }
+
+    /* Content photos: grayscale in a 0.75 pt frame, no taller than --fgd-print-figure-max [D81]. */
+    .photo .media {
+      border: var(--border-size-1) solid var(--role-rule);
+      border-radius: var(--radius-0);
+    }
+
+    .photo .media > img {
+      inline-size: auto;
+      max-block-size: var(--fgd-print-figure-max);
+      filter: grayscale(1);
+    }
+
+    /* Decorative photos (empty alt) are left out. */
+    .media:has(> img[alt='']) {
+      display: none;
+    }
+  }
+}

package/data/figure/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Figure';
+//# sourceMappingURL=index.d.ts.map

package/data/figure/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/figure/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/data/figure/index.js

@@ -0,0 +1,2 @@
+export * from './Figure';
+//# sourceMappingURL=index.js.map

package/data/figure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/data/figure/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/data/map/Map.d.ts

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { MapPmtiles, MapRoute } from './types';
+export type { MapPmtiles, MapRoute } from './types';
+export declare const map: (props?: ({
+    kind?: "location" | "technical" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MapVariants = VariantProps<typeof map>;
+/** Index marker shapes (§8.10): categories are told apart by shape and index group, never by color. */
+export type MapMarkerShape = 'circle' | 'square' | 'diamond';
+/** A place on the map: a numbered index marker and its index entry. */
+export interface MapMarker {
+    /** Stable id, used for selection. */
+    id: string;
+    /** The place's name: the index entry title and the marker's accessible name. */
+    name: string;
+    /** Drawing maps: the position in drawing units. */
+    x?: number;
+    /** Drawing maps: the position in drawing units. */
+    y?: number;
+    /** Vector (PMTiles) maps: longitude in degrees. */
+    lon?: number;
+    /** Vector (PMTiles) maps: latitude in degrees. */
+    lat?: number;
+    /** The index group head (a category), e.g. "Gardens". */
+    group?: string;
+    /** The marker's category shape. Default `circle`. */
+    shape?: MapMarkerShape;
+    /** Details shown when the entry is selected, in the index; printed expanded. */
+    details?: React.ReactNode;
+}
+/** A live text label on the map, kept at screen size on a halo plate. */
+export interface MapLabel {
+    /** Stable id. */
+    id: string;
+    /** The label text, e.g. "Lake". */
+    text: string;
+    /** Drawing maps: the label's center in drawing units. */
+    x?: number;
+    /** Drawing maps: the label's center in drawing units. */
+    y?: number;
+    /** Vector (PMTiles) maps: longitude in degrees. */
+    lon?: number;
+    /** Vector (PMTiles) maps: latitude in degrees. */
+    lat?: number;
+}
+/** The §8.10 encodings a drawing uses: pattern fills and line classes, unique to this map. */
+export interface MapDrawingKit {
+    /**
+     * Area fills as `url(#…)` strings for a shape's `fill`: `water` (hatch
+     * 45° in --primary12), `green` (dot screen 1.25 px at 6 px in the odd slot
+     * ink), `planned` (hatch 135°, always with a label). Add `line.area` for
+     * the shape's --border-size-1 --primary12 edge.
+     */
+    fill: {
+        water: string;
+        green: string;
+        planned: string;
+    };
+    /**
+     * Classes for strokes and outlines: `boundary` (line-solid 1 px),
+     * `subdivision` (line-dotted-fine), `road` / `street` / `path` (solid 2 /
+     * 1.5 / 1 px), `building` (ground face, 1 px outline), `area` (the edge of
+     * a patterned area), `route` (line-dashed in --role-accent), `altRoute`
+     * (line-dashed in --primary12). Strokes never scale with zoom.
+     */
+    line: {
+        boundary: string;
+        subdivision: string;
+        road: string;
+        street: string;
+        path: string;
+        building: string;
+        area: string;
+        route: string;
+        altRoute: string;
+    };
+}
+/** A drawn base map: an SVG drawing in its own units, in role variables. */
+export interface MapDrawing {
+    /** The drawing's width in its own units; with `height`, the frame's aspect ratio. */
+    width: number;
+    /** The drawing's height in its own units. */
+    height: number;
+    /**
+     * Draws the map's SVG content in drawing units, using the kit's fills and
+     * line classes and role-variable strokes. Put text in `labels`, not here,
+     * so it keeps its size when zoomed.
+     */
+    render: (kit: MapDrawingKit) => React.ReactNode;
+    /** The reset zoom step. Default 0, the whole drawing. */
+    zoom?: number;
+    /** The deepest zoom step; each step doubles the scale. Default 3. */
+    maxZoom?: number;
+    /** The reset center in drawing units. Default: the drawing's center. */
+    center?: readonly [number, number];
+}
+/** Interface strings, for localization. */
+export interface MapMessages {
+    /** Default "Zoom in". */
+    zoomIn: string;
+    /** Default "Zoom out". */
+    zoomOut: string;
+    /** Default "Reset map view". */
+    reset: string;
+    /** The toolbar's accessible name. Default "Map controls". */
+    toolbar: string;
+    /** How to operate the map, read with the frame. */
+    instructions: string;
+    /** The announced zoom step. Default "Zoom 2 of 4". */
+    zoomStatus: (level: number, levels: number) => string;
+    /** The index's accessible name. Default "Index". */
+    index: string;
+}
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+/** Props for Map: `div` props plus the base map, the markers, the figure text and the print extras. */
+export type MapProps = Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> & {
+    /**
+     * `technical` (default): --radius-0, a --border-size-1 --role-rule
+     * frame. `location`: --radius-3-25, a --border-size-2 --primary12 frame,
+     * always with a mixed-case `address`.
+     */
+    kind?: MapVariants['kind'];
+    /** The caps title above the map, with "(DETAIL)" for crops; also the frame's accessible name. */
+    title: string;
+    /** The caption below the map: what to notice. */
+    caption?: React.ReactNode;
+    /** The figure label, e.g. "Fig. 4". */
+    figureLabel?: React.ReactNode;
+    /** The text address, mixed case; required with `kind="location"`. */
+    address?: React.ReactNode;
+    /** A drawn base map. Pass `drawing` or `pmtiles`. */
+    drawing?: MapDrawing;
+    /**
+     * A vector base map: a Protomaps PMTiles archive drawn by MapLibre GL JS
+     * in the role variables. Pass `drawing` or `pmtiles`. Needs the optional
+     * peers `maplibre-gl`, `pmtiles` and `@protomaps/basemaps`, and MapLibre's
+     * worker URL under bundlers (`pmtiles.workerUrl`).
+     */
+    pmtiles?: MapPmtiles;
+    /** Routes over a vector base map (a drawing draws its own with `kit.line.route`). */
+    routes?: readonly MapRoute[];
+    /** The places, numbered in this order (01, 02 …) and listed in the index. */
+    markers?: readonly MapMarker[];
+    /** Live text labels (areas, water) at screen size. */
+    labels?: readonly MapLabel[];
+    /** The selected marker's id (controlled). */
+    selected?: string | null;
+    /** The initially selected marker's id. */
+    defaultSelected?: string | null;
+    /** Called when the selection changes, from a marker or the index. */
+    onSelectedChange?: (id: string | null) => void;
+    /** Heading level of the index entries. Default 3. */
+    headingLevel?: HeadingLevel;
+    /**
+     * The static figure printed instead of the live base, e.g. a black-line
+     * export at the reset extent. Without it, a drawing prints at its reset
+     * extent, and a vector map prints a snapshot of its reset extent in the
+     * print palette, rendered once the map settles.
+     */
+    printFallback?: React.ReactNode;
+    /** The map's URL, printed in `type-url` beside the QR code [D168]. */
+    url?: string;
+    /** A QR code for `url` as inline SVG, printed at --fgd-print-qr beside the URL, never instead of it. */
+    qr?: React.ReactNode;
+    /**
+     * One ink: area patterns in --primary12 (a vector map also hatches its
+     * water). Pass it on any ground but a light base or a `white` plate
+     * (§8.10). Default `false`.
+     */
+    oneInk?: boolean;
+    /** Primary Radix scale: lines, markers, labels. Never defaulted [D133]. */
+    primary?: MapVariants['primary'];
+    /** Secondary Radix scale: odd-slot area patterns. Never defaulted [D133]. */
+    secondary?: MapVariants['secondary'];
+    /** Interface strings. */
+    messages?: Partial<MapMessages>;
+};
+/**
+ * A map figure (§8.10) with the pan-and-zoom interactive map of v1 [D169]:
+ * a caps title, an in-flow Toolbar (zoom in, zoom out, reset view), the
+ * framed map with numbered index markers, the caption, and the index, an
+ * Accordion that is the complete non-visual route to every place.
+ * Selecting an index entry pans its marker into view and opens its
+ * details; selecting a marker opens its entry. Print shows the static map
+ * at the reset extent (or `printFallback`), the full index, and the URL
+ * beside its QR code.
+ */
+export declare function Map(props: MapProps): React.JSX.Element;
+//# sourceMappingURL=Map.d.ts.map

package/data/map/Map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../src/data/map/Map.tsx"],"names":[],"mappings":"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"}