import { useState, useEffect } from "react";
import { useSQLQuery } from "@motherduck/react-sql-query";
import { Check, Copy, Loader2 } from "lucide-react";

// ─── Theme ────────────────────────────────────────────────────────────
const FONT = "Trebuchet MS, sans-serif";
const T = {
  bg: "#fef6e4",
  text: "#1a3a52",
  muted: "#6b8fa8",
  faint: "#9ab8cc",
  border: "#c5dce8",
  borderHover: "#0090b8",
  selectedBg: "rgba(0, 144, 184, 0.1)",
  accent: "#0090b8",
  codeBg: "#1a3a52",
  codeText: "#e8f8fc",
  green: "#2e9e5b",
  error: "#e0524a",
};

const N = (v: unknown): number => (v != null ? Number(v) : 0);

const LIST_SQL = `
  SELECT
    id::VARCHAR        AS id,
    title,
    description,
    owner_name,
    current_version,
    strftime(updated_at, '%b %-d, %Y') AS updated_label
  FROM MD_LIST_DIVES()
  ORDER BY updated_at DESC
`;

const IDENT = '(?:"(?:[^"]|"")*"|[a-zA-Z_][a-zA-Z0-9_]*)';
const TRIPLET_RE = new RegExp(`(${IDENT})\\s*\\.\\s*${IDENT}\\s*\\.\\s*${IDENT}`, "g");

function extractDatabases(content: string, knownDbs: Set<string>): string[] {
  const dbs = new Set<string>();
  for (const m of content.matchAll(TRIPLET_RE)) {
    const db = m[1].replace(/^"|"$/g, "");
    if (knownDbs.has(db)) dbs.add(db);
  }
  return [...dbs];
}

function buildSharerSQL(
  dives: { id: string; title: string }[],
  contents: Record<string, string>,
  knownDbs: Set<string>
): string {
  const allDbs = new Set<string>();
  for (const { id } of dives) {
    if (contents[id]) {
      for (const db of extractDatabases(contents[id], knownDbs)) allDbs.add(db);
    }
  }
  if (allDbs.size === 0) return "";
  return [...allDbs]
    .map((db) => `CREATE SHARE IF NOT EXISTS "${db}" FROM "${db}";`)
    .join("\n");
}

function buildRecipientSQL(dives: { id: string; title: string }[]): string {
  return dives
    .map(
      ({ id, title }) => `-- ${title}
SET VARIABLE _id = '${id}'::UUID;
SET VARIABLE _title   = (SELECT title       FROM MD_GET_DIVE(id := getvariable('_id')));
SET VARIABLE _desc    = (SELECT description FROM MD_GET_DIVE(id := getvariable('_id')));
SET VARIABLE _content = (SELECT content     FROM MD_GET_DIVE(id := getvariable('_id')));
FROM MD_CREATE_DIVE(title := getvariable('_title'), description := getvariable('_desc'), content := getvariable('_content'));`
    )
    .join("\n\n");
}

function DiveContentFetcher({ id, onContent }: { id: string; onContent: (id: string, content: string) => void }) {
  const { data } = useSQLQuery(`SELECT content FROM MD_GET_DIVE(id := '${id}'::UUID)`);
  useEffect(() => {
    const content = data?.[0]?.content;
    if (content != null) onContent(id, String(content));
  }, [data, id, onContent]);
  return null;
}

export default function DiveShare() {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [contents, setContents] = useState<Record<string, string>>({});
  const [copiedSharer, setCopiedSharer] = useState(false);
  const [copiedRecipient, setCopiedRecipient] = useState(false);
  const [sortOrder, setSortOrder] = useState<"chrono" | "alpha">("chrono");

  const { data, isLoading, isError } = useSQLQuery(LIST_SQL);
  const rawDives = Array.isArray(data) ? data : [];
  const sortKey = (title: string) => title.replace(/^[\p{Extended_Pictographic}\s]+/u, "").trim().toLowerCase();
  const dives = sortOrder === "alpha"
    ? [...rawDives].sort((a, b) => sortKey(String(a.title ?? "")).localeCompare(sortKey(String(b.title ?? ""))))
    : rawDives;

  const { data: dbData } = useSQLQuery("SELECT alias FROM MD_ALL_DATABASES()");
  const knownDbs = new Set<string>(
    Array.isArray(dbData) ? dbData.map((r) => String(r.alias)) : []
  );

  const toggle = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const selectAll = () => setSelected(new Set(dives.map((d) => String(d.id))));
  const clearAll = () => setSelected(new Set());

  const handleContent = (id: string, content: string) =>
    setContents((prev) => (prev[id] === content ? prev : { ...prev, [id]: content }));

  const selectedIds = [...selected];
  const allContentLoaded = selectedIds.length > 0 && selectedIds.every((id) => contents[id] != null);

  const picks = dives
    .filter((d) => selected.has(String(d.id)))
    .map((d) => ({ id: String(d.id), title: String(d.title ?? "") }));

  const sharerSQL = allContentLoaded ? buildSharerSQL(picks, contents, knownDbs) : "";
  const recipientSQL = allContentLoaded ? buildRecipientSQL(picks) : "";

  const copyToClipboard = (text: string, setCopied: (v: boolean) => void) => {
    navigator.clipboard.writeText(text).catch(() => {
      const el = document.createElement("textarea");
      el.value = text;
      document.body.appendChild(el);
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
    });
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div style={{ background: T.bg, minHeight: "100vh", padding: "32px 28px", fontFamily: FONT, color: T.text }}>
      {selectedIds.map((id) => (
        <DiveContentFetcher key={id} id={id} onContent={handleContent} />
      ))}

      <div style={{ maxWidth: 680, margin: "0 auto" }}>

        {/* Header */}
        <div style={{ borderBottom: `2px solid ${T.accent}`, paddingBottom: 12, marginBottom: 20 }}>
          <h1 style={{ fontFamily: FONT, fontSize: 26, fontWeight: "bold", color: T.text, margin: 0, lineHeight: 1.2 }}>
            🏖️ Share Dives
          </h1>
          <p style={{ fontFamily: FONT, fontSize: 13, color: T.muted, margin: "6px 0 0", lineHeight: 1.5 }}>
            Select dives to share. Copy the generated SQL and send it to a teammate — they run it
            in their MotherDuck SQL editor to copy the dives into their account.
          </p>
        </div>

        {isLoading && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "24px 0", color: T.muted }}>
            <Loader2 size={15} className="animate-spin" />
            <span style={{ fontFamily: FONT, fontSize: 13 }}>Loading dives…</span>
          </div>
        )}

        {isError && (
          <p style={{ fontFamily: FONT, fontSize: 13, color: T.error, padding: "12px 0" }}>
            Failed to load dives.
          </p>
        )}

        {!isLoading && dives.length > 0 && (
          <>
            {/* Toolbar */}
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 12 }}>
              <button onClick={selectAll} style={{ fontFamily: FONT, fontSize: 13, color: T.accent, background: "none", border: "none", cursor: "pointer", padding: 0 }}>
                Select all
              </button>
              <button onClick={clearAll} style={{ fontFamily: FONT, fontSize: 13, color: T.muted, background: "none", border: "none", cursor: "pointer", padding: 0 }}>
                Clear
              </button>
              {selected.size > 0 && (
                <span style={{ fontFamily: FONT, fontSize: 13, color: T.muted }}>
                  {selected.size} selected
                </span>
              )}
              <div style={{ marginLeft: "auto", display: "flex", gap: 2 }}>
                {(["chrono", "alpha"] as const).map((order) => (
                  <button
                    key={order}
                    onClick={() => setSortOrder(order)}
                    style={{
                      fontFamily: FONT,
                      fontSize: 11,
                      padding: "3px 10px",
                      border: `1px solid ${sortOrder === order ? T.accent : T.border}`,
                      background: sortOrder === order ? T.accent : T.bg,
                      color: sortOrder === order ? "#fff" : T.muted,
                      cursor: "pointer",
                      borderRadius: 12,
                      letterSpacing: "0.03em",
                    }}
                  >
                    {order === "chrono" ? "Recent" : "A–Z"}
                  </button>
                ))}
              </div>
            </div>

            {/* Dive list */}
            <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 28 }}>
              {dives.map((dive) => {
                const id = String(dive.id);
                const isSelected = selected.has(id);
                return (
                  <label
                    key={id}
                    style={{
                      display: "flex",
                      alignItems: "flex-start",
                      gap: 12,
                      padding: "10px 14px",
                      background: isSelected ? T.selectedBg : "#fff",
                      border: `1px solid ${isSelected ? T.borderHover : T.border}`,
                      cursor: "pointer",
                      borderRadius: 8,
                      transition: "all 0.1s",
                    }}
                  >
                    <input
                      type="checkbox"
                      checked={isSelected}
                      onChange={() => toggle(id)}
                      style={{ marginTop: 3, flexShrink: 0, accentColor: T.accent }}
                    />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                        <span style={{ fontFamily: FONT, fontWeight: "bold", fontSize: 14, color: T.text }}>
                          {String(dive.title ?? "")}
                        </span>
                        <span style={{ fontFamily: FONT, fontSize: 11, color: T.muted }}>
                          v{N(dive.current_version)}
                        </span>
                      </div>
                      {dive.description && (
                        <p style={{ fontFamily: FONT, fontSize: 12, color: T.muted, margin: "2px 0 0", lineHeight: 1.4 }}>
                          {String(dive.description)}
                        </p>
                      )}
                      <p style={{ fontFamily: FONT, fontSize: 11, color: T.faint, margin: "3px 0 0" }}>
                        Updated {String(dive.updated_label ?? "")}
                      </p>
                    </div>
                  </label>
                );
              })}
            </div>

            {/* Output */}
            {selected.size > 0 && (
              !allContentLoaded ? (
                <div style={{ display: "flex", alignItems: "center", gap: 8, color: T.muted }}>
                  <Loader2 size={13} className="animate-spin" />
                  <span style={{ fontFamily: FONT, fontSize: 12 }}>Inspecting dive content…</span>
                </div>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
                  {sharerSQL && (
                    <div>
                      <div style={{ fontFamily: FONT, fontSize: 11, color: T.muted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8, borderTop: `1px solid ${T.border}`, paddingTop: 12 }}>
                        Step 1 — Run this yourself to share your databases
                      </div>
                      <textarea
                        readOnly
                        value={sharerSQL}
                        rows={Math.min(sharerSQL.split("\n").length + 1, 10)}
                        style={{ width: "100%", fontFamily: "monospace", fontSize: 12, padding: "12px", background: T.codeBg, color: T.codeText, border: "none", outline: "none", lineHeight: 1.7, resize: "none", boxSizing: "border-box", borderRadius: 6 }}
                      />
                      <button
                        onClick={() => copyToClipboard(sharerSQL, setCopiedSharer)}
                        style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8, padding: "7px 18px", background: T.green, color: "#fff", border: "none", cursor: "pointer", fontFamily: FONT, fontSize: 13, borderRadius: 20 }}
                      >
                        {copiedSharer ? <><Check size={13} /> Copied!</> : <><Copy size={13} /> Copy</>}
                      </button>
                    </div>
                  )}

                  <div>
                    <div style={{ fontFamily: FONT, fontSize: 11, color: T.muted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8, borderTop: `1px solid ${T.border}`, paddingTop: 12 }}>
                      {sharerSQL ? "Step 2 — Send this to your teammate" : "Send this to your teammate"}
                    </div>
                    <textarea
                      readOnly
                      value={recipientSQL}
                      rows={Math.min(selected.size * 7, 20)}
                      style={{ width: "100%", fontFamily: "monospace", fontSize: 12, padding: "12px", background: T.codeBg, color: T.codeText, border: "none", outline: "none", lineHeight: 1.7, resize: "none", boxSizing: "border-box", borderRadius: 6 }}
                    />
                    <button
                      onClick={() => copyToClipboard(recipientSQL, setCopiedRecipient)}
                      style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8, padding: "7px 18px", background: T.accent, color: "#fff", border: "none", cursor: "pointer", fontFamily: FONT, fontSize: 13, borderRadius: 20 }}
                    >
                      {copiedRecipient ? <><Check size={13} /> Copied!</> : <><Copy size={13} /> Copy</>}
                    </button>
                  </div>
                </div>
              )
            )}
          </>
        )}
      </div>
    </div>
  );
}


Select dives from your MotherDuck account and generate a handoff prompt so another user can load them via read_dive.

Dive Share

2. Checkbox selection UI                                                                                                            
                                                                                                                                      
  Render each dive as a <label> wrapping a checkbox. Track selected IDs in a Set<string>. Add Select all / Clear buttons and a sort   
  toggle (Recent / A–Z). For alphabetical sort, strip leading emoji before comparing:                                               
  title.replace(/^[\p{Extended_Pictographic}\s]+/u, "").trim().toLowerCase()

1. List dives                                                                                                                     
                                                                                                                                      
  Query MD_LIST_DIVES() with useSQLQuery to get id, title, description, version, and formatted date. Sort by updated_at DESC.

5. Generate Step 1 SQL (sharer runs this)                                                                                         
                                                                                                                                    
  For each referenced database:                                                                                                       
  CREATE SHARE IF NOT EXISTS "db_name" FROM "db_name";
  Only show this section if any databases are detected.

8. Theme                                                                                                                            
                                                                                                                                    
  Sandy background (#fef6e4), deep ocean text (#1a3a52), ocean blue accent (#0090b8), Trebuchet MS. Rounded cards and pill buttons for
   a casual feel.

6. Generate Step 2 SQL (send to teammate)                                                                                           
                                                                                                                                      
  Because MD_CREATE_DIVE can't take subqueries as arguments directly, use the SET VARIABLE pattern:                                   
  SET VARIABLE _id = '<uuid>'::UUID;                                                                                                
  SET VARIABLE _title   = (SELECT title       FROM MD_GET_DIVE(id := getvariable('_id')));                                            
  SET VARIABLE _desc    = (SELECT description FROM MD_GET_DIVE(id := getvariable('_id')));                                            
  SET VARIABLE _content = (SELECT content     FROM MD_GET_DIVE(id := getvariable('_id')));                                            
  FROM MD_CREATE_DIVE(title := getvariable('_title'), description := getvariable('_desc'), content := getvariable('_content'));

4. Detect referenced databases                                                                                                      
                                                                                                                                      
  Cross-reference dive content against MD_ALL_DATABASES() to avoid false positives from JS variable names. Use a regex to find        
  three-part identifiers (db.schema.table) and keep only names that appear in the known-databases whitelist.

7. Copy buttons                                                                                                                     
                                                                                                                                      
  Use navigator.clipboard.writeText with a textarea/execCommand fallback. Toggle a "Copied!" state for 2 seconds.

3. Fetch dive content on selection                                                                                                  
  
  Mount an invisible DiveContentFetcher component for each selected dive ID. It runs:                                                 
  SELECT content FROM MD_GET_DIVE(id := '<id>'::UUID)                                                                               
  …and reports the content up via a callback. This pattern is required because useSQLQuery is a hook and can't be called conditionally
   or in a loop.

Adam Engel

best practices for data visualization in the age of AI generated code

How to create beautiful dataviz : vibecoding dashboard

Mehdi Ouazza

Interactive operations dashboard for the Anadarko Basin — 42K+ real Oklahoma wells with production, LOE, lease, and acquisition data across STACK, SCOOP & MERGE plays. Filter by county and play.

Anadarko Basin Operations Intelligence

Build an interactive Anadarko Basin operations intelligence app with a filterable d3 map showing 42K real Oklahoma wells on a PLSS township-range grid, a paginated well table with accordion drill-downs, and three analysis tabs — Production (Arps decline curve playground with editable parameters and scenario economics), LOE (scissors chart, cost benchmarking, linked PDF statements), and Leases (mineral ownership drill-downs, infill potential, expiration tracking) — all querying live MotherDuck data in Tufte style.

Oil & Gas Demo // Anadarko Basin Explorer

Dermott Ryan

Dark war-room console: interactive d3 globe of geopolitical flashpoints, oil/trade chokepoints with shipping-route arcs, and a live military+civil aircraft snapshot (adsb.lol) — alongside live markets (oil, gold, VIX, equities, defense, FX) from Yahoo Finance, the Caldara-Iacoviello Geopolitical Risk Index overlaid on the markets timeline, a war-shock 30-day market-impact analyzer, a global defense-stock leaderboard since the Ukraine invasion, and an FX-under-fire panel. Data in my_db.geoconsole.

Global Conflict // Markets Console

Akash Sharma

A ducktastic platform game rendered on canvas. Rescue ducklings and bring them home to Mama across pond, sky, and cave worlds. Fly (wing stamina!), swim, dive, quack to scare geese/herons, lull crocs, and charge a MEGA quack to knock over trees. Includes a SKY level (Cloud Chase) and a dark CAVE level (Glowworm Grotto). You get more points the faster you are and the more boons you collect! Beat every level to unlock a hidden underwater BONUS level or type the secret word "ducklake" on the main menu to unlock. Levels load live from quackshot.main.levels. Add or edit one with a single INSERT (JSON format, including sky-, cave-, and dive-level fields).

QuackShot: Fowl Play

please make me a simple web-based platformer game where the player character is a duck that needs to swim through ponds, avoid crocodiles, and fly over trees.

Guen Prawiroatmodjo

A playful compute-literacy Dive that helps nontechnical users compare AI workload demands against public CPU/GPU hardware using a MotherDuck-themed score called Duck Power.

Duck Power Analytics

codenamejewell

import { useState } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";


export const REQUIRED_DATABASES = [
  { type: 'database', path: 'md:prdp26', alias: 'prdp26' }
];
const N = (v) => (v != null ? Number(v) : 0);

// WRTH house palette
const C = {
  bg: "#0E1B1B", panel: "#122222", gold: "#C9A24A", teal: "#6FB89A",
  coral: "#D17765", cream: "#F7EAD1", muted: "#9DB0A6", line: "#24403A",
};

// Island bounds for the pin projection (approx)
const LON_MIN = -67.38, LON_MAX = -65.18, LAT_MIN = 17.83, LAT_MAX = 18.60;
const MAP_W = 720, MAP_H = 250;
const px = (lon) => ((lon - LON_MIN) / (LON_MAX - LON_MIN)) * MAP_W;
const py = (lat) => ((LAT_MAX - lat) / (LAT_MAX - LAT_MIN)) * MAP_H;

export default function CulturalOriginMap() {
  // Live queries -------------------------------------------------
  const counter = useSQLQuery(`
    SELECT total_pins, real_pins, pins_last_hour, municipalities_represented
    FROM "prdp26"."main"."v_live_counter"
  `);

  const heroes = useSQLQuery(`
    SELECT pin_id, display_name, role_2026_parade, origin_label, lat, lng,
           birth_year, signature_work, headline_stat, pin_color_hex, sort_order, pin_type,
           micro_doc_title, target_runtime_sec, cta_label, sku
    FROM "prdp26"."main"."v_artist_card"
    ORDER BY sort_order
  `);

  const munis = useSQLQuery(`
    SELECT municipality, municipality_slug, lat, lng, island_region, jersey_sku, pin_count
    FROM "prdp26"."main"."v_pins_by_municipality"
    ORDER BY municipality
  `);

  const regions = useSQLQuery(`
    SELECT region_id, region_label, region_group, pin_count
    FROM "prdp26"."main"."v_pins_by_region"
    WHERE region_id NOT IN ('INTL')
    ORDER BY pin_count DESC, sort_order
  `);

  const heroRows = Array.isArray(heroes.data) ? heroes.data : [];
  const muniRows = Array.isArray(munis.data) ? munis.data : [];
  const regionRows = Array.isArray(regions.data) ? regions.data : [];
  const counterRow = Array.isArray(counter.data) && counter.data[0] ? counter.data[0] : null;

  // Selection + participatory layer ------------------------------
  const [selected, setSelected] = useDiveState("selected", "PIN-VB");
  const [myTown, setMyTown] = useState("");
  const [myRegion, setMyRegion] = useState("");
  const [localPins, setLocalPins] = useState([]);

  const islandHeroes = heroRows.filter((h) => N(h.lat) < 20);
  const diasporaHeroes = heroRows.filter((h) => N(h.lat) >= 20);
  const sel = heroRows.find((h) => h.pin_id === selected);
  const selMuni = muniRows.find((m) => "MUNI-" + m.municipality_slug === selected);

  const dropPin = () => {
    if (!myTown || !myRegion) return;
    const m = muniRows.find((x) => x.municipality === myTown);
    if (m) setLocalPins([...localPins, { municipality: myTown, lat: N(m.lat), lng: N(m.lng), region: myRegion }]);
  };

  const kpi = (label, value, accent) => (
    <div>
      {counter.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: 40, width: 80, background: C.line }} />
      ) : (
        <p className="text-4xl font-bold" style={{ color: accent || C.cream }}>{value}</p>
      )}
      <p className="text-xs mt-1 uppercase" style={{ color: C.muted, letterSpacing: "0.1em" }}>{label}</p>
    </div>
  );

  return (
    <div className="p-6" style={{ background: C.bg, color: C.cream, minHeight: 600 }}>
      {/* Header */}
      <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.25em" }}>
        § 01 · WRTH × 69th National Puerto Rican Day Parade · June 14 2026
      </p>
      <h1 className="text-2xl font-semibold mt-1" style={{ color: C.cream }}>
        The Cultural Origin Map
      </h1>
      <p className="text-sm mb-5" style={{ color: C.muted }}>
        Where the float comes from, and where you come from — Somos Más Que 100×35
      </p>

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-8 mb-6">
        {kpi("Diaspora pins", counterRow ? N(counterRow.total_pins) + localPins.length : "—", C.gold)}
        {kpi("Pins last hour", counterRow ? N(counterRow.pins_last_hour) + localPins.length : "—", C.teal)}
        {kpi("Municipios on the map", counterRow ? N(counterRow.municipalities_represented) : "—", C.cream)}
        {kpi("Float origin pins", heroRows.length || "—", C.coral)}
      </div>

      {/* Island map */}
      <p className="text-xs uppercase mb-1" style={{ color: C.muted, letterSpacing: "0.15em" }}>
        100 × 35 — tap a gold pin for the artist, any dot for its barrio jersey
      </p>
      {munis.isLoading ? (
        <div className="animate-pulse rounded" style={{ height: MAP_H, background: C.panel }} />
      ) : (
        <svg viewBox={`0 0 ${MAP_W} ${MAP_H}`} width="100%" style={{ background: C.panel, borderRadius: 6, border: `1px solid ${C.line}` }}>
          {/* municipality dots (the island silhouette) */}
          {muniRows.map((m) => {
            const r = 3 + Math.sqrt(N(m.pin_count)) * 3;
            const id = "MUNI-" + m.municipality_slug;
            return (
              <circle key={id} cx={px(N(m.lng))} cy={py(N(m.lat))} r={r}
                fill={selected === id ? C.teal : N(m.pin_count) > 0 ? "#3E6B5C" : "#27443C"}
                stroke={selected === id ? C.cream : "none"} strokeWidth={1.5}
                style={{ cursor: "pointer" }} onClick={() => setSelected(id)}>
                <title>{m.municipality} · {N(m.pin_count)} pins</title>
              </circle>
            );
          })}
          {/* visitor pins added this session */}
          {localPins.map((p, i) => (
            <circle key={"local" + i} cx={px(p.lng)} cy={py(p.lat)} r={5} fill={C.teal} stroke={C.cream} strokeWidth={1} />
          ))}
          {/* hero pins */}
          {islandHeroes.map((h) => (
            <g key={h.pin_id} style={{ cursor: "pointer" }} onClick={() => setSelected(h.pin_id)}>
              <circle cx={px(N(h.lng))} cy={py(N(h.lat))} r={selected === h.pin_id ? 11 : 8}
                fill={h.pin_color_hex || C.gold} stroke={C.bg} strokeWidth={2} />
              <text x={px(N(h.lng))} y={py(N(h.lat)) - 14} textAnchor="middle"
                fontSize="11" fill={C.cream} fontWeight="600">{h.display_name}</text>
            </g>
          ))}
        </svg>
      )}

      {/* Diaspora hero chips */}
      <div className="flex gap-2 mt-3 mb-5 flex-wrap">
        {diasporaHeroes.map((h) => (
          <button key={h.pin_id} onClick={() => setSelected(h.pin_id)}
            className="text-xs px-3 py-2 rounded"
            style={{
              background: selected === h.pin_id ? C.gold : C.panel,
              color: selected === h.pin_id ? C.bg : C.cream,
              border: `1px solid ${selected === h.pin_id ? C.gold : C.line}`, cursor: "pointer",
            }}>
            {h.display_name} · {h.origin_label}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-2 gap-6">
        {/* Detail card */}
        <div className="p-4 rounded" style={{ background: C.panel, border: `1px solid ${C.line}` }}>
          {heroes.isLoading ? (
            <div className="animate-pulse space-y-2">
              <div className="h-4 rounded w-3/4" style={{ background: C.line }} />
              <div className="h-4 rounded w-1/2" style={{ background: C.line }} />
            </div>
          ) : sel ? (
            <div>
              <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.15em" }}>{sel.role_2026_parade}</p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>
                {sel.display_name}{sel.birth_year ? <span style={{ color: C.muted, fontWeight: 400 }}> · b. {N(sel.birth_year)}</span> : null}
              </h2>
              <p className="text-sm mt-1" style={{ color: C.teal }}>{sel.origin_label}</p>
              <p className="text-sm mt-2" style={{ color: C.cream }}><span style={{ color: C.muted }}>Signature: </span>{sel.signature_work}</p>
              <p className="text-sm mt-2" style={{ color: C.muted }}>{sel.headline_stat}</p>
              <div className="mt-3 pt-3" style={{ borderTop: `1px solid ${C.line}` }}>
                <p className="text-xs" style={{ color: C.muted }}>▶ {sel.micro_doc_title} ({N(sel.target_runtime_sec)}s micro-doc)</p>
                {sel.cta_label ? (
                  <p className="text-sm mt-2 font-semibold" style={{ color: C.gold }}>🛒 {sel.cta_label} → {sel.sku}</p>
                ) : null}
              </div>
            </div>
          ) : selMuni ? (
            <div>
              <p className="text-xs uppercase" style={{ color: C.gold, letterSpacing: "0.15em" }}>{selMuni.island_region} · municipio</p>
              <h2 className="text-xl font-semibold mt-1" style={{ color: C.cream }}>{selMuni.municipality}</h2>
              <p className="text-sm mt-2" style={{ color: C.muted }}>{N(selMuni.pin_count)} diaspora pins from this town</p>
              <p className="text-sm mt-3 font-semibold" style={{ color: C.gold }}>🛒 Rep your barrio → {selMuni.jersey_sku}</p>
            </div>
          ) : (
            <p className="text-sm" style={{ color: C.muted }}>Select a pin on the map.</p>
          )}
        </div>

        {/* Right column: add-your-pin + region table */}
        <div>
          <div className="p-4 rounded mb-4" style={{ background: C.panel, border: `1px solid ${C.gold}` }}>
            <p className="text-xs uppercase mb-2" style={{ color: C.gold, letterSpacing: "0.15em" }}>Drop your pin — join the diaspora</p>
            <div className="flex gap-2">
              <select value={myTown} onChange={(e) => setMyTown(e.target.value)}
                className="text-xs p-2 rounded flex-1" style={{ background: C.bg, color: C.cream, border: `1px solid ${C.line}` }}>
                <option value="">Family&apos;s town…</option>
                {muniRows.map((m) => <option key={m.municipality}>{m.municipality}</option>)}
              </select>
              <select value={myRegion} onChange={(e) => setMyRegion(e.target.value)}
                className="text-xs p-2 rounded flex-1" style={{ background: C.bg, color: C.cream, border: `1px solid ${C.line}` }}>
                <option value="">Where you live now…</option>
                {regionRows.map((r) => <option key={r.region_id} value={r.region_id}>{r.region_label}</option>)}
              </select>
              <button onClick={dropPin} className="text-xs px-3 rounded font-semibold"
                style={{ background: C.gold, color: C.bg, border: "none", cursor: "pointer" }}>Pin it</button>
            </div>
            <p className="text-xs mt-2" style={{ color: C.muted }}>
              Session preview — production pins write via the WRTH ingest API into prdp26.visitor_pins.
            </p>
          </div>

          {regions.isLoading ? (
            <div className="animate-pulse rounded" style={{ height: 150, background: C.panel }} />
          ) : (
            <table className="w-full text-sm">
              <thead>
                <tr style={{ color: C.muted }} className="text-left text-xs uppercase">
                  <th className="pb-1">Diaspora region</th><th className="pb-1 text-right">Pins</th>
                </tr>
              </thead>
              <tbody>
                {regionRows.filter((r) => N(r.pin_count) > 0).slice(0, 7).map((r) => (
                  <tr key={r.region_id} style={{ borderTop: `1px solid ${C.line}` }}>
                    <td className="py-1" style={{ color: C.cream }}>{r.region_label}</td>
                    <td className="py-1 text-right font-semibold" style={{ color: C.teal }}>
                      {N(r.pin_count) + localPins.filter((p) => p.region === r.region_id).length}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <p className="text-xs mt-5" style={{ color: C.muted }}>
        WRTH · prdp26 · 3.2M on the island, 5.8M+ across the States — one map, one people. Stamped 2026-06-10.
      </p>
    </div>
  );
}

WRTH × 69th National Puerto Rican Day Parade (June 14, 2026). Island origin map with hero artist pins (Daddy Yankee, Ozuna, Dayanara Torres), diaspora honorees (Anthony Ramos, Lila Nikole), the Vega Baja dedication, live visitor diaspora pins by region, and Rep Your Barrio commerce CTAs. Powered by prdp26.

PRDP26 · The Cultural Origin Map

WRTH x LILA Nikole - PRDP26 · The Cultural Origin Map

Zachary Johnson

Interactive zoomable world clock with live solar day/night shading, GeoNames place search, timezone offset bands, and paired GMT-style analog watches.

World Clock

I think the map should be interactive/zoomable and country borders are not well visible. Also it should highlight not just the specific time zone (country), but whole TZ offset "column".

small tweak: add button "now" between -1h and +1h to jump easily back to the current time in Plan mode

Search city or region does not seem to work. I think it should use general geocoder to find any city, not just ones in the database?

can you add to map also subtle Day and Night overlay, as in https://www.timeanddate.com/worldclock/sunearth.html ?

another small tweak - add to your time and selected time UTC offset info also DST state when and where applicable.

It is much better now. But some click functions are not good - when I click on ocean then it works ok, but with click on e.g. India (or most countries, except European ones) it seems to select most of the world (displayed as GMT+6?) which is wrong - it should highlight India (specific timezone) and half-highlight offset (if this is beyond India). It

Next enhancements:
1. remove also "Country borders" from map label, thats obvious.
2. make second hand on analog display to run smooth (28,800 vibrations per hour like real Rolex).
3. make analog displays a bit smaller, to keep all main info on screen without scrolling
4. feature: allow user to select between current time (as now) and time-travel to another time easily, so they can use it for calendar planning.

ok thats good now. The layout has empty area below map. What about adding there two analog clock style views (hour, minute, second hands) - my location, selected location. Use "Rolex GMT" watch style

Grab world timezones from my local postgis database (jaak - geo-tz-countries-with-oceans table) and copy it to the @motherduck . Create there then a nice "world clock" Dig, which knows user current timezone, colors it on map specifically, allows to select other time zones, shows timezone differences etc

Jaak L

An interactive explorer of 2.3M+ arXiv papers showing how scientific publishing has evolved across disciplines from 2007 to 2023 — with category breakdowns, growth trends, and top subcategory drill-downs. MotherDuck-branded dark theme.

Dive Gallery