@element-editor/ui 0.0.0-stage → 0.2.0

package/dist/DataTable-DNmjUwka.js

@@ -0,0 +1,510 @@
+import { jsxs as v, jsx as l } from "react/jsx-runtime";
+import { useRef as oe, useState as le, useMemo as g, useCallback as se, useEffect as U } from "react";
+import { SelectColumn as ie, DataGrid as ce } from "react-data-grid";
+import { CaretDown as Z, Trash as V, ArrowUp as de, ArrowDown as ue } from "@phosphor-icons/react";
+import { f as k, u as me, g as pe, d as fe, e as he, h as ye } from "./useAdapterControls-DVjkwRZ_.js";
+import { useShallow as ge } from "zustand/react/shallow";
+import { getGeometryBBox as be } from "@element-editor/core";
+import { withXY as xe } from "@element-editor/core/internal";
+import { f as q } from "./EditToolbarBtn-SZIsnIn3.js";
+import { F as ke } from "./FeatureRowContextMenu-BLt7VlUU.js";
+import { u as ve } from "./useContextMenu-DJ2Cti85.js";
+import { f as E, h as _e, j as Ce, k as Ne } from "./index-CtZterPc.js";
+const Se = new Intl.Collator(void 0, { numeric: !0 }), we = /* @__PURE__ */ new Set(["_id", "_type", "_size", "_schemaId", "_schemaName", "_lat", "_lng"]);
+function O(a) {
+  const c = /* @__PURE__ */ new Set(), d = [];
+  for (const i of a)
+    for (const u of i.fields)
+      c.has(u.key) || (c.add(u.key), d.push(u));
+  return d;
+}
+function Ie(a) {
+  const c = (i) => `${i} point${i === 1 ? "" : "s"}`, d = (i, u) => `${i} part${i === 1 ? "" : "s"} · ${c(u)}`;
+  switch (a.type) {
+    case "Point":
+      return "";
+    case "MultiPoint":
+      return c(a.coordinates.length);
+    case "LineString":
+      return c(a.coordinates.length);
+    // Rings repeat their first position at the end: count it once.
+    case "Polygon":
+      return c(a.coordinates[0].length - 1);
+    case "MultiLineString":
+      return d(a.coordinates.length, a.coordinates.reduce((i, u) => i + u.length, 0));
+    case "MultiPolygon":
+      return d(a.coordinates.length, a.coordinates.reduce((i, u) => i + u[0].length - 1, 0));
+    case "GeometryCollection":
+      return `${a.geometries.length} part${a.geometries.length === 1 ? "" : "s"}`;
+    default:
+      return "";
+  }
+}
+function ze({ type: a }) {
+  return /* @__PURE__ */ v("span", { className: "flex items-center gap-1.5 flex-shrink-0 text-elm-text-secondary", children: [
+    /* @__PURE__ */ l("span", { className: "text-(--elm-text-subtle,var(--color-gray-400)) flex-shrink-0", children: /* @__PURE__ */ l(Ce, { type: a, size: 16 }) }),
+    /* @__PURE__ */ l("span", { className: "text-sm", children: Ne(a) })
+  ] });
+}
+function J({
+  row: a,
+  column: c,
+  onRowChange: d,
+  onClose: i
+}) {
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      autoFocus: !0,
+      type: "number",
+      step: "any",
+      className: "rdg-text-editor w-full h-full border-0 outline-none px-2 text-sm font-elm-mono bg-transparent text-inherit caret-primary-500",
+      value: String(a[c.key] ?? ""),
+      onChange: (u) => d({ ...a, [c.key]: u.target.value }),
+      onBlur: () => i(!0)
+    }
+  );
+}
+function H({ checked: a, label: c, disabled: d, onToggle: i, autoFocus: u }) {
+  return /* @__PURE__ */ l("span", { className: "flex h-full items-center px-0.5", children: /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": a,
+      "aria-label": c,
+      tabIndex: -1,
+      autoFocus: u,
+      disabled: d,
+      onClick: (f) => {
+        f.stopPropagation(), i();
+      },
+      className: `relative inline-flex h-4 w-7 flex-shrink-0 items-center rounded-full outline-none disabled:cursor-default enabled:cursor-pointer
+          ${a ? "bg-primary-500" : "bg-elm-border"} ${d ? "opacity-50" : "opacity-90 enabled:hover:opacity-100"}`,
+      children: /* @__PURE__ */ l(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: `absolute left-[2px] top-[2px] h-3 w-3 rounded-full border bg-white ${a ? "border-white" : "border-(--elm-border-strong,var(--color-gray-300))"}`,
+          style: { transform: a ? "translateX(12px)" : void 0 }
+        }
+      )
+    }
+  ) });
+}
+function Q(a) {
+  return function({
+    row: d,
+    column: i,
+    onRowChange: u,
+    onClose: f
+  }) {
+    const N = String(d[i.key] ?? "");
+    if (a.type === "boolean") {
+      const h = E(d[i.key]);
+      return /* @__PURE__ */ l("div", { className: "w-full h-full px-2", onBlur: () => f(!0), children: /* @__PURE__ */ l(H, { autoFocus: !0, checked: h, label: a.label, onToggle: () => u({ ...d, [i.key]: !h }) }) });
+    }
+    if (a.type === "select" && a.options)
+      return /* @__PURE__ */ v("div", { className: "relative w-full h-full", children: [
+        /* @__PURE__ */ v(
+          "select",
+          {
+            autoFocus: !0,
+            className: "rdg-text-editor w-full h-full border-0 outline-none pl-2 pr-7 text-sm bg-transparent text-inherit appearance-none",
+            value: N,
+            onChange: (h) => u({ ...d, [i.key]: h.target.value }),
+            onBlur: () => f(!0),
+            children: [
+              /* @__PURE__ */ l("option", { value: "", children: "—" }),
+              a.options.map((h) => /* @__PURE__ */ l("option", { value: h, children: h }, h))
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(Z, { size: 12, "aria-hidden": !0, className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 opacity-60" })
+      ] });
+    const m = a.type === "number" ? "number" : a.type === "date" ? "date" : a.type === "url" ? "url" : "text";
+    return /* @__PURE__ */ l(
+      "input",
+      {
+        autoFocus: !0,
+        type: m,
+        className: "rdg-text-editor w-full h-full border-0 outline-none px-2 text-sm bg-transparent text-inherit caret-primary-500",
+        value: N,
+        onChange: (h) => u({ ...d, [i.key]: h.target.value }),
+        onBlur: () => f(!0)
+      }
+    );
+  };
+}
+function C(a) {
+  return /* @__PURE__ */ l("span", { className: "block w-0 min-w-full truncate", children: a });
+}
+function De({ sortDirection: a, priority: c }) {
+  return a ? /* @__PURE__ */ v("span", { className: "flex h-full items-center gap-0.5 pl-1", children: [
+    /* @__PURE__ */ l(a === "ASC" ? de : ue, { size: 12, className: "shrink-0", "aria-hidden": !0 }),
+    c !== void 0 && c > 1 && /* @__PURE__ */ l("span", { className: "text-[10px] leading-none opacity-60", children: c })
+  ] }) : null;
+}
+function We({ schemaFilter: a, focusRowId: c, onFocusRowHandled: d, selectedRows: i, onSelectedRowsChange: u }) {
+  const f = k((e) => e.features), N = k((e) => e.groups), m = k(ge((e) => e.getVisibleSchemas())), h = k((e) => e.selectFeature), M = k((e) => e.updateFeature), B = k((e) => e.deleteFeature), b = me((e) => e.readonly), z = k((e) => e.selectedIds), { panTo: F, fitBounds: T } = pe(), K = fe(), G = oe(null), { dataStore: _ } = he(), j = ye(), x = ve(), [D, R] = le([]), S = g(() => {
+    if (a === "all") return O(m);
+    const e = m.find((t) => t.id === a);
+    return e ? e.fields : O(m);
+  }, [m, a]), A = g(() => {
+    const e = {};
+    for (const t of m) e[t.id] = t.name;
+    return e;
+  }, [m]), W = g(() => {
+    var o;
+    const e = /* @__PURE__ */ new Map(), t = [];
+    for (const s of f) {
+      if (!s.groupId) {
+        t.push(s);
+        continue;
+      }
+      const p = e.get(s.groupId);
+      p ? p.push(s) : e.set(s.groupId, [s]);
+    }
+    const r = [
+      ...N.flatMap((s) => e.get(s.id) ?? []),
+      ...t
+    ];
+    if (a === "all") return r;
+    const n = (o = m[0]) == null ? void 0 : o.id;
+    return r.filter((s) => (s.schemaId ?? n) === a);
+  }, [f, N, m, a]), w = g(
+    () => W.map((e) => {
+      var o, s;
+      let t = "", r = "";
+      if (e.geometry.type === "Point") {
+        const [p, y] = e.geometry.coordinates;
+        t = String(y), r = String(p);
+      }
+      const n = e.schemaId ?? ((o = m[0]) == null ? void 0 : o.id) ?? "";
+      return {
+        _id: e.id,
+        _type: e.geometry.type,
+        _size: Ie(e.geometry),
+        _schemaId: n,
+        _schemaName: A[n] ?? ((s = m[0]) == null ? void 0 : s.name) ?? "",
+        _lat: t,
+        _lng: r,
+        ...e.properties
+      };
+    }),
+    [W, A, m]
+  ), P = g(() => new Set(S.filter((e) => e.type === "boolean").map((e) => e.key)), [S]), $ = g(() => {
+    if (D.length === 0) return w;
+    const e = (t, r) => P.has(r) ? E(t[r]) ? "1" : "0" : String(t[r] ?? "");
+    return [...w].sort((t, r) => {
+      for (const n of D) {
+        const o = e(t, n.columnKey), s = e(r, n.columnKey), p = Se.compare(o, s);
+        if (p !== 0) return n.direction === "ASC" ? p : -p;
+      }
+      return 0;
+    });
+  }, [w, D, P]), X = g(() => w.some((e) => e._type === "Point"), [w]), L = se((e, t) => {
+    var o;
+    if (b) return;
+    const r = _.getState(), n = r.features.find((s) => s.id === e);
+    n && r.updateFeatures([{ id: e, patch: { properties: { ...n.properties, [t]: !E((o = n.properties) == null ? void 0 : o[t]) } } }]);
+  }, [_, b]), Y = g(() => {
+    const e = [
+      ie,
+      {
+        key: "_type",
+        name: C("Type"),
+        width: 150,
+        resizable: !0,
+        sortable: !0,
+        renderCell: ({ row: t }) => /* @__PURE__ */ v("span", { className: "flex items-center gap-2 min-w-0", children: [
+          /* @__PURE__ */ l(ze, { type: t._type }),
+          t._size && /* @__PURE__ */ l("span", { className: "truncate text-xs text-elm-text-muted", children: t._size })
+        ] })
+      }
+    ];
+    m.length > 1 && e.push({
+      key: "_schemaName",
+      name: C("Schema"),
+      width: 100,
+      resizable: !0,
+      sortable: !0,
+      editable: !0,
+      renderCell: ({ row: t }) => /* @__PURE__ */ l("span", { className: "inline-block px-1.5 py-0.5 rounded-elm-chip bg-elm-surface-hover text-(--elm-text-secondary,var(--color-gray-600)) dark:text-(--elm-text-secondary,var(--color-gray-300)) text-[10px] font-medium", children: t._schemaName }),
+      renderEditCell: ({ row: t, onRowChange: r, onClose: n }) => /* @__PURE__ */ v("div", { className: "relative w-full h-full", children: [
+        /* @__PURE__ */ l(
+          "select",
+          {
+            autoFocus: !0,
+            className: "rdg-text-editor w-full h-full border-0 outline-none pl-2 pr-7 text-sm appearance-none",
+            value: t._schemaId,
+            onChange: (o) => {
+              const s = m.find((p) => p.id === o.target.value);
+              s && r({ ...t, _schemaId: s.id, _schemaName: s.name });
+            },
+            onBlur: () => n(!0),
+            children: m.map((o) => /* @__PURE__ */ l("option", { value: o.id, children: o.name }, o.id))
+          }
+        ),
+        /* @__PURE__ */ l(Z, { size: 12, "aria-hidden": !0, className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 opacity-60" })
+      ] })
+    }), X && e.push(
+      {
+        key: "_lat",
+        name: C("Lat"),
+        width: 110,
+        resizable: !0,
+        sortable: !0,
+        editable: (t) => t._type === "Point",
+        renderCell: ({ row: t }) => /* @__PURE__ */ l("span", { className: "font-elm-mono text-xs text-(--elm-text-secondary,var(--color-gray-600)) dark:text-(--elm-text-secondary,var(--color-gray-300))", children: t._lat }),
+        renderEditCell: J
+      },
+      {
+        key: "_lng",
+        name: C("Lng"),
+        width: 110,
+        resizable: !0,
+        sortable: !0,
+        editable: (t) => t._type === "Point",
+        renderCell: ({ row: t }) => /* @__PURE__ */ l("span", { className: "font-elm-mono text-xs text-(--elm-text-secondary,var(--color-gray-600)) dark:text-(--elm-text-secondary,var(--color-gray-300))", children: t._lng }),
+        renderEditCell: J
+      }
+    );
+    for (const t of S) {
+      if (t.type === "boolean") {
+        e.push({
+          key: t.key,
+          name: C(t.label),
+          minWidth: 80,
+          resizable: !0,
+          sortable: !0,
+          // Editable so rdg routes paste here (it also needs a renderEditCell); keys and
+          // double-click toggle instead of opening the editor (onCellKeyDown / onCellDoubleClick).
+          editable: !0,
+          renderCell: ({ row: r }) => /* @__PURE__ */ l(
+            H,
+            {
+              checked: E(r[t.key]),
+              label: t.label,
+              disabled: b,
+              onToggle: () => L(r._id, t.key)
+            }
+          ),
+          renderEditCell: Q(t)
+        });
+        continue;
+      }
+      e.push({
+        key: t.key,
+        name: C(t.label),
+        // Room for a typical name; other fields size to their content (resizable).
+        ...t.key === "name" && { width: 200 },
+        minWidth: 80,
+        resizable: !0,
+        sortable: !0,
+        editable: !0,
+        renderEditCell: Q(t)
+      });
+    }
+    return e.push({
+      key: "_spacer",
+      name: "",
+      minWidth: 0,
+      width: "minmax(0, 1fr)",
+      resizable: !1,
+      sortable: !1,
+      renderCell: () => null
+    }), e.push({
+      key: "_delete",
+      name: "",
+      width: 36,
+      resizable: !1,
+      sortable: !1,
+      // With rows checked, the delete column's header deletes them all —
+      // same spot as the per-row delete buttons. One undo step. (The selected
+      // count is shown in the panel toolbar next to the feature count.)
+      renderHeaderCell: () => i.size > 0 ? /* @__PURE__ */ l("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ l(q, { content: `Delete ${i.size} selected`, children: /* @__PURE__ */ l(
+        "button",
+        {
+          "aria-label": `Delete ${i.size} selected`,
+          onMouseDown: (t) => t.stopPropagation(),
+          onClick: (t) => {
+            t.stopPropagation();
+            const r = _.getState(), n = i.size;
+            r.setSelection([...i]), r.deleteSelection(), u(/* @__PURE__ */ new Set()), j({ type: "features:deleted", count: n, undo: () => _.getState().undo() });
+          },
+          className: "w-7 h-7 rounded-elm-control flex items-center justify-center text-(--elm-text-secondary,var(--color-gray-600)) dark:text-(--elm-text-secondary,var(--color-gray-300)) hover:bg-(--elm-surface-hover,var(--color-gray-100)) dark:hover:bg-(--elm-surface-hover,var(--color-gray-700)) hover:text-(--elm-text-secondary,var(--color-gray-700)) dark:hover:text-(--elm-text-secondary,var(--color-gray-200)) transition-colors",
+          children: /* @__PURE__ */ l(V, { size: 16 })
+        }
+      ) }) }) : null,
+      renderCell: ({ row: t }) => /* @__PURE__ */ l("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ l(q, { content: "Delete row", children: /* @__PURE__ */ l(
+        "button",
+        {
+          onMouseDown: (r) => r.stopPropagation(),
+          onClick: (r) => {
+            r.stopPropagation(), B(t._id);
+          },
+          className: "w-7 h-7 rounded-elm-control flex items-center justify-center text-elm-text hover:bg-(--elm-surface-hover,var(--color-gray-100)) dark:hover:bg-(--elm-surface-hover,var(--color-gray-700)) transition-colors",
+          children: /* @__PURE__ */ l(V, { size: 16 })
+        }
+      ) }) })
+    }), b ? e.filter((t) => t.key !== "_delete").map((t) => ({ ...t, editable: !1 })) : e;
+  }, [S, m.length, X, B, i, u, _, j, b, L]);
+  U(() => {
+    if (!c) return;
+    const e = $.findIndex((r) => r._id === c);
+    if (e === -1) return;
+    const t = Y.findIndex((r) => r.key === "_lat");
+    t !== -1 && requestAnimationFrame(() => {
+      var r;
+      (r = G.current) == null || r.selectCell({ rowIdx: e, idx: t }, { enableEditor: !0 }), d == null || d();
+    });
+  }, [c]), U(() => {
+    var t;
+    if (z.length === 0) return;
+    const e = $.findIndex((r) => r._id === z[0]);
+    e !== -1 && ((t = G.current) == null || t.scrollToCell({ rowIdx: e }));
+  }, [z]);
+  function ee(e, { indexes: t }) {
+    var p;
+    if (b) return;
+    const r = e[t[0]], n = {};
+    for (const [y, I] of Object.entries(r))
+      we.has(y) || (n[y] = I);
+    const o = f.find((y) => y.id === r._id), s = (o == null ? void 0 : o.schemaId) ?? ((p = m[0]) == null ? void 0 : p.id) ?? "";
+    if (r._schemaId !== s) {
+      M(r._id, { schemaId: r._schemaId, properties: n });
+      return;
+    }
+    if ((o == null ? void 0 : o.geometry.type) === "Point") {
+      const y = parseFloat(r._lat), I = parseFloat(r._lng), [ne, ae] = o.geometry.coordinates;
+      if (!isNaN(y) && !isNaN(I) && (y !== ae || I !== ne)) {
+        _.getState().takeSnapshot(), M(r._id, {
+          geometry: { type: "Point", coordinates: xe(o.geometry.coordinates, [I, y]) },
+          properties: n
+        });
+        return;
+      }
+    }
+    M(r._id, { properties: n });
+  }
+  function te({ row: e, column: t }, r) {
+    const n = r.clipboardData.getData("text/plain").split(/\r?\n/)[0].split("	")[0].trim();
+    if (!n || b) return e;
+    if (t.key === "_schemaName") {
+      const s = m.find((p) => p.name === n || p.id === n);
+      return s ? { ...e, _schemaId: s.id, _schemaName: s.name } : e;
+    }
+    if (t.key === "_lat" || t.key === "_lng")
+      return Number.isFinite(Number(n)) ? { ...e, [t.key]: n } : e;
+    const o = S.find((s) => s.key === t.key);
+    if ((o == null ? void 0 : o.type) === "boolean") {
+      const s = _e(n);
+      return s === null ? e : { ...e, [t.key]: s };
+    }
+    return (o == null ? void 0 : o.type) === "number" ? Number.isFinite(Number(n)) ? { ...e, [t.key]: n } : e : (o == null ? void 0 : o.type) === "select" && o.options && !o.options.includes(n) ? e : { ...e, [t.key]: n };
+  }
+  function re(e) {
+    if (u(e), e.size !== 1) return;
+    const t = [...e][0];
+    h(t);
+    const r = f.find((n) => n.id === t);
+    if (r)
+      if (r.geometry.type === "Point") {
+        const [n, o] = r.geometry.coordinates;
+        F == null || F([o, n]);
+      } else
+        T == null || T(r.bbox || be(r.geometry));
+  }
+  return (
+    // Prevent the browser's native text-selection that fires on double-click
+    // (mousedown with detail>=2). react-data-grid's own click/dblclick handlers
+    // are unaffected — they fire as separate events after mousedown. We exempt
+    // inputs/selects so text selection inside edit cells still works normally.
+    /* @__PURE__ */ v(
+      "div",
+      {
+        className: "contents",
+        onMouseDown: (e) => {
+          e.detail >= 2 && !e.target.closest("input, select, textarea") && e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ l(
+            ce,
+            {
+              ref: G,
+              columns: Y,
+              rows: $,
+              rowKeyGetter: (e) => e._id,
+              rowClass: (e) => z.includes(e._id) ? "elm-row-active" : void 0,
+              onRowsChange: ee,
+              renderers: { renderSortStatus: De },
+              sortColumns: D,
+              onSortColumnsChange: R,
+              selectedRows: i,
+              onSelectedRowsChange: re,
+              onCellPaste: te,
+              onCellKeyDown: ({ mode: e, row: t, column: r }, n) => {
+                e !== "SELECT" || !P.has(r.key) || n.key === " " && n.shiftKey || (n.key === " " || n.key === "Enter" ? (n.preventGridDefault(), n.preventDefault(), L(t._id, r.key)) : n.key.length === 1 && !n.ctrlKey && !n.metaKey && !n.altKey && n.preventGridDefault());
+              },
+              onCellDoubleClick: ({ column: e }, t) => {
+                P.has(e.key) && t.preventGridDefault();
+              },
+              onCellContextMenu: ({ row: e }, t) => {
+                const r = f.find((n) => n.id === e._id);
+                r && (t.preventGridDefault(), t.preventDefault(), x.open(t.clientX, t.clientY, r));
+              },
+              className: K === "dark" ? "rdg-dark" : "rdg-light",
+              style: (
+                // Cells are transparent so the surrounding DataTablePanel's
+                // `bg-elm-surface/95 backdrop-blur-md` shows through —
+                // matches the LayersPanel chrome exactly. Sticky cells (last-column
+                // row-delete + header) need a SOLID bg to mask horizontally-scrolling
+                // content underneath, so they get a panel-matching OPAQUE colour via
+                // `--elm-rdg-sticky-bg` (used by sticky rules in index.css) — the header
+                // row is sticky on scroll too, so it uses the same colour instead of
+                // transparent (rows showed through it). 95% would still leak. Hover /
+                // selected stay solid because they need to be readable on top of the
+                // panel.
+                {
+                  // Design tokens; the fallbacks are react-data-grid's own text/border
+                  // colours we used before (#000 / #ddd light, #e5e5e5 / #404040 dark).
+                  ...K === "dark" ? {
+                    "--rdg-color": "var(--elm-text, #e5e5e5)",
+                    "--rdg-border-color": "var(--elm-border, #404040)",
+                    "--rdg-selection-color": "var(--color-primary-400)"
+                  } : {
+                    "--rdg-color": "var(--elm-text, #000)",
+                    "--rdg-border-color": "var(--elm-border, #ddd)",
+                    "--rdg-selection-color": "var(--color-primary-500)"
+                  },
+                  "--rdg-background-color": "transparent",
+                  "--rdg-header-background-color": "var(--elm-surface, var(--_elm-surface))",
+                  "--elm-rdg-sticky-bg": "var(--elm-surface, var(--_elm-surface))",
+                  blockSize: "100%",
+                  // Row states share the per-theme --elm-row-* tokens with FeatureRow (index.css).
+                  "--rdg-row-hover-background-color": "var(--elm-row-hover)",
+                  "--rdg-row-selected-background-color": "var(--elm-row-checked)",
+                  "--rdg-row-selected-hover-background-color": "var(--elm-row-checked-hover)"
+                }
+              )
+            }
+          ),
+          x.state && /* @__PURE__ */ l(
+            ke,
+            {
+              x: x.state.x,
+              y: x.state.y,
+              feature: f.find((e) => e.id === x.state.data.id) ?? x.state.data,
+              onClose: x.close,
+              showGrouping: !1
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  We as default
+};

package/dist/DataTablePanel-BknCxC1K.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("./useAdapterControls-BBObhzVX.cjs"),d=require("./index-BKdDZ4Y9.cjs"),r=require("react"),R=require("clsx"),S=require("@phosphor-icons/react"),Z=require("zustand/react/shallow"),ee=require("@element-editor/core/internal"),te=require("./useAccentStyle-hsGvyHZc.cjs"),E=require("./EditToolbarBtn-dpCmKnzk.cjs"),re=160,se=80;try{CSS.registerProperty({name:"--elm-table-offset",syntax:"<length>",inherits:!0,initialValue:"0px"})}catch{}const M="px-2.5 py-1 rounded-elm-control text-xs font-medium bg-elm-surface text-elm-text ring-1 ring-primary-400 outline-none";function ne({initialValue:a,onCommit:m,onCancel:v}){const[s,f]=r.useState(a),y=r.useRef(null),[h,w]=r.useState(void 0);return r.useLayoutEffect(()=>{const n=y.current;n&&w(n.offsetWidth+4)},[s]),t.jsxs(t.Fragment,{children:[t.jsx("span",{ref:y,"aria-hidden":!0,className:`${M} absolute invisible pointer-events-none whitespace-pre left-[-9999px] top-[-9999px]`,children:s||" "}),t.jsx("input",{autoFocus:!0,value:s,onFocus:n=>n.currentTarget.select(),onChange:n=>f(n.target.value),onBlur:()=>m(s.trim()),onKeyDown:n=>{n.key==="Enter"&&n.currentTarget.blur(),n.key==="Escape"&&(v(),n.preventDefault())},style:{width:h},className:M})]})}const B=`flex ${d.panelHeaderIconBtn.replace("hover:bg-(--elm-surface-hover,var(--color-gray-100))","hover:bg-(--elm-surface-hover,var(--color-gray-200))")}`;function oe({embedded:a=!1}={}){const{dataStore:m}=o.useGeoStore(),v=te.useElementEditorConfig(),s=o.useUIStore(e=>e.tableOpen),f=o.useUIStore(e=>e.readonly),y=o.useUIStore(e=>e.toggleTable),h=o.useUIStore(e=>e.setTableFullscreen),w=o.useUIStore(ee.sidebarTakesSpace),n=o.useUIStore(e=>e.sidebarWidth),$=o.useUIStore(e=>e.codeDockWidth),V=v.ui.layerList&&w,j=o.useDataStore(e=>e.features.length),F=o.useDataStore(Z.useShallow(e=>e.getVisibleSchemas())),{getCenter:I}=o.useMapController(),[g,W]=r.useState(()=>typeof window>"u"?360:Math.round(window.innerHeight*.42)),[x,L]=r.useState("all"),[i,O]=r.useState(!1);r.useEffect(()=>(h(i),()=>h(!1)),[i,h]);const[_,N]=r.useState(null),[C,G]=r.useState(new Set),[X,T]=r.useState(null),H=r.useRef(!1);(s||a)&&(H.current=!0);const[D,P]=r.useState(!s);r.useEffect(()=>{if(s){P(!1);return}const e=setTimeout(()=>P(!0),200);return()=>clearTimeout(e)},[s]);const u=r.useRef(null),K=r.useCallback(e=>{e.button===0&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),u.current=d.startDragShield("row-resize",e.currentTarget))},[]),Y=r.useCallback(e=>{if(!u.current)return;const c=Math.round(window.innerHeight*se/100),l=Math.min(c,Math.max(re,window.innerHeight-e.clientY));W(l)},[]),A=r.useCallback(()=>{var e;(e=u.current)==null||e.call(u),u.current=null},[]),q=r.useRef(null);r.useEffect(()=>{var l;if(a)return;const e=(l=q.current)==null?void 0:l.closest("[data-elm-theme]");if(!e)return;const c=s?i?e.clientHeight:g:0;return e.style.setProperty("--elm-table-offset",`${c}px`),e.style.transition||requestAnimationFrame(()=>{e.style.transition="--elm-table-offset 200ms ease"}),()=>{e.style.setProperty("--elm-table-offset","0px")}},[a,s,i,g]);const J=a?"absolute inset-0 bg-elm-surface flex flex-col":R.clsx("absolute left-0 z-20 bg-elm-surface border-t border-elm-border/80 flex flex-col transition-[right] duration-200 ease-[ease]",!s&&D&&"invisible"),Q=a?void 0:i?{top:0,bottom:0,right:0,height:"100%"}:{height:g,bottom:`calc(min(var(--elm-table-offset, 0px), ${g}px) - ${g}px)`,right:(V?n:0)+$};return t.jsxs("div",{ref:q,className:J,style:Q,children:[!a&&!i&&t.jsx("div",{className:d.resizeEdgeTop,onPointerDown:K,onPointerMove:Y,onPointerUp:A,onLostPointerCapture:A}),t.jsxs("div",{className:`${d.panelHeaderBar} gap-3 px-4`,children:[!f&&t.jsx(E.Tooltip,{content:"Add new entry",children:t.jsxs(E.Button,{variant:"primary",size:"sm",onClick:()=>{const e=(I==null?void 0:I())??[0,0],{schemas:c,getDefaultSchema:l}=m.getState(),k=x!=="all"&&c.find(b=>b.id===x)?x:l().id,p=c.find(b=>b.id===k)??l(),U={};for(const b of p.fields)U[b.key]="";const z=crypto.randomUUID();m.getState().addFeature({type:"Feature",id:z,schemaId:k,geometry:{type:"Point",coordinates:e},properties:U})&&N(z)},children:[t.jsx(S.Plus,{size:11,weight:"bold"}),"Add new"]})}),t.jsxs("span",{className:"text-xs text-elm-text-muted",children:[j," feature",j!==1?"s":"",C.size>0&&`, ${C.size} selected`]}),F.length>1&&t.jsx("div",{role:"tablist","aria-label":"Filter by schema",className:"ml-1 flex items-center gap-0.5 text-xs",children:[{id:"all",name:"All"},...F].map(e=>{const c=x===e.id,l=e.id==="all";return X===e.id?t.jsx(ne,{initialValue:e.name,onCommit:p=>{p&&p!==e.name&&m.getState().updateSchema(e.id,{name:p}),T(null)},onCancel:()=>T(null)},e.id):t.jsx("button",{type:"button",role:"tab","aria-selected":c,onClick:()=>L(e.id),onDoubleClick:()=>{!l&&!f&&T(e.id)},title:l||f?void 0:"Double-click to rename",className:R.clsx("px-2.5 py-1 rounded-elm-control transition-colors whitespace-nowrap",c?"bg-elm-surface hover:bg-(--elm-surface-hover,var(--color-gray-50)) dark:hover:bg-(--elm-surface-hover,var(--color-gray-800)) text-elm-text font-medium shadow-sm ring-1 ring-(--elm-border,var(--color-gray-200)) dark:ring-(--elm-border,var(--color-gray-700))":"text-(--elm-text-secondary,var(--color-gray-600)) dark:text-(--elm-text-secondary,var(--color-gray-300)) hover:bg-(--elm-surface-hover,var(--color-gray-200)) dark:hover:bg-(--elm-surface-hover,var(--color-gray-700))"),children:e.name},e.id)})}),!a&&t.jsxs("div",{className:"ml-auto flex items-center gap-1",children:[t.jsx(E.Tooltip,{content:i?"Exit fullscreen":"Fullscreen",children:t.jsx("button",{type:"button",onClick:()=>O(e=>!e),"aria-label":i?"Exit fullscreen":"Fullscreen",className:B,children:i?t.jsx(S.ArrowsInSimple,{size:16}):t.jsx(S.ArrowsOutSimple,{size:16})})}),t.jsx("button",{type:"button",onClick:y,"aria-label":"Close data table",className:B,children:t.jsx(S.X,{size:16})})]})]}),t.jsx("div",{className:R.clsx("flex-1 min-h-0 overflow-hidden",!a&&!s&&D&&"hidden"),children:j===0?t.jsx(d.NoFeaturesEmptyState,{}):H.current&&t.jsx(r.Suspense,{fallback:t.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-sm text-(--elm-text-subtle,var(--color-gray-400))",children:"Loading grid..."}),children:t.jsx(d.DataTable,{schemaFilter:x,focusRowId:_,onFocusRowHandled:()=>N(null),selectedRows:C,onSelectedRowsChange:G})})})]})}exports.default=oe;