@wipco/sdui 0.1.0

package/dist/rich.js

@@ -0,0 +1,684 @@
+import { HoistedStyle, Spinner, EmptyState } from './chunk-AR2JYE75.js';
+export { DatePicker, DateRangePicker } from './chunk-AR2JYE75.js';
+import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function useOptionalModule(load) {
+  const [state, setState] = useState({ status: "loading" });
+  useEffect(() => {
+    let alive = true;
+    load().then(
+      (module) => {
+        if (alive) setState({ status: "ready", module });
+      },
+      (error) => {
+        if (!alive) return;
+        console.warn("[sdui] \uC120\uD0DD \uC758\uC874\uC131 \uB85C\uB4DC \uC2E4\uD328 \u2014 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4", error);
+        setState({ status: "missing" });
+      }
+    );
+    return () => {
+      alive = false;
+    };
+  }, [load]);
+  return state;
+}
+function DependencyPlaceholder({
+  packageName,
+  purpose,
+  height,
+  loading = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        minHeight: height,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "1px solid var(--wp-border-subtle)",
+        borderRadius: "var(--wp-radius-md)",
+        background: "var(--wp-surface-sunken)"
+      },
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { label: `${purpose} \uC900\uBE44 \uC911` }) : /* @__PURE__ */ jsxs(EmptyState, { tight: true, icon: "box", title: `${purpose}\uB97C \uADF8\uB9AC\uB824\uBA74 ${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4`, children: [
+        "\uC120\uD0DD \uC758\uC874\uC131\uC774\uB77C \uAE30\uBCF8 \uC124\uCE58\uC5D0\uB294 \uD3EC\uD568\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 \u2014 ",
+        /* @__PURE__ */ jsxs("code", { children: [
+          "pnpm add ",
+          packageName
+        ] }),
+        " \uD6C4 \uB2E4\uC2DC \uC5F4\uC5B4 \uC8FC\uC138\uC694."
+      ] })
+    }
+  );
+}
+var loadRecharts = () => import('recharts');
+var SERIES_FALLBACK = [
+  "#1d2c60",
+  "#0a73c9",
+  "#c9aa49",
+  "#12805a",
+  "#ca1a1d",
+  "#8e9bc2",
+  "#5b6577",
+  "#a5cdf1"
+];
+function useSeriesPalette(ref) {
+  const [palette, setPalette] = useState(SERIES_FALLBACK);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el === null) return;
+    const computed = getComputedStyle(el);
+    const next = SERIES_FALLBACK.map(
+      (fallback, i) => computed.getPropertyValue(`--wp-series-${i + 1}`).trim() || fallback
+    );
+    setPalette((prev) => prev.every((color, i) => color === next[i]) ? prev : next);
+  }, [ref]);
+  return palette;
+}
+var formatNumber = (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+var formatCurrency = (v) => {
+  const sign = v < 0 ? "-" : "";
+  const abs = Math.abs(v);
+  if (abs >= 1e8) {
+    const eok = abs / 1e8;
+    return `${sign}${eok.toLocaleString("ko-KR", { maximumFractionDigits: eok >= 100 ? 0 : 1 })}\uC5B5`;
+  }
+  if (abs >= 1e4) {
+    return `${sign}${Math.round(abs / 1e4).toLocaleString("ko-KR")}\uB9CC`;
+  }
+  return `${sign}${abs.toLocaleString("ko-KR")}`;
+};
+var formatPercent = (v) => `${v.toLocaleString("ko-KR", { maximumFractionDigits: 1 })}%`;
+var getFormatter = (format) => {
+  if (format === "currency") return formatCurrency;
+  if (format === "percent") return formatPercent;
+  return formatNumber;
+};
+var tooltipBoxStyle = {
+  background: "var(--wp-surface-card)",
+  border: "1px solid var(--wp-border-subtle)",
+  borderRadius: "var(--wp-radius-md)",
+  boxShadow: "var(--wp-shadow-lg)",
+  padding: "var(--wp-space-2) var(--wp-space-3)",
+  minWidth: 128
+};
+var dotStyle = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "var(--wp-radius-full)",
+  background: color,
+  flexShrink: 0
+});
+function renderTooltipContent(props, format) {
+  const { active, payload, label } = props;
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { style: tooltipBoxStyle, children: [
+    label !== void 0 && label !== null && label !== "" && /* @__PURE__ */ jsx("div", { className: "wp-label", style: { marginBottom: "var(--wp-space-1)" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 2 }, children: payload.filter((entry) => entry.type !== "none").map((entry, i) => {
+      const fillFromDatum = entry.payload !== null && typeof entry.payload === "object" ? entry.payload.fill : void 0;
+      const color = entry.color ?? fillFromDatum ?? "var(--wp-text-muted)";
+      const value = typeof entry.value === "number" ? format(entry.value) : String(entry.value ?? "");
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "wp-body-sm",
+          style: { display: "flex", alignItems: "center", gap: "var(--wp-space-2)" },
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: dotStyle(color) }),
+            /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-muted)" }, children: entry.name }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  marginLeft: "auto",
+                  paddingLeft: "var(--wp-space-3)",
+                  color: "var(--wp-text-strong)",
+                  fontWeight: 500,
+                  fontVariantNumeric: "tabular-nums"
+                },
+                children: value
+              }
+            )
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+function HtmlLegend({ items }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gap: "var(--wp-space-1) var(--wp-space-4)",
+        marginTop: "var(--wp-space-2)"
+      },
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "wp-caption",
+          style: { display: "inline-flex", alignItems: "center", gap: "var(--wp-space-1)" },
+          children: [
+            item.dashed ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { width: 12, height: 0, borderTop: `2px dashed ${item.color}`, flexShrink: 0 }
+              }
+            ) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: dotStyle(item.color) }),
+            item.label
+          ]
+        },
+        `${item.label}-${i}`
+      ))
+    }
+  );
+}
+var axisTick = { fill: "var(--wp-text-muted)", fontSize: 12 };
+function Chart({
+  type,
+  data,
+  xKey,
+  series,
+  height = 300,
+  valueFormat = "number",
+  legend = true,
+  donutCenter,
+  emptyText
+}) {
+  const hostRef = useRef(null);
+  const palette = useSeriesPalette(hostRef);
+  const recharts = useOptionalModule(loadRecharts);
+  const resolveColor = useCallback(
+    (color, index) => {
+      if (!color) return palette[index % palette.length];
+      if (/^[1-8]$/.test(color)) return palette[Number(color) - 1];
+      return color;
+    },
+    [palette]
+  );
+  const format = useMemo(() => getFormatter(valueFormat), [valueFormat]);
+  const rows = Array.isArray(data) ? data : [];
+  const seriesList = Array.isArray(series) ? series : [];
+  const shell = (body) => /* @__PURE__ */ jsx("div", { ref: hostRef, children: body });
+  if (recharts.status !== "ready") {
+    return shell(
+      /* @__PURE__ */ jsx(
+        DependencyPlaceholder,
+        {
+          packageName: "recharts",
+          purpose: "\uCC28\uD2B8",
+          height,
+          loading: recharts.status === "loading"
+        }
+      )
+    );
+  }
+  if (rows.length === 0 || seriesList.length === 0) {
+    return shell(
+      /* @__PURE__ */ jsx("div", { style: { minHeight: height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(EmptyState, { tight: true, title: emptyText ?? "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", children: "\uB370\uC774\uD130\uAC00 \uC9D1\uACC4\uB418\uBA74 \uCC28\uD2B8\uAC00 \uC5EC\uAE30\uC5D0 \uADF8\uB824\uC9D1\uB2C8\uB2E4." }) })
+    );
+  }
+  const {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Cell,
+    ComposedChart,
+    Line,
+    LineChart,
+    Pie,
+    PieChart,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
+  } = recharts.module;
+  const tooltipContent = (props) => renderTooltipContent(props, format);
+  if (type === "donut" || type === "pie") {
+    const nameKey = xKey ?? "name";
+    const valueKey = seriesList[0].key;
+    const sliceColor = (row, i) => resolveColor(typeof row.color === "string" ? row.color : void 0, i);
+    const legendItems2 = rows.map((row, i) => ({
+      label: String(row[nameKey] ?? `\uD56D\uBAA9 ${i + 1}`),
+      color: sliceColor(row, i)
+    }));
+    return shell(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height }, children: [
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+            /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent }),
+            /* @__PURE__ */ jsx(
+              Pie,
+              {
+                data: rows,
+                dataKey: valueKey,
+                nameKey,
+                innerRadius: type === "donut" ? "60%" : 0,
+                outerRadius: "88%",
+                paddingAngle: type === "donut" ? 1 : 0,
+                stroke: "var(--wp-surface-card)",
+                strokeWidth: 2,
+                isAnimationActive: false,
+                children: rows.map((row, i) => /* @__PURE__ */ jsx(Cell, { fill: sliceColor(row, i) }, i))
+              }
+            )
+          ] }) }),
+          type === "donut" && donutCenter && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 2,
+                pointerEvents: "none",
+                textAlign: "center"
+              },
+              children: [
+                donutCenter.value !== void 0 && /* @__PURE__ */ jsx("span", { className: "wp-metric-sm", children: donutCenter.value }),
+                donutCenter.label !== void 0 && /* @__PURE__ */ jsx("span", { className: "wp-caption", children: donutCenter.label })
+              ]
+            }
+          )
+        ] }),
+        legend && /* @__PURE__ */ jsx(HtmlLegend, { items: legendItems2 })
+      ] })
+    );
+  }
+  const kindOf = (s) => {
+    if (type === "bar") return "bar";
+    if (type === "line") return s.kind === "dashed-line" ? "dashed-line" : "line";
+    return s.kind ?? "bar";
+  };
+  const lastInStack = /* @__PURE__ */ new Map();
+  seriesList.forEach((s, i) => {
+    if (kindOf(s) === "bar" && s.stack) lastInStack.set(s.stack, i);
+  });
+  const barRadius = (s, i) => !s.stack || lastInStack.get(s.stack) === i ? [3, 3, 0, 0] : [0, 0, 0, 0];
+  const hasBar = seriesList.some((s) => kindOf(s) === "bar");
+  const legendItems = seriesList.map((s, i) => ({
+    label: s.label ?? s.key,
+    color: resolveColor(s.color, i),
+    dashed: kindOf(s) === "dashed-line"
+  }));
+  const marks = seriesList.map((s, i) => {
+    const color = resolveColor(s.color, i);
+    const name = s.label ?? s.key;
+    if (kindOf(s) === "bar") {
+      return /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: s.key,
+          name,
+          fill: color,
+          stackId: s.stack,
+          maxBarSize: 48,
+          radius: barRadius(s, i),
+          isAnimationActive: false
+        },
+        s.key
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: s.key,
+        name,
+        stroke: color,
+        strokeWidth: 2,
+        strokeDasharray: kindOf(s) === "dashed-line" ? "6 4" : void 0,
+        dot: false,
+        activeDot: { r: 4, strokeWidth: 2, stroke: "var(--wp-surface-card)" },
+        isAnimationActive: false
+      },
+      s.key
+    );
+  });
+  const axes = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--wp-divider)", vertical: false }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xKey,
+        tickLine: false,
+        axisLine: { stroke: "var(--wp-border-subtle)" },
+        tick: axisTick,
+        tickMargin: 6
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        tickLine: false,
+        axisLine: false,
+        tick: axisTick,
+        tickFormatter: (v) => format(v),
+        width: 52
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        cursor: hasBar ? { fill: "var(--wp-surface-sunken)", fillOpacity: 0.5 } : { stroke: "var(--wp-border-subtle)", strokeDasharray: "3 3" },
+        content: tooltipContent
+      }
+    )
+  ] });
+  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
+  const cartesian = type === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: rows, margin, children: [
+    axes,
+    marks
+  ] }) : type === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: rows, margin, children: [
+    axes,
+    marks
+  ] }) : /* @__PURE__ */ jsxs(ComposedChart, { data: rows, margin, children: [
+    axes,
+    marks
+  ] });
+  return shell(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: cartesian }) }),
+      legend && seriesList.length > 1 && /* @__PURE__ */ jsx(HtmlLegend, { items: legendItems })
+    ] })
+  );
+}
+var loadOl = async () => {
+  const [
+    map,
+    view,
+    tileLayer,
+    osm,
+    vectorLayer,
+    vectorSource,
+    feature,
+    point,
+    overlay,
+    style,
+    circle,
+    fill,
+    stroke,
+    proj,
+    extent,
+    controls,
+    interactions
+  ] = await Promise.all([
+    import('ol/Map'),
+    import('ol/View'),
+    import('ol/layer/Tile'),
+    import('ol/source/OSM'),
+    import('ol/layer/Vector'),
+    import('ol/source/Vector'),
+    import('ol/Feature'),
+    import('ol/geom/Point'),
+    import('ol/Overlay'),
+    import('ol/style/Style'),
+    import('ol/style/Circle'),
+    import('ol/style/Fill'),
+    import('ol/style/Stroke'),
+    import('ol/proj'),
+    import('ol/extent'),
+    import('ol/control/defaults'),
+    import('ol/interaction/defaults')
+  ]);
+  return {
+    Map: map.default,
+    View: view.default,
+    TileLayer: tileLayer.default,
+    OSM: osm.default,
+    VectorLayer: vectorLayer.default,
+    VectorSource: vectorSource.default,
+    Feature: feature.default,
+    Point: point.default,
+    Overlay: overlay.default,
+    Style: style.default,
+    CircleStyle: circle.default,
+    Fill: fill.default,
+    Stroke: stroke.default,
+    fromLonLat: proj.fromLonLat,
+    boundingExtent: extent.boundingExtent,
+    defaultControls: controls.defaults,
+    defaultInteractions: interactions.defaults
+  };
+};
+var ALWAYS_LABEL_MAX = 3;
+var FIT_MAX_ZOOM = 16;
+var DEFAULT_CENTER = [126.978, 37.5665];
+var TONE_TOKENS = {
+  brand: { token: "--wp-action-primary-bg", fallback: "#1d2c60" },
+  danger: { token: "--wp-action-danger-bg", fallback: "#ca1a1d" },
+  info: { token: "--wp-text-info", fallback: "#0a63ad" }
+};
+function resolveToken(el, token, fallback) {
+  const value = getComputedStyle(el).getPropertyValue(token).trim();
+  return value !== "" ? value : fallback;
+}
+function createLabelElement(text) {
+  const el = document.createElement("div");
+  el.className = "wp-caption wp-map__label";
+  el.textContent = text;
+  Object.assign(el.style, {
+    background: "var(--wp-surface-card)",
+    color: "var(--wp-text-default)",
+    border: "1px solid var(--wp-border-subtle)",
+    borderRadius: "var(--wp-radius-sm)",
+    boxShadow: "var(--wp-shadow-sm)",
+    padding: "var(--wp-space-1) var(--wp-space-2)",
+    whiteSpace: "nowrap",
+    pointerEvents: "none"
+  });
+  return el;
+}
+function MapPreview({
+  markers,
+  center,
+  zoom,
+  height = 280,
+  interactive = true
+}) {
+  const containerRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const ol = useOptionalModule(loadOl);
+  const olModule = ol.status === "ready" ? ol.module : null;
+  const markersKey = useMemo(() => JSON.stringify(Array.isArray(markers) ? markers : []), [markers]);
+  const centerLat = center?.lat;
+  const centerLng = center?.lng;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || olModule === null) return;
+    const {
+      Map: OlMap,
+      View,
+      TileLayer,
+      OSM,
+      VectorLayer,
+      VectorSource,
+      Feature,
+      Point,
+      Overlay,
+      Style,
+      CircleStyle,
+      Fill,
+      Stroke,
+      fromLonLat,
+      boundingExtent,
+      defaultControls,
+      defaultInteractions
+    } = olModule;
+    const markerList = JSON.parse(markersKey);
+    const strokeColor = resolveToken(container, "--wp-white", "#ffffff");
+    const toneStyles = {};
+    Object.keys(TONE_TOKENS).forEach((tone) => {
+      const { token, fallback } = TONE_TOKENS[tone];
+      toneStyles[tone] = new Style({
+        image: new CircleStyle({
+          radius: 7,
+          fill: new Fill({ color: resolveToken(container, token, fallback) }),
+          stroke: new Stroke({ color: strokeColor, width: 2 })
+        })
+      });
+    });
+    const features = markerList.map((marker, index) => {
+      const feature = new Feature({ geometry: new Point(fromLonLat([marker.lng, marker.lat])) });
+      feature.set("markerIndex", index);
+      feature.setStyle(toneStyles[marker.tone ?? "brand"]);
+      return feature;
+    });
+    const map = new OlMap({
+      target: container,
+      layers: [new TileLayer({ source: new OSM() }), new VectorLayer({ source: new VectorSource({ features }) })],
+      // OSM 라이선스상 저작자 표기(Attribution)는 항상 유지한다.
+      controls: defaultControls({ attribution: true, rotate: false, zoom: interactive }),
+      interactions: interactive ? defaultInteractions() : defaultInteractions({
+        altShiftDragRotate: false,
+        doubleClickZoom: false,
+        dragPan: false,
+        keyboard: false,
+        mouseWheelZoom: false,
+        pinchRotate: false,
+        pinchZoom: false,
+        shiftDragZoom: false
+      }),
+      view: new View({
+        center: fromLonLat(
+          centerLat !== void 0 && centerLng !== void 0 ? [centerLng, centerLat] : markerList.length > 0 ? [markerList[0].lng, markerList[0].lat] : DEFAULT_CENTER
+        ),
+        zoom: zoom ?? (markerList.length === 0 ? 11 : 15)
+      })
+    });
+    if (centerLat === void 0 && markerList.length > 1) {
+      map.getView().fit(boundingExtent(markerList.map((marker) => fromLonLat([marker.lng, marker.lat]))), {
+        padding: [48, 48, 48, 48],
+        maxZoom: zoom ?? FIT_MAX_ZOOM
+      });
+    }
+    const alwaysShow = markerList.length <= ALWAYS_LABEL_MAX;
+    const overlays = new Array(markerList.length).fill(null);
+    markerList.forEach((marker, index) => {
+      if (marker.label === void 0 || marker.label === "") return;
+      const overlay = new Overlay({
+        element: createLabelElement(marker.label),
+        positioning: "bottom-center",
+        offset: [0, -12],
+        stopEvent: false
+      });
+      if (alwaysShow) overlay.setPosition(fromLonLat([marker.lng, marker.lat]));
+      map.addOverlay(overlay);
+      overlays[index] = overlay;
+    });
+    if (interactive && !alwaysShow) {
+      map.on("pointermove", (event) => {
+        const feature = map.forEachFeatureAtPixel(event.pixel, (hit) => hit);
+        const hoverIndex = feature !== void 0 && feature !== null ? feature.get("markerIndex") : -1;
+        overlays.forEach((overlay, index) => {
+          if (overlay === null) return;
+          const positioned = overlay;
+          if (index === hoverIndex) {
+            const marker = markerList[index];
+            positioned.setPosition(fromLonLat([marker.lng, marker.lat]));
+          } else {
+            positioned.setPosition(void 0);
+          }
+        });
+        map.getTargetElement().style.cursor = hoverIndex >= 0 ? "pointer" : "";
+      });
+    }
+    setReady(true);
+    return () => {
+      map.setTarget(void 0);
+      setReady(false);
+    };
+  }, [olModule, markersKey, centerLat, centerLng, zoom, interactive]);
+  if (ol.status !== "ready") {
+    return /* @__PURE__ */ jsx(
+      DependencyPlaceholder,
+      {
+        packageName: "ol",
+        purpose: "\uC704\uCE58 \uBBF8\uB9AC\uBCF4\uAE30 \uC9C0\uB3C4",
+        height,
+        loading: ol.status === "loading"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: "wp-map",
+      style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", margin: 0, width: "100%" },
+      children: [
+        /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-mappreview", css: MAP_CSS }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              height,
+              width: "100%",
+              borderRadius: "var(--wp-radius-md)",
+              border: "1px solid var(--wp-border-subtle)",
+              overflow: "hidden",
+              background: "var(--wp-surface-sunken)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: containerRef,
+                  className: "wp-map__canvas",
+                  "aria-label": "\uC704\uCE58 \uBBF8\uB9AC\uBCF4\uAE30 \uC9C0\uB3C4",
+                  style: { position: "absolute", inset: 0 }
+                }
+              ),
+              !ready && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ jsx(Spinner, { label: "\uC9C0\uB3C4 \uC900\uBE44 \uC911" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("figcaption", { className: "wp-caption", style: { color: "var(--wp-text-subtle)" }, children: "\uC9C0\uB3C4 \uD0C0\uC77C: OpenStreetMap \u2014 \uB124\uD2B8\uC6CC\uD06C \uBBF8\uC5F0\uACB0 \uC2DC \uD0C0\uC77C\uC774 \uD45C\uC2DC\uB418\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4" })
+      ]
+    }
+  );
+}
+var MAP_CSS = `
+.wp-map .ol-viewport,.wp-map .ol-unselectable{-webkit-tap-highlight-color:transparent;user-select:none}
+.wp-map .ol-selectable{user-select:text}
+.wp-map .ol-grab{cursor:grab}
+.wp-map .ol-grabbing{cursor:grabbing}
+.wp-map .ol-control{position:absolute;display:flex;gap:2px;padding:2px;border-radius:var(--wp-radius-sm);background:rgba(255,255,255,0.72)}
+.wp-map .ol-zoom{top:var(--wp-space-2);left:var(--wp-space-2);flex-direction:column}
+.wp-map .ol-control button{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--wp-radius-sm);background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer}
+.wp-map .ol-control button:hover{background:var(--wp-action-primary-bg-hover)}
+.wp-map .ol-control button:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
+.wp-map .ol-attribution{right:var(--wp-space-2);bottom:var(--wp-space-2);max-width:calc(100% - 16px);flex-flow:row-reverse;align-items:center}
+.wp-map .ol-attribution ul{display:flex;gap:var(--wp-space-2);margin:0;padding:0 var(--wp-space-1);list-style:none;font-size:10.5px;color:var(--wp-text-muted)}
+.wp-map .ol-attribution a{color:var(--wp-text-link)}
+.wp-map .ol-attribution.ol-collapsed ul{display:none}
+`;
+
+// src/rich.ts
+var richComponents = {
+  Chart,
+  MapPreview
+};
+
+export { Chart, MapPreview, richComponents };