@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/group-content.js

@@ -0,0 +1,16 @@
+import checklist from "./checklist/block.js";
+import code from "./code/block.js";
+import diff from "./diff/block.js";
+import transcript from "./transcript/block.js";
+import program from "./program/block.js";
+import compare from "./compare/block.js";
+export const BLOCKS = [
+    checklist,
+    code,
+    diff,
+    transcript,
+    program,
+    compare,
+];
+/** This group's MOS block types still being ported. */
+export const PENDING = [];

package/dist/artifact-blocks/blocks/group-data.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The data blocks (block task jatui-d4lyd). This barrel is the ONLY shared
+ * file that task edits: add a block by importing its def and appending it to
+ * BLOCKS, and remove its type from PENDING in the same change. builtins.ts
+ * concatenates the four group barrels; nothing else lists blocks.
+ */
+import type { ArtifactBlockDef } from "../types.js";
+export declare const BLOCKS: ArtifactBlockDef<any>[];
+/** This group's MOS block types still being ported. */
+export declare const PENDING: readonly string[];

package/dist/artifact-blocks/blocks/group-data.js

@@ -0,0 +1,7 @@
+import chart from "./chart/block.js";
+import stats from "./stats/block.js";
+import table from "./table/block.js";
+import timeline from "./timeline/block.js";
+export const BLOCKS = [chart, stats, table, timeline];
+/** This group's MOS block types still being ported. */
+export const PENDING = [];

package/dist/artifact-blocks/blocks/group-review.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The review / interactive blocks (block task jatui-n5z1x). This barrel is the ONLY shared
+ * file that task edits: add a block by importing its def and appending it to
+ * BLOCKS, and remove its type from PENDING in the same change. builtins.ts
+ * concatenates the four group barrels; nothing else lists blocks.
+ */
+import type { ArtifactBlockDef } from "../types.js";
+export declare const BLOCKS: ArtifactBlockDef<any>[];
+/** This group's MOS block types still being ported. */
+export declare const PENDING: readonly string[];

package/dist/artifact-blocks/blocks/group-review.js

@@ -0,0 +1,12 @@
+import callout from "./callout/block.js";
+import actions from "./actions/block.js";
+import diffReview from "./diff-review/block.js";
+import mediaPicker from "./media-picker/block.js";
+export const BLOCKS = [
+    callout,
+    actions,
+    diffReview,
+    mediaPicker,
+];
+/** This group's MOS block types still being ported. */
+export const PENDING = [];

package/dist/artifact-blocks/blocks/group-visual.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The visual blocks (block task jatui-399p2). This barrel is the ONLY shared
+ * file that task edits: add a block by importing its def and appending it to
+ * BLOCKS, and remove its type from PENDING in the same change. builtins.ts
+ * concatenates the four group barrels; nothing else lists blocks.
+ *
+ * Host services these blocks read (HostAdapter.services, all optional):
+ *   - map       `loadGoogleMaps` — absent → the same data as a list;
+ *   - explainer `explorer3d` (+ `parseExplorerSpec`) — absent → poster and a
+ *               "not available here" notice;
+ *   - mockup    `sandboxAttr` — an override of the frame's token list;
+ *               `allow-same-origin` is always stripped.
+ */
+import type { ArtifactBlockDef } from "../types.js";
+export declare const BLOCKS: ArtifactBlockDef<any>[];
+/** This group's MOS block types still being ported. */
+export declare const PENDING: readonly string[];

package/dist/artifact-blocks/blocks/group-visual.js

@@ -0,0 +1,14 @@
+import diagram from "./diagram/block.js";
+import collage from "./collage/block.js";
+import map from "./map/block.js";
+import explainer from "./explainer/block.js";
+import mockup from "./mockup/block.js";
+export const BLOCKS = [
+    diagram,
+    collage,
+    map,
+    explainer,
+    mockup,
+];
+/** This group's MOS block types still being ported. */
+export const PENDING = [];

package/dist/artifact-blocks/blocks/map/MapBlock.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+  /**
+   * MapBlock — Google map of markers (+ optional route polylines), block
+   * type "map".
+   *
+   * The Maps JS API comes from the HOST: `ctx.services.loadGoogleMaps`
+   * (HostAdapter.services — jatui's loadGoogleMapsAPI with the host's key
+   * fits). jatui holds no key and reads no env. jatui's MapView
+   * itself is dispatch-shaped — fixed MapJob/MapAgent statuses, a dispatch
+   * legend, no polylines — so this block builds its markers, popup bubbles
+   * and polylines on the SAME loader + Maps primitives instead of forcing
+   * dispatch semantics onto artifact data.
+   *
+   * Without a loader (or a failed load) it renders the SAME data as a
+   * styled list — never a broken map, never a fake screenshot. The list is
+   * also the screen-reader surface when the map renders (sr-only), so the
+   * data is never locked inside Google's canvas.
+   *
+   * Colors inside the page (list, popup cards, pin DOM) reference theme
+   * CSS vars directly — the overlay lives in this document so vars resolve
+   * and a tenant reskin repaints the map furniture. The one exception is
+   * the polyline stroke: the Maps API paints it on a canvas and needs a
+   * concrete color string, so that value is resolved from the same vars at
+   * draw time (getComputedStyle), with a base-content fallback.
+   */
+  import type { BlockProps } from "../../types.js"
+  import {
+    boundsOf,
+    coordCaption,
+    MAP_DEFAULTS,
+    mapSchema,
+    normalizeMap,
+    toneOfMarker,
+    toneOfRoute,
+    type MapParams,
+  } from "./schema.js"
+
+  let { params: rawParams, ctx }: BlockProps<MapParams> = $props()
+
+  /** Parsed params (defaults filled); corrupt params → empty state. The host
+   * validates at publish, so this is belt-and-braces for direct mounts. */
+  const EMPTY_PARAMS: MapParams = { markers: [], routes: [] }
+  const parsed = $derived(mapSchema.safeParse(rawParams))
+  const params = $derived(parsed.success ? parsed.data : EMPTY_PARAMS)
+  const view = $derived(normalizeMap(params))
+
+  // ── the host's Maps loader (absent → the list is the whole block) ────────
+  const loadMaps = $derived(ctx?.services?.loadGoogleMaps)
+  const hasKey = $derived(typeof loadMaps === "function")
+
+  /** "list" until a map is confirmed; SSR and keyless render the list. */
+  let status = $state<"map" | "list">("list")
+  let failed = $state(false)
+
+  let containerEl = $state<HTMLDivElement | null>(null)
+  // Maps SDK objects are typed loosely (no @types/google.maps; see googleMapsLoader.ts).
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let map: any = null
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let overlays: any[] = []
+  // ── tone → CSS var (page-side furniture uses var() directly) ─────────────
+  const TONE_VAR: Record<string, string> = {
+    primary: "--color-primary",
+    secondary: "--color-secondary",
+    accent: "--color-accent",
+    neutral: "--color-neutral",
+    info: "--color-info",
+    success: "--color-success",
+    warning: "--color-warning",
+    error: "--color-error",
+  }
+
+  /** Concrete color for canvas-painted ink (polylines) — resolved from the
+   * same theme vars the DOM furniture uses. */
+  function cssVarColor(varName: string): string | null {
+    if (typeof window === "undefined") return null
+    const v = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName)
+      .trim()
+    return v || null
+  }
+
+  function toneColor(tone: string): string | null {
+    return (
+      cssVarColor(TONE_VAR[tone] ?? TONE_VAR["primary"]) ??
+      cssVarColor(TONE_VAR["info"])
+    )
+  }
+
+  // ── init: load the Maps JS API, then swap the list for the map ───────────
+  $effect(() => {
+    const load = loadMaps
+    if (typeof load !== "function") return
+    let cancelled = false
+    ;(async () => {
+      try {
+        await load({ libraries: ["marker"] })
+      } catch {
+        /* handled below */
+      }
+      if (cancelled) return
+      if (typeof window !== "undefined" && window.google?.maps?.Map) {
+        status = "map"
+      } else {
+        failed = true
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  })
+
+  // ── map construction once the container exists ────────────────────────────
+  $effect(() => {
+    const node = containerEl
+    if (!node || status !== "map") return
+    const g = window.google?.maps
+    if (!g?.Map) return
+
+    const firstMarker = view.markers[0]
+    const center =
+      view.center ??
+      (firstMarker
+        ? { lat: firstMarker.lat, lng: firstMarker.lng }
+        : { lat: 20, lng: 0 })
+    // An explicit zoom is respected; the default zoom is for a DATA view —
+    // an empty map at street zoom is an ocean, so fall back to a world view.
+    const zoom = view.zoom !== MAP_DEFAULTS.zoom || hasData ? view.zoom : 3
+    try {
+      map = new g.Map(node, {
+        center,
+        zoom,
+        mapId: "jatui-map-view",
+        mapTypeId: g.MapTypeId?.ROADMAP,
+        // Same quiet-tiles choice as jatui MapView: points of interest add
+        // noise an artifact map does not need.
+        styles: [
+          {
+            featureType: "poi",
+            elementType: "labels",
+            stylers: [{ visibility: "off" }],
+          },
+        ],
+      })
+      drawData(g)
+      if (view.fit) fitToData(g)
+    } catch {
+      failed = true
+      status = "list"
+    }
+
+    return () => {
+      for (const o of overlays) {
+        try {
+          if ("setMap" in o) o.setMap(null)
+          else if ("map" in o) o.map = null
+          if (typeof o.close === "function") o.close()
+        } catch {
+          /* overlay already gone */
+        }
+      }
+      overlays = []
+      map = null
+    }
+  })
+
+  // New params (republish) redraw the overlays on the live map.
+  $effect(() => {
+    const g = window.google?.maps
+    if (!map || !g) return
+    drawData(g)
+    if (view.fit) fitToData(g)
+  })
+
+  // ── markers + polylines + popups ──────────────────────────────────────────
+  function clearOverlays() {
+    for (const o of overlays) {
+      try {
+        if ("setMap" in o) o.setMap(null)
+        else if ("map" in o) o.map = null
+        if (typeof o.close === "function") o.close()
+      } catch {
+        /* overlay already gone */
+      }
+    }
+    overlays = []
+  }
+
+  function popupCard(label: string, m: { popup?: string; address?: string }) {
+    // Text-only node (textContent) — popup strings are untrusted agent input
+    // and are never parsed as HTML.
+    const card = document.createElement("div")
+    card.style.cssText =
+      "min-width:160px;max-width:280px;background:var(--color-base-100);color:var(--color-base-content);" +
+      "padding:10px 12px;border-radius:var(--jatui-radius-box, 0.5rem);" +
+      "font-family:inherit;font-size:0.875rem;line-height:1.4"
+    const head = document.createElement("div")
+    head.style.cssText = "font-weight:600;margin-bottom:2px"
+    head.textContent = label
+    card.appendChild(head)
+    if (m.popup) {
+      const body = document.createElement("div")
+      body.style.cssText =
+        "color:color-mix(in oklch, var(--color-base-content) 80%, transparent)"
+      body.textContent = m.popup
+      card.appendChild(body)
+    }
+    if (m.address) {
+      const addr = document.createElement("div")
+      addr.style.cssText =
+        "color:color-mix(in oklch, var(--color-base-content) 60%, transparent);font-size:0.8125rem;margin-top:2px"
+      addr.textContent = m.address
+      card.appendChild(addr)
+    }
+    return card
+  }
+
+  // Maps SDK objects are typed loosely (no @types/google.maps; see googleMapsLoader.ts).
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function drawData(g: any) {
+    if (!map) return
+    clearOverlays()
+    const advanced = g.marker?.AdvancedMarkerElement
+    const infoClass = g.InfoWindow
+
+    for (const m of view.markers) {
+      const tone = toneOfMarker(m)
+      const position = { lat: m.lat, lng: m.lng }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let marker: any
+      try {
+        if (advanced) {
+          const pin = document.createElement("div")
+          pin.style.cssText = `width:24px;height:24px;border-radius:50%;background:var(${
+            TONE_VAR[tone] ?? TONE_VAR.primary
+          });border:2px solid var(--color-base-100)`
+          marker = new advanced({
+            position,
+            map,
+            title: m.label,
+            content: pin,
+          })
+        } else {
+          marker = new g.Marker({ position, map, title: m.label })
+        }
+      } catch {
+        try {
+          marker = new g.Marker({ position, map, title: m.label })
+        } catch {
+          continue
+        }
+      }
+      overlays.push(marker)
+      if (infoClass && (m.popup || m.address)) {
+        const info = new infoClass({ content: popupCard(m.label, m) })
+        overlays.push(info)
+        marker.addListener("click", () => info.open(map, marker))
+      }
+    }
+
+    for (const r of view.routes) {
+      const tone = toneOfRoute(r)
+      const color = toneColor(tone)
+      if (!color) continue // unstyled environment (tests): skip canvas ink
+      try {
+        const line = new g.Polyline({
+          path: r.points.map((p) => ({ lat: p.lat, lng: p.lng })),
+          map,
+          strokeColor: color,
+          strokeOpacity: 0.85,
+          strokeWeight: 4,
+        })
+        overlays.push(line)
+      } catch {
+        /* a bad route never breaks the map */
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function fitToData(g: any) {
+    if (!map) return
+    const b = boundsOf(view.markers, view.routes)
+    if (!b) return
+    try {
+      const bounds = new g.LatLngBounds()
+      for (const m of view.markers) bounds.extend({ lat: m.lat, lng: m.lng })
+      for (const r of view.routes) for (const p of r.points) bounds.extend(p)
+      map.fitBounds(bounds, 60)
+      // A single-pin fit can zoom absurdly close — cap like jatui MapView.
+      const listener = g.event.addListener(map, "idle", () => {
+        if ((map.getZoom() ?? 0) > 15) map.setZoom(15)
+        g.event.removeListener(listener)
+      })
+    } catch {
+      /* leave the manual view */
+    }
+  }
+
+  // ── list (fallback + screen-reader surface) ──────────────────────────────
+  const DOT_CLASS: Record<string, string> = {
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    accent: "bg-accent",
+    neutral: "bg-neutral",
+    info: "bg-info",
+    success: "bg-success",
+    warning: "bg-warning",
+    error: "bg-error",
+  }
+  const LINE_CLASS: Record<string, string> = {
+    primary: "bg-primary/70",
+    secondary: "bg-secondary/70",
+    accent: "bg-accent/70",
+    neutral: "bg-neutral/70",
+    info: "bg-info/70",
+    success: "bg-success/70",
+    warning: "bg-warning/70",
+    error: "bg-error/70",
+  }
+  const hasData = $derived(view.markers.length > 0 || view.routes.length > 0)
+</script>
+
+<section class="artifact-map w-full">
+  {#if view.title}
+    <div class="mb-2 text-sm font-medium text-base-content/70">
+      {view.title}
+    </div>
+  {/if}
+
+  {#if status === "map"}
+    <div
+      bind:this={containerEl}
+      class="w-full overflow-hidden rounded-box border border-base-300"
+      style="height: {view.height}px"
+      aria-hidden="true"
+    ></div>
+  {/if}
+
+  <!-- The list is the no-key fallback AND the screen-reader mirror of the map. -->
+  <div class={status === "map" ? "sr-only" : "mt-3"}>
+    {#if !hasData}
+      <p class="text-sm text-base-content/50">
+        No markers or routes published for this map.
+      </p>
+    {:else}
+      {#if view.markers.length > 0}
+        <ul class="flex flex-col gap-2">
+          {#each view.markers as m, i (i)}
+            <li class="flex items-start gap-2.5 text-sm">
+              <span
+                class="mt-1 inline-block size-3 shrink-0 rounded-full {DOT_CLASS[
+                  toneOfMarker(m)
+                ]}"
+                aria-hidden="true"
+              ></span>
+              <span class="min-w-0">
+                <span class="font-medium">{m.label}</span>
+                <span class="text-2xs text-base-content/45">
+                  {coordCaption(m.lat, m.lng)}</span
+                >
+                {#if m.popup}
+                  <span class="block text-base-content/75">{m.popup}</span>
+                {/if}
+                {#if m.address}
+                  <span class="block text-base-content/55">{m.address}</span>
+                {/if}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      {#if view.routes.length > 0}
+        <ul class="mt-3 flex flex-col gap-2">
+          {#each view.routes as r, i (i)}
+            {@const tone = toneOfRoute(r)}
+            <li class="flex items-start gap-2.5 text-sm">
+              <span
+                class="mt-1.5 inline-block h-1 w-6 shrink-0 rounded-full {LINE_CLASS[
+                  tone
+                ]}"
+                aria-hidden="true"
+              ></span>
+              <span class="min-w-0">
+                <span class="font-medium">{r.label ?? "Route"}</span>
+                <span class="text-2xs text-base-content/45">
+                  {r.points.length} point{r.points.length === 1 ? "" : "s"}
+                  · {coordCaption(r.points[0].lat, r.points[0].lng)} →
+                  {coordCaption(
+                    r.points.at(-1)!.lat,
+                    r.points.at(-1)!.lng,
+                  )}</span
+                >
+              </span>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      {#if status === "list"}
+        <p class="mt-3 text-2xs text-base-content/45">
+          {#if !hasKey}
+            The map view is not available here; the same data is listed
+            here.
+          {:else if failed}
+            The map could not load; the same data is listed here.
+          {:else}
+            Loading map…
+          {/if}
+        </p>
+      {/if}
+    {/if}
+  </div>
+</section>

package/dist/artifact-blocks/blocks/map/MapBlock.svelte.d.ts

@@ -0,0 +1,53 @@
+/**
+   * MapBlock — Google map of markers (+ optional route polylines), block
+   * type "map".
+   *
+   * The Maps JS API comes from the HOST: `ctx.services.loadGoogleMaps`
+   * (HostAdapter.services — jatui's loadGoogleMapsAPI with the host's key
+   * fits). jatui holds no key and reads no env. jatui's MapView
+   * itself is dispatch-shaped — fixed MapJob/MapAgent statuses, a dispatch
+   * legend, no polylines — so this block builds its markers, popup bubbles
+   * and polylines on the SAME loader + Maps primitives instead of forcing
+   * dispatch semantics onto artifact data.
+   *
+   * Without a loader (or a failed load) it renders the SAME data as a
+   * styled list — never a broken map, never a fake screenshot. The list is
+   * also the screen-reader surface when the map renders (sr-only), so the
+   * data is never locked inside Google's canvas.
+   *
+   * Colors inside the page (list, popup cards, pin DOM) reference theme
+   * CSS vars directly — the overlay lives in this document so vars resolve
+   * and a tenant reskin repaints the map furniture. The one exception is
+   * the polyline stroke: the Maps API paints it on a canvas and needs a
+   * concrete color string, so that value is resolved from the same vars at
+   * draw time (getComputedStyle), with a base-content fallback.
+   */
+import type { BlockProps } from "../../types.js";
+declare const MapBlock: import("svelte").Component<BlockProps<{
+    title?: string | undefined;
+    height?: number | undefined;
+    center?: {
+        lat: number;
+        lng: number;
+    } | undefined;
+    zoom?: number | undefined;
+    fit?: boolean | undefined;
+    markers?: {
+        label: string;
+        lat: number;
+        lng: number;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+        popup?: string | undefined;
+        address?: string | undefined;
+    }[] | undefined;
+    routes?: {
+        points: {
+            lat: number;
+            lng: number;
+        }[];
+        label?: string | undefined;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+    }[] | undefined;
+}>, {}, "">;
+type MapBlock = ReturnType<typeof MapBlock>;
+export default MapBlock;

package/dist/artifact-blocks/blocks/map/block.d.ts

@@ -0,0 +1,9 @@
+/**
+ * map block — a Google map of labeled, toned markers with popup text,
+ * optional route polylines, auto-fit bounds; falls back to a styled list
+ * without a Maps key.
+ */
+import type { ArtifactBlockDef } from "../../types";
+import { type MapParams } from "./schema";
+declare const def: ArtifactBlockDef<MapParams>;
+export default def;

package/dist/artifact-blocks/blocks/map/block.js

@@ -0,0 +1,62 @@
+import MapBlock from "./MapBlock.svelte";
+import { mapSchema } from "./schema";
+const EXAMPLE = {
+    title: "Tuesday route — cedar park loop",
+    height: 460,
+    markers: [
+        {
+            label: "Depot — load out 7:30",
+            lat: 30.5052,
+            lng: -97.6781,
+            tone: "primary",
+            popup: "Crew A loads water + salt here. Gate code 4417.",
+            address: "1401 Bell Springs Rd",
+        },
+        {
+            label: "Stop 1 — refill (late start)",
+            lat: 30.4487,
+            lng: -97.7145,
+            tone: "warning",
+            popup: "Customer flagged a 10:00-not-before window — rescheduled twice.",
+            address: "900 Great Oaks Dr",
+        },
+        {
+            label: "Stop 2 — new install",
+            lat: 30.4618,
+            lng: -97.6406,
+            tone: "success",
+            popup: "Softener install confirmed; photos due before leaving site.",
+            address: "2701 Arrowhead Dr",
+        },
+        {
+            label: "Stop 3 — billing pickup",
+            lat: 30.5226,
+            lng: -97.6905,
+            tone: "secondary",
+            popup: "Collect cheque for invoice #2041 (2 attempts made).",
+            address: "301 Discovery Blvd",
+        },
+    ],
+    routes: [
+        {
+            label: "Planned loop",
+            tone: "info",
+            points: [
+                { lat: 30.5052, lng: -97.6781 },
+                { lat: 30.4487, lng: -97.7145 },
+                { lat: 30.4618, lng: -97.6406 },
+                { lat: 30.5226, lng: -97.6905 },
+                { lat: 30.5052, lng: -97.6781 },
+            ],
+        },
+    ],
+};
+const def = {
+    type: "map",
+    title: "Map (markers + routes)",
+    description: "A Google map of labeled, toned markers with click popup text, optional route polylines, and bounds auto-fitted to everything (or a manual center/zoom). Uses the workspace's PUBLIC_GOOGLE_MAPS_API_KEY — the same key the booking panel and dispatch map use; WITHOUT a key it renders the identical data as a styled list instead, so never substitute a screenshot. markers: {label, lat, lng, tone (theme token: primary/secondary/accent/neutral/info/success/warning/error — color-codes meaning like 'problem stop' warning), popup (text in the click bubble), address}. routes: {label, tone, points: [{lat,lng}]} drawn as polylines (2–500 points each). fit (default true) frames every marker + route point; set fit:false and give center {lat,lng} + zoom (1–20) to control the view yourself. height 220–800px (default 420). Caps: 50 markers, 10 routes. Coordinates are WGS-84 decimals — geocode addresses BEFORE publishing (an address string is not accepted). Tip: keep ≤ 20 markers for readable pins; tone the one problematic stop warning/error and everything else neutral/primary so the map reads at a glance; put turn-by-turn detail in a markdown block beside the map.",
+    schema: mapSchema,
+    component: MapBlock,
+    example: EXAMPLE,
+};
+export default def;