@goway.to/maps 0.0.0-stage → 0.1.0

package/dist/MapAttribution.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Map data credit — rendered by `MapView` on every map, identical on web and
+ * native, with no prop to turn it off.
+ *
+ * Both engines ship an attribution ornament of their own (maplibre-gl's
+ * `AttributionControl`, MapLibre Native's "i" button); `MapView` disables both
+ * and draws this instead, so the credit sits inside the app's layout (chrome
+ * can be positioned against it) and looks the same on both platforms.
+ *
+ * It POSITIONS itself. A credit pinned 4 px off the window edge disappears the
+ * moment anything parks at that edge — a half-sheet, a tab bar — and it
+ * disappears silently, which for a licence obligation is the worst way to
+ * fail. Reading Bloom's bottom-edge registry here means the credit rises above
+ * whatever is claimed without either knowing about the other.
+ *
+ * ## On the right, after the mark
+ *
+ * The GoWay mark (`MapBrand`) takes the bottom-left corner and the credit the
+ * bottom-right, starting after {@link MAP_BRAND_CLEARANCE} so a credit that
+ * wraps on a narrow phone never runs under the mark.
+ *
+ * ## Compact, as the OSMF guidelines allow
+ *
+ * The OSMF Attribution Guidelines
+ * (https://osmfoundation.org/wiki/Licence/Attribution_Guidelines) accept a
+ * credit that is visible when the map loads and then collapses — after a few
+ * seconds or once the reader interacts — into a control that shows it again.
+ * That is this component's two states (`compactCredit.ts` holds the rule and
+ * its test): spelled out, with an ⓘ at the end to fold it; or just the ⓘ, in
+ * the same corner, which opens it. The links stay links.
+ *
+ * ## A disclosure rides here
+ *
+ * While an app draws something the reader must not mistake for data (GoWay's
+ * simulated traffic), the credit says so: spelled out, its first line is the
+ * whole sentence; folded, a word sits beside the ⓘ. Labelled in BOTH states,
+ * for exactly as long as it is drawn.
+ */
+import { memo, useCallback } from 'react';
+import { Linking, Pressable, StyleSheet, View, } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { localizedLabel } from '@goway.to/sdk';
+import { useBloomLocale } from '@oxy.so/bloom/locale';
+import { useBottomEdgeInset } from '@oxy.so/bloom/layout';
+import { RiInformationLine } from '@oxy.so/bloom/icons/RiInformationLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { useBrandedChrome } from './brand/BrandedChrome';
+import { useMapChromeLift } from './chromeLift';
+import { creditDisclosure } from './compactCredit';
+import { useMapCreditHeight } from './creditHeight';
+import { CREDIT_LABELS } from './creditLabels';
+import { CREDIT_GAP, MAP_CREDIT_CLEARANCE } from './creditRise';
+import { MAP_BRAND_CLEARANCE } from './MapBrand';
+/** Breathing room between the credit and whatever is below it. */
+const ATTRIBUTION_GAP = CREDIT_GAP;
+/** From the left edge when no mark is drawn there: the plate's own right inset. */
+const CREDIT_SIDE_INSET = 8;
+/**
+ * How much of the bottom-right the credit occupies above the bottom edge when
+ * it is one line (`creditRise.ts`). Bottom-right chrome a screen floats there
+ * starts above it and rises by the credit's measured extra height
+ * (`creditHeight.ts`), so the two never overlap.
+ */
+export { MAP_CREDIT_CLEARANCE };
+/**
+ * The credit GoWay's tiles oblige: OpenMapTiles' schema and OpenStreetMap's
+ * data. Always shown, before anything an app adds.
+ */
+export const MAP_DATA_CREDITS = [
+    { label: '© OpenMapTiles', href: 'https://www.openmaptiles.org/' },
+    { label: '© OpenStreetMap', href: 'https://www.openstreetmap.org/copyright' },
+];
+const NO_EXTRA = [];
+/**
+ * @param extra - credits owed while something the app draws is on screen,
+ *   after the basemap's own.
+ */
+function MapAttributionComponent({ extra = NO_EXTRA, disclosure = null, expanded, onToggle, }) {
+    const locale = useBloomLocale();
+    const theme = useTheme();
+    const toggleLabel = localizedLabel(expanded ? CREDIT_LABELS.hide : CREDIT_LABELS.show, locale ?? 'en');
+    const links = extra.length > 0 ? [...MAP_DATA_CREDITS, ...extra] : MAP_DATA_CREDITS;
+    const shown = creditDisclosure(expanded, disclosure);
+    const bottomEdge = useBottomEdgeInset();
+    const chromeLift = useMapChromeLift();
+    // The mark is not drawn while the app's own chrome carries it, so the
+    // credit takes the corner's full width.
+    const brandDrawn = !useBrandedChrome();
+    const heightOut = useMapCreditHeight();
+    const measure = useCallback((event) => {
+        heightOut?.set(withTiming(event.nativeEvent.layout.height, { duration: 160 }));
+    }, [heightOut]);
+    const open = useCallback((href) => {
+        void Linking.openURL(href).catch(() => {
+            // A link the platform will not open costs the tap, not the map.
+        });
+    }, []);
+    const secondary = { color: theme.colors.textSecondary };
+    const primary = { color: theme.colors.text };
+    return (_jsx(CreditBox, { lift: chromeLift, style: {
+            bottom: bottomEdge > 0 ? bottomEdge + ATTRIBUTION_GAP : ATTRIBUTION_GAP,
+            left: brandDrawn ? MAP_BRAND_CLEARANCE : CREDIT_SIDE_INSET,
+        }, children: _jsxs(View, { style: styles.plate, onLayout: heightOut ? measure : undefined, testID: "map-credit", children: [_jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles.fill, { backgroundColor: theme.colors.card }] }), shown.line && disclosure ? (_jsx(Text, { variant: "caption-1-semibold", accessibilityLabel: `${shown.line}. ${disclosure.detail}`, style: [styles.disclosure, primary], testID: "map-credit-simulated", children: shown.line })) : null, _jsxs(View, { style: styles.row, children: [expanded
+                            ? links.map((link) => (_jsx(Pressable, { accessibilityRole: "link", accessibilityLabel: link.label, onPress: () => open(link.href), hitSlop: 6, children: _jsx(Text, { variant: "caption-1-regular", style: [styles.link, secondary], children: link.label }) }, `${link.label}|${link.href}`)))
+                            : null, _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: shown.tag && disclosure ? `${disclosure.text}. ${toggleLabel}` : toggleLabel, "aria-expanded": expanded, onPress: onToggle, hitSlop: 10, style: ({ pressed }) => [styles.toggle, pressed ? styles.pressed : null], testID: "map-credit-toggle", children: [shown.tag ? (_jsx(Text, { variant: "caption-1-semibold", style: primary, testID: "map-credit-simulated-short", children: shown.tag })) : null, _jsx(RiInformationLine, { width: 18, height: 18, fill: theme.colors.textSecondary })] })] })] }) }));
+}
+function CreditBox({ lift, style, children, }) {
+    if (!lift) {
+        return (_jsx(View, { pointerEvents: "box-none", style: [styles.box, style], children: children }));
+    }
+    return (_jsx(LiftedCreditBox, { lift: lift, style: style, children: children }));
+}
+function LiftedCreditBox({ lift, style, children, }) {
+    const { lift: rise, opacity } = lift;
+    const animated = useAnimatedStyle(() => ({ transform: [{ translateY: -rise.value }], opacity: opacity.value }), [rise, opacity]);
+    return (_jsx(Animated.View, { pointerEvents: "box-none", style: [styles.box, style, animated], children: children }));
+}
+export const MapAttribution = memo(MapAttributionComponent);
+const styles = StyleSheet.create({
+    box: { position: 'absolute', right: 8, alignItems: 'flex-end' },
+    plate: {
+        alignItems: 'flex-end',
+        gap: 2,
+        borderRadius: 8,
+        overflow: 'hidden',
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+    },
+    fill: { opacity: 0.8 },
+    disclosure: { textAlign: 'right' },
+    row: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 4,
+    },
+    link: { textDecorationLine: 'underline' },
+    toggle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        borderRadius: 9999,
+    },
+    pressed: { opacity: 0.7 },
+});

package/dist/MapBrand.d.ts

@@ -0,0 +1,22 @@
+/**
+ * How wide the logo draws on the map.
+ *
+ * 76px puts the lockup at 48px tall, which is the smallest it stays legible at
+ * — the wordmark's two rows mean its cap height is roughly a fifth of its
+ * width, so it dies much earlier than a single-line logo would. Google's
+ * bottom-left badge is 66px wide and one row tall; this is the two-row
+ * equivalent, not a bigger claim on the canvas.
+ */
+export declare const MAP_BRAND_WIDTH = 76;
+/**
+ * Where the credit has to start so it cannot run under the mark.
+ *
+ * Exported because `MapAttribution` is the one that has to respect it, and the
+ * two must not each hold a private copy of the other's geometry.
+ */
+export declare const MAP_BRAND_CLEARANCE: number;
+/** How tall the mark draws. Layout that has to clear it reads this. */
+export declare const MAP_BRAND_HEIGHT: number;
+declare function MapBrandComponent(): import("react").JSX.Element | null;
+export declare const MapBrand: import("react").MemoExoticComponent<typeof MapBrandComponent>;
+export {};

package/dist/MapBrand.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The GoWay mark on the map — bottom-left, on every map GoWay draws.
+ *
+ * Google's logo is in the bottom-left corner of every Google map, in their app,
+ * in a `<GoogleMap>` in somebody's React page and in a bare `<iframe>` of
+ * maps.google.com; Apple's wordmark is in the bottom-left corner of every Apple
+ * map. Neither is a decoration and neither is optional, because a map platform
+ * that is invisible inside other people's pages is a map platform nobody has
+ * heard of. This is GoWay's.
+ *
+ * ## Why `MapView` renders it and no screen can
+ *
+ * Exactly the reasoning in `MapAttribution` — a thing that must be on every map
+ * cannot be something a screen remembers to add. `MapView` renders both, both
+ * are bare components with no `enabled` prop, and no screen can turn either
+ * off — the same rule Mapbox keeps for its wordmark.
+ *
+ * One exception exists, and it is not a prop. A surface whose own chrome
+ * already shows the GoWay logo says so through `BrandedChromeProvider`, and
+ * the badge stands down. The direction is what keeps it safe — a surface opts
+ * IN to being branded already, so forgetting shows the badge rather than
+ * hiding it. See `brand/BrandedChrome.tsx`.
+ *
+ * ## Why there is no plate behind it
+ *
+ * Because the artwork already is one. GoWay's logo is a sticker: every letter
+ * carries a heavy `#004aad` outline, and that outline is what separates it from
+ * whatever it is standing on. It was checked rather than assumed — rendered at
+ * 90px over the eight colours that actually cover a GoWay map: light land `#f6f4eb`, built-up `#fef4df`, roads
+ * `#fefefe`, light water `#8ddbf6`, dark land `#34445b`, dark built-up
+ * `#45476e`, dark water `#1c347a`, and black. It reads on all eight, and it
+ * reads for two different reasons: on the light four the blue outline carries
+ * it, and on the dark four the outline recedes into the basemap and the bright
+ * `#acd0ff` and `#ffffff` counters carry it instead. A card behind it would add
+ * a rectangle to the map and buy nothing.
+ *
+ * Which also means it needs no light/dark variant. One drawing, both
+ * appearances — and no dependence on the map's appearance, which matters
+ * because the map's appearance and the app's theme are separate settings and
+ * this component can see only one of them.
+ *
+ * ## It is not a link, on purpose
+ *
+ * Inside somebody else's page it would be a click target the page did not
+ * ask for, and in GoWay's own app it would go where the reader already is.
+ */
+import { memo } from 'react';
+import { View } from 'react-native';
+import { useBottomEdgeInset } from '@oxy.so/bloom/layout';
+import { useBrandedChrome } from './brand/BrandedChrome';
+import { GowayLogo, gowayLogoHeight } from './brand/GowayLogo';
+/**
+ * How wide the logo draws on the map.
+ *
+ * 76px puts the lockup at 48px tall, which is the smallest it stays legible at
+ * — the wordmark's two rows mean its cap height is roughly a fifth of its
+ * width, so it dies much earlier than a single-line logo would. Google's
+ * bottom-left badge is 66px wide and one row tall; this is the two-row
+ * equivalent, not a bigger claim on the canvas.
+ */
+export const MAP_BRAND_WIDTH = 76;
+/** Breathing room between the mark and whatever is below it. */
+const BRAND_GAP = 4;
+/**
+ * Where the credit has to start so it cannot run under the mark.
+ *
+ * Exported because `MapAttribution` is the one that has to respect it, and the
+ * two must not each hold a private copy of the other's geometry.
+ */
+export const MAP_BRAND_CLEARANCE = MAP_BRAND_WIDTH + 16;
+/** How tall the mark draws. Layout that has to clear it reads this. */
+export const MAP_BRAND_HEIGHT = gowayLogoHeight(MAP_BRAND_WIDTH);
+function MapBrandComponent() {
+    const bottomEdge = useBottomEdgeInset();
+    const chromeIsBranded = useBrandedChrome();
+    // A surface whose own chrome carries the logo above the map. Drawing it here
+    // too is the brand twice on one screen, the second copy on the cartography.
+    if (chromeIsBranded)
+        return null;
+    return (_jsx(View, { pointerEvents: "none", 
+        // Same rule as the credit: a claim on the bottom edge already folds in
+        // the safe area, so the plain gap is added to it and not to the
+        // safe-area-aware one.
+        style: {
+            position: 'absolute',
+            left: 8,
+            bottom: bottomEdge > 0 ? bottomEdge + BRAND_GAP : BRAND_GAP,
+        }, testID: "goway-map-brand", children: _jsx(GowayLogo, { width: MAP_BRAND_WIDTH }) }));
+}
+export const MapBrand = memo(MapBrandComponent);

package/dist/MapErrorState.d.ts

@@ -0,0 +1,9 @@
+import type { MapError } from './types';
+export interface MapErrorStateProps {
+    error: MapError;
+    onRetry?: () => void;
+    retryLabel?: string;
+}
+declare function MapErrorStateComponent({ error, onRetry, retryLabel }: MapErrorStateProps): import("react").JSX.Element;
+export declare const MapErrorState: import("react").MemoExoticComponent<typeof MapErrorStateComponent>;
+export {};

package/dist/MapErrorState.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The map's degraded state.
+ *
+ * A MapLibre canvas whose style or tiles never arrive renders a plain coloured
+ * rectangle and reports nothing — indistinguishable from an app that is
+ * simply slow, forever. So both forks watch for the two failures a hosted
+ * source can produce (the style document, and the tiles it points at) and
+ * cover the CANVAS — only the canvas — with this. Search, saved places, the sheet and every other piece of
+ * chrome stay mounted and usable above it, because they are siblings of the
+ * canvas, not children.
+ */
+import { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
+import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { RiErrorWarningLine } from '@oxy.so/bloom/icons/RiErrorWarningLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+/** One sentence per reason — what happened, in the user's terms, not ours. */
+const MESSAGES = {
+    style: {
+        title: 'Map unavailable',
+        body: "We couldn't load the map's design. Everything else still works.",
+    },
+    tiles: {
+        title: 'Map data unavailable',
+        body: "We couldn't reach the map data for this area. Check your connection and try again.",
+    },
+    unsupported: {
+        title: 'Map not supported here',
+        body: 'This build has no map renderer for the current platform.',
+    },
+    runtime: {
+        title: 'Map stopped',
+        body: 'The map ran into a problem. Reloading it usually fixes it.',
+    },
+};
+function MapErrorStateComponent({ error, onRetry, retryLabel = 'Try again' }) {
+    const theme = useTheme();
+    const copy = MESSAGES[error.reason] ?? MESSAGES.runtime;
+    return (_jsxs(View, { accessibilityRole: "alert", style: [styles.cover, { backgroundColor: theme.colors.backgroundSecondary }], testID: "map-error-state", children: [_jsx(RiErrorWarningLine, { width: 28, height: 28, fill: theme.colors.textSecondary }), _jsx(Text, { variant: "headline-semibold", style: [styles.centred, { color: theme.colors.text }], children: copy.title }), _jsx(Text, { variant: "body-2-regular", style: [styles.centred, { color: theme.colors.textSecondary }], children: copy.body }), onRetry ? (_jsx(Button, { appearance: "outline", tone: "neutral", size: "sm", leadingIcon: RiRefreshLine, onPress: onRetry, children: retryLabel })) : null] }));
+}
+export const MapErrorState = memo(MapErrorStateComponent);
+const styles = StyleSheet.create({
+    cover: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+        paddingHorizontal: 24,
+    },
+    centred: { textAlign: 'center' },
+});

package/dist/MapPlugin.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `<MapPlugin>`, native — nothing. MapLibre Native has no custom-layer API, so
+ * an engine plugin is a web-only extension (`plugin.ts`).
+ */
+import type { MapPluginProps } from './plugin';
+export declare function MapPlugin<Props>(_props: MapPluginProps<Props>): null;

package/dist/MapPlugin.js

@@ -0,0 +1,3 @@
+export function MapPlugin(_props) {
+    return null;
+}

package/dist/MapPlugin.web.d.ts

@@ -0,0 +1,2 @@
+import type { MapPluginProps } from './plugin';
+export declare function MapPlugin<Props>(props: MapPluginProps<Props>): import("react").JSX.Element | null;

package/dist/MapPlugin.web.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<MapPlugin>`, web — the one place an app's engine plugin is bound to the
+ * engine (`plugin.ts`).
+ *
+ * Attached once per engine and plugin (this file's binding), handed every new
+ * `props` through `update` (`PluginProps.web.tsx`), detached on unmount or
+ * when the engine is rebuilt. While attached it is consulted for presses, the
+ * cursor and the errors of the sources it owns.
+ */
+import { useContext, useLayoutEffect, useState } from 'react';
+import { WebEngineContext } from './engineContext.web';
+import { PluginProps } from './PluginProps.web';
+import { reportMapDefect } from './shared';
+export function MapPlugin(props) {
+    const engine = useContext(WebEngineContext);
+    return engine ? _jsx(AttachedPlugin, { engine: engine, ...props }) : null;
+}
+function AttachedPlugin({ engine, plugin, props, }) {
+    const [attachment, setAttachment] = useState(null);
+    // Binding: `plugin` is attached to the engine for as long as both are.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: a plugin is attached with the props of the render that attached it; later props reach it through `PluginProps`, never by re-attaching
+    useLayoutEffect(() => {
+        let attached = null;
+        try {
+            attached = plugin.attach(engine.map, props, { container: engine.container });
+        }
+        catch (cause) {
+            // A plugin that cannot attach costs the plugin, not the map.
+            reportMapDefect('plugin:attach', `A map plugin failed to attach: ${String(cause)}`);
+            return;
+        }
+        const registered = attached;
+        engine.plugins.add(registered);
+        setAttachment({ handle: attached, props });
+        return () => {
+            engine.plugins.delete(registered);
+            setAttachment(null);
+            attached?.detach();
+        };
+    }, [engine, plugin]);
+    return attachment ? (_jsx(PluginProps, { handle: attachment.handle, attachedWith: attachment.props, props: props })) : null;
+}

package/dist/MapView.d.ts

@@ -0,0 +1,2 @@
+import type { MapViewProps, MapViewRef } from './types';
+export declare const MapView: import("react").ForwardRefExoticComponent<MapViewProps & import("react").RefAttributes<MapViewRef>>;