@memobit/libs 3.0.0 → 3.1.0

package/dist/components/DateRangePicker/DateRangePicker2.js

@@ -0,0 +1,223 @@
+import './DateRangePicker.css';
+import { Button as _ } from "../Button/Button2.js";
+import { Tooltip as J } from "../Tooltip/Tooltip2.js";
+import { addMonths as x } from "../../helpers/Datetime.js";
+import { Calendar as Q } from "../Calendar/Calendar2.js";
+import { InputText as U } from "../InputText/InputText2.js";
+/* empty css                */
+import { useCallback as ce, useEffect as k, useMemo as le, useRef as W, useState as m } from "react";
+import { Fragment as he, jsx as t, jsxs as s } from "react/jsx-runtime";
+import { createPortal as me } from "react-dom";
+var u = (a) => {
+  if (!a) return;
+  const [d, w, c] = a.split("-").map((g) => Number(g));
+  if (!(!d || !w || !c))
+    return new Date(d, w - 1, c);
+}, R = (a) => `${a.getFullYear()}-${String(a.getMonth() + 1).padStart(2, "0")}-${String(a.getDate()).padStart(2, "0")}`, De = ({ label: a, value: d, onChange: w, min: c, max: g, alwaysOpen: i = !1, autoClose: X = !0, presets: f, firstDayOfWeek: B = 0 }) => {
+  const [Z, O] = m({}), [l, M] = m(() => /* @__PURE__ */ new Date()), [F, I] = m(null), [$, p] = m(i), [ee, z] = m({
+    position: "fixed",
+    visibility: "hidden"
+  }), [S, N] = m(d?.start ?? ""), [L, E] = m(d?.end ?? ""), D = W(null), b = W(null), r = d ?? Z, H = u(r.start), P = u(r.end), T = H && P ? {
+    start: H,
+    end: P
+  } : void 0, y = (e) => {
+    d || O(e), w?.(e);
+  }, A = (e) => {
+    e && typeof e == "object" && "start" in e && (y({
+      start: R(e.start),
+      end: R(e.end)
+    }), I(null), !i && X && p(!1));
+  }, j = (e) => {
+    I(e);
+  }, V = (e) => /^\d{4}-\d{2}-\d{2}$/.test(e) && u(e) !== void 0, te = () => {
+    V(S) ? y({
+      ...r,
+      start: S
+    }) : N(r.start ?? "");
+  }, ne = () => {
+    V(L) ? y({
+      ...r,
+      end: L
+    }) : E(r.end ?? "");
+  }, q = (e) => {
+    const o = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
+    n.setDate(n.getDate() - e), y({
+      start: R(n),
+      end: R(o)
+    });
+  };
+  k(() => {
+    N(r.start ?? "");
+  }, [r.start]), k(() => {
+    E(r.end ?? "");
+  }, [r.end]);
+  const Y = le(() => x(l, 1), [l]), K = i || $, h = !i && $, v = ce(() => {
+    if (!h || !D.current || !b.current) return;
+    const e = D.current.getBoundingClientRect(), o = b.current.getBoundingClientRect(), n = 16, C = 8, ae = window.innerHeight - e.bottom - n, re = e.top - n, oe = ae < o.height && re > o.height ? e.top - o.height - C : e.bottom + C, ie = Math.max(n, Math.min(oe, window.innerHeight - o.height - n)), se = e.left, de = Math.max(n, Math.min(se, window.innerWidth - o.width - n));
+    z({
+      position: "fixed",
+      top: `${ie}px`,
+      left: `${de}px`,
+      zIndex: 1e3
+    });
+  }, [h]);
+  k(() => {
+    i && p(!0);
+  }, [i]), k(() => {
+    if (!h) {
+      z({
+        position: "fixed",
+        visibility: "hidden"
+      });
+      return;
+    }
+    const e = requestAnimationFrame(() => requestAnimationFrame(v));
+    return window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
+      cancelAnimationFrame(e), window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
+    };
+  }, [h, v]), k(() => {
+    if (!h) return;
+    const e = (n) => {
+      const C = n.target;
+      D.current?.contains(C) || b.current?.contains(C) || p(!1);
+    }, o = (n) => {
+      n.key === "Escape" && p(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+    };
+  }, [h]);
+  const G = /* @__PURE__ */ s("div", {
+    className: "date-range-picker__calendar",
+    children: [/* @__PURE__ */ s("div", {
+      className: "date-range-picker__nav",
+      children: [
+        /* @__PURE__ */ t(J, {
+          title: "Previous month",
+          children: /* @__PURE__ */ t(_, {
+            variant: "default",
+            icon: "caret-left",
+            onClick: () => M(x(l, -1))
+          })
+        }),
+        /* @__PURE__ */ s("span", { children: [
+          l.toLocaleString("default", { month: "long" }),
+          " ",
+          l.getFullYear(),
+          " -",
+          Y.toLocaleString("default", { month: "long" }),
+          " ",
+          Y.getFullYear()
+        ] }),
+        /* @__PURE__ */ t(J, {
+          title: "Next month",
+          children: /* @__PURE__ */ t(_, {
+            variant: "default",
+            icon: "caret-right",
+            onClick: () => M(x(l, 1))
+          })
+        })
+      ]
+    }), /* @__PURE__ */ s("div", {
+      className: "date-range-picker__months",
+      children: [/* @__PURE__ */ t(Q, {
+        mode: "range",
+        value: T,
+        onChange: A,
+        rangeStart: F,
+        onRangeStartChange: j,
+        currentMonth: l,
+        onMonthChange: M,
+        showHeader: !1,
+        showToday: !1,
+        firstDayOfWeek: B,
+        minDate: c ? u(c) : void 0,
+        maxDate: g ? u(g) : void 0
+      }), /* @__PURE__ */ t(Q, {
+        mode: "range",
+        value: T,
+        onChange: A,
+        rangeStart: F,
+        onRangeStartChange: j,
+        currentMonth: Y,
+        onMonthChange: M,
+        showHeader: !1,
+        showToday: !1,
+        firstDayOfWeek: B,
+        minDate: c ? u(c) : void 0,
+        maxDate: g ? u(g) : void 0
+      })]
+    })]
+  });
+  return /* @__PURE__ */ s("div", {
+    ref: D,
+    className: "date-range-picker",
+    children: [
+      a && f && f.length > 0 ? /* @__PURE__ */ s("div", {
+        className: "date-range-picker__label-row",
+        children: [/* @__PURE__ */ t("label", {
+          className: "date-range-picker__label",
+          children: a
+        }), /* @__PURE__ */ t("div", {
+          className: "date-range-picker__presets",
+          children: f.map((e) => /* @__PURE__ */ t(_, {
+            size: "small",
+            variant: "default",
+            onClick: () => q(e.days),
+            children: e.label
+          }, e.days))
+        })]
+      }) : /* @__PURE__ */ s(he, { children: [a && /* @__PURE__ */ t("label", {
+        className: "date-range-picker__label",
+        children: a
+      }), f && f.length > 0 && /* @__PURE__ */ t("div", {
+        className: "date-range-picker__presets",
+        children: f.map((e) => /* @__PURE__ */ t(_, {
+          size: "small",
+          variant: "default",
+          onClick: () => q(e.days),
+          children: e.label
+        }, e.days))
+      })] }),
+      /* @__PURE__ */ s("div", {
+        className: "date-range-picker__inputs",
+        children: [
+          /* @__PURE__ */ t(U, {
+            value: S,
+            placeholder: "YYYY-MM-DD",
+            maxLength: 10,
+            onChange: N,
+            onBlur: te
+          }),
+          /* @__PURE__ */ t("span", {
+            className: "date-range-picker__separator",
+            children: "to"
+          }),
+          /* @__PURE__ */ t(U, {
+            value: L,
+            placeholder: "YYYY-MM-DD",
+            maxLength: 10,
+            onChange: E,
+            onBlur: ne
+          }),
+          !i && /* @__PURE__ */ t(_, {
+            className: "date-range-picker__toggle",
+            variant: "default",
+            onClick: () => p((e) => !e),
+            children: K ? "Hide calendar" : "Choose dates"
+          })
+        ]
+      }),
+      i && K && G,
+      h && me(/* @__PURE__ */ t("div", {
+        ref: b,
+        className: "date-range-picker__overlay",
+        style: ee,
+        children: G
+      }), document.body)
+    ]
+  });
+};
+export {
+  De as DateRangePicker
+};

package/dist/components/DayAgenda/DayAgenda.css

@@ -0,0 +1 @@
+.day-agenda .drawer__content{flex-direction:column;min-height:0;display:flex}.day-agenda__weekday{justify-content:space-between;align-items:baseline;gap:var(--spacing-8);margin-bottom:var(--spacing-12);font-size:var(--font-size-sm);color:var(--body-color-muted);display:flex}.day-agenda__empty{font-size:var(--font-size-xs);color:var(--body-sub-title-color);opacity:.7}.day-agenda__all-day,.day-agenda__body{border:1px solid var(--card-border-color);background-color:var(--card-background-color)}.day-agenda__all-day{border-radius:var(--radius) var(--radius) 0 0;background-color:var(--card-background-accent-color);border-bottom:none;display:flex}.day-agenda__gutter-label,.day-agenda__gutter{flex:0 0 var(--spacing-48);width:var(--spacing-48);border-right:1px solid var(--card-border-color)}.day-agenda__gutter-label{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-xxs);color:var(--body-color-muted);justify-content:flex-end;align-items:center;display:flex}.day-agenda__all-day-cell{gap:var(--spacing-2);min-width:0;padding:var(--spacing-4);flex-direction:column;flex:auto;display:flex}.day-agenda__body{touch-action:pan-y;border-radius:var(--radius);flex:auto;min-height:0;display:flex;overflow-y:auto}.day-agenda__all-day+.day-agenda__body{border-radius:0 0 var(--radius) var(--radius)}.day-agenda__gutter{flex-direction:column;display:flex}.day-agenda__gutter-hour{padding-right:var(--spacing-6);font-size:var(--font-size-xxs);font-variant-numeric:tabular-nums;color:var(--body-color-muted);justify-content:flex-end;display:flex}.day-agenda__gutter-hour span{transform:translateY(-50%)}.day-agenda__gutter-hour:first-child span{transform:none}.day-agenda__gutter-hour--inactive{opacity:.5}.day-agenda__column{flex-direction:column;flex:auto;min-width:0;display:flex;position:relative}.day-agenda__slot{border-bottom:1px solid color-mix(in srgb, var(--card-border-color) 60%, transparent);transition:background-color var(--transition-fast)}.day-agenda__slot:last-of-type{border-bottom:none}.day-agenda__slot--inactive{background-color:color-mix(in srgb, var(--body-background) 60%, transparent)}.day-agenda__slot--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--body-accent-color) 10%, transparent)}.day-agenda .day-agenda__chip{align-items:center;gap:var(--spacing-6);padding:0 var(--spacing-6);flex-direction:row}.day-agenda .day-agenda__chip .event-calendar__chip-title{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.day-agenda .day-agenda__chip .event-calendar__chip-leading,.day-agenda .day-agenda__chip .event-calendar__chip-time{align-self:center}

package/dist/components/DayAgenda/DayAgenda2.js

@@ -0,0 +1,120 @@
+import './DayAgenda.css';
+import { addDays as k, formatDate as S } from "../../helpers/Datetime.js";
+import { useSwipe as T } from "../../hooks/useSwipe.js";
+import { Drawer as O } from "../Drawer/Drawer2.js";
+import { bucketEventsByDay as U, formatHourLabel as F, isActiveHour as L, layoutDayEvents as q, startOfDay as c } from "../EventCalendar/EventCalendar.helpers.js";
+import { EventCalendarChip as M } from "../EventCalendar/EventCalendar.Chip.js";
+/* empty css          */
+import { useEffect as z, useMemo as g, useRef as G } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+var I = 8, m = () => {
+};
+function H({ activeHours: r, className: j, date: n, dayEndHour: d = 24, dayStartHour: t = 0, defaultDurationMinutes: f = 30, emptyLabel: B = "Nothing scheduled", events: v, hourHeight: o = 44, isOpen: p, onAdd: D, onClose: E, onDateChange: _, onEventClick: w, position: R = "right", renderEvent: N, width: $ = "min(480px, 100vw)" }) {
+  const y = G(null), l = g(() => U(v, [c(n)])[0], [n, v]), h = g(() => Array.from({ length: Math.max(d - t, 1) }, (a, i) => t + i), [t, d]), A = g(() => q(l.timed, t, d, f), [
+    l.timed,
+    d,
+    t,
+    f
+  ]), b = g(() => {
+    const a = l.timed.map((i) => i.start.getHours());
+    return a.length > 0 ? Math.min(...a) : r?.start ?? I;
+  }, [r, l.timed]);
+  z(() => {
+    !p || !y.current || (y.current.scrollTop = Math.max(b - t - 1, 0) * o);
+  }, [
+    t,
+    b,
+    o,
+    p
+  ]);
+  const Y = T({
+    enabled: !!_,
+    onSwipeLeft: () => _?.(k(c(n), 1)),
+    onSwipeRight: () => _?.(k(c(n), -1)),
+    restraint: 50
+  }), C = (a) => {
+    const i = c(n);
+    return i.setHours(a, 0, 0, 0), i;
+  }, u = h.length * o, x = { flex: `1 0 ${o}px` };
+  return /* @__PURE__ */ s(O, {
+    className: ["day-agenda", j ?? ""].filter(Boolean).join(" "),
+    isOpen: p,
+    onClose: E,
+    position: R,
+    showOverlay: !0,
+    title: S(n, "DD MMM YYYY"),
+    width: $,
+    children: [
+      /* @__PURE__ */ s("div", {
+        className: "day-agenda__weekday",
+        children: [/* @__PURE__ */ e("span", { children: n.toLocaleDateString(void 0, { weekday: "long" }) }), l.allDay.length === 0 && l.timed.length === 0 && /* @__PURE__ */ e("span", {
+          className: "day-agenda__empty",
+          children: B
+        })]
+      }),
+      l.allDay.length > 0 && /* @__PURE__ */ s("div", {
+        className: "day-agenda__all-day",
+        children: [/* @__PURE__ */ e("div", {
+          className: "day-agenda__gutter-label",
+          children: "All day"
+        }), /* @__PURE__ */ e("div", {
+          className: "day-agenda__all-day-cell",
+          children: l.allDay.map((a) => /* @__PURE__ */ e(M, {
+            dragEnabled: !1,
+            event: a,
+            isDragging: !1,
+            onClick: w,
+            onDragEnd: m,
+            onDragStart: m,
+            renderEvent: N
+          }, a.id))
+        })]
+      }),
+      /* @__PURE__ */ s("div", {
+        className: "day-agenda__body",
+        ref: y,
+        ...Y,
+        children: [/* @__PURE__ */ e("div", {
+          className: "day-agenda__gutter",
+          style: { minHeight: u },
+          children: h.map((a) => /* @__PURE__ */ e("div", {
+            className: ["day-agenda__gutter-hour", L(a, r) ? "" : "day-agenda__gutter-hour--inactive"].filter(Boolean).join(" "),
+            style: x,
+            children: /* @__PURE__ */ e("span", { children: F(a) })
+          }, a))
+        }), /* @__PURE__ */ s("div", {
+          className: "day-agenda__column",
+          style: { minHeight: u },
+          children: [h.map((a) => /* @__PURE__ */ e("div", {
+            className: [
+              "day-agenda__slot",
+              L(a, r) ? "" : "day-agenda__slot--inactive",
+              D ? "day-agenda__slot--clickable" : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => D?.(C(a)),
+            style: x
+          }, a)), A.map((a) => /* @__PURE__ */ e(M, {
+            className: "event-calendar__chip--positioned day-agenda__chip",
+            dragEnabled: !1,
+            event: a.event,
+            isDragging: !1,
+            onClick: w,
+            onDragEnd: m,
+            onDragStart: m,
+            renderEvent: N,
+            showTime: !0,
+            style: {
+              top: `${a.top}%`,
+              height: `${a.height}%`,
+              left: `calc(${a.left}% + var(--spacing-2))`,
+              width: `calc(${a.width}% - var(--spacing-4))`
+            }
+          }, a.event.id))]
+        })]
+      })
+    ]
+  });
+}
+export {
+  H as DayAgenda
+};

package/dist/components/DiffViewer/DiffViewer.css

@@ -0,0 +1 @@
+.dv{border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius-sm);background-color:var(--form-control-background-color);font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-normal);flex-direction:column;width:100%;display:flex;overflow:hidden}.dv__header{background-color:var(--form-control-focus-background-color);border-bottom:var(--spacing-1) solid var(--form-control-border-color);font-family:var(--font-family,sans-serif);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--body-title-color);min-height:var(--spacing-40);align-items:center;display:flex}.dv__header-side{padding:var(--spacing-8) var(--spacing-12);flex:1}.dv__header-side:first-child{border-right:var(--spacing-1) solid var(--form-control-border-color)}.dv__header-inline{align-items:center;gap:var(--spacing-8);padding:var(--spacing-8) var(--spacing-12);flex:1;display:flex}.dv__header-arrow{color:var(--body-color-muted)}.dv__stats{gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12);flex-shrink:0;display:flex}.dv__stat{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full)}.dv__stat--removed{color:#dc2626;background-color:#dc26261f}.dv__stat--added{color:#16a34a;background-color:#16a34a1f}.dv__body{max-height:600px;overflow:auto}.dv__split{width:100%;min-width:max-content;display:flex}.dv__pane{flex:1;min-width:0}.dv__pane--old{border-right:var(--spacing-1) solid var(--form-control-border-color)}.dv__inline{width:100%;min-width:max-content}.dv__row{min-height:var(--spacing-20);white-space:pre;align-items:baseline;display:flex}.dv__row--equal{background-color:#0000}.dv__row--removed{background-color:#dc262614}.dv__row--added{background-color:#16a34a14}.dv__row--blank{background-color:var(--form-control-focus-background-color);opacity:.5}.dv__row:hover{filter:brightness(.97)}.dv__lineno{min-width:var(--spacing-40);padding:0 var(--spacing-8);text-align:right;color:var(--body-color-muted);font-size:var(--font-size-xs);-webkit-user-select:none;user-select:none;border-right:var(--spacing-1) solid var(--form-control-border-color);background-color:var(--form-control-focus-background-color);flex-shrink:0}.dv__gutter{width:var(--spacing-20);padding:0 var(--spacing-4);text-align:center;font-weight:var(--font-weight-bold);-webkit-user-select:none;user-select:none;color:var(--body-color-muted);flex-shrink:0}.dv__row--removed .dv__gutter{color:#dc2626}.dv__row--added .dv__gutter{color:#16a34a}.dv__code{padding:0 var(--spacing-12) 0 var(--spacing-8);color:var(--form-control-color);flex:1;overflow:hidden}.dv .dv-word{border-radius:2px;padding:0 1px}.dv .dv-word--del{color:#b91c1c;background-color:#dc26264d;-webkit-text-decoration:line-through #b91c1c80;text-decoration:line-through #b91c1c80}.dv .dv-word--ins{color:#15803d;background-color:#16a34a4d}.dv--code .dv-token--keyword{color:#8b5cf6;font-weight:var(--font-weight-semibold)}.dv--code .dv-token--string{color:#16a34a}.dv--code .dv-token--comment{color:var(--body-color-muted);font-style:italic}.dv--code .dv-token--number{color:#f59e0b}.dv--code .dv-token--function{color:#0891b2}.dv--code .dv-token--tag{color:#dc2626}.dv--code .dv-token--attr{color:#f97316}

package/dist/components/DiffViewer/DiffViewer2.js

@@ -0,0 +1,270 @@
+import './DiffViewer.css';
+/* empty css           */
+import { useMemo as w } from "react";
+import { Fragment as u, jsx as d, jsxs as _ } from "react/jsx-runtime";
+function g(s, t) {
+  const e = s.length, a = t.length, c = e + a, v = new Array(2 * c + 1).fill(0), r = [];
+  e: for (let o = 0; o <= c; o++) {
+    r.push([...v]);
+    for (let l = -o; l <= o; l += 2) {
+      const h = l + c;
+      let p = l === -o || l !== o && v[h - 1] < v[h + 1] ? v[h + 1] : v[h - 1] + 1, f = p - l;
+      for (; p < e && f < a && s[p] === t[f]; )
+        p++, f++;
+      if (v[h] = p, p >= e && f >= a) break e;
+    }
+  }
+  const i = [];
+  let m = e, n = a;
+  for (let o = r.length - 1; o >= 0 && (m > 0 || n > 0); o--) {
+    const l = r[o], h = m - n, p = h + c, f = h === -o || h !== o && l[p - 1] < l[p + 1] ? h + 1 : h - 1, k = l[f + c], x = k - f;
+    for (; m > k + 1 && n > x + 1; )
+      m--, n--, i.unshift({
+        kind: "eq",
+        val: s[m]
+      });
+    for (o > 0 && (m > k ? (m--, i.unshift({
+      kind: "del",
+      val: s[m]
+    })) : (n--, i.unshift({
+      kind: "ins",
+      val: t[n]
+    }))); m > k && n > x; )
+      m--, n--, i.unshift({
+        kind: "eq",
+        val: s[m]
+      });
+  }
+  return i;
+}
+function $(s, t) {
+  const e = g(s.split(`
+`), t.split(`
+`)), a = [];
+  let c = 1, v = 1, r = 0;
+  for (; r < e.length; ) {
+    const i = e[r];
+    i.kind === "eq" ? (a.push({
+      kind: "equal",
+      oldLineNo: c++,
+      newLineNo: v++,
+      text: i.val
+    }), r++) : i.kind === "del" && r + 1 < e.length && e[r + 1].kind === "ins" ? (a.push({
+      kind: "removed",
+      oldLineNo: c++,
+      oldText: i.val,
+      newText: e[r + 1].val
+    }), a.push({
+      kind: "added",
+      newLineNo: v++,
+      oldText: i.val,
+      newText: e[r + 1].val
+    }), r += 2) : i.kind === "del" ? (a.push({
+      kind: "removed",
+      oldLineNo: c++,
+      oldText: i.val
+    }), r++) : (a.push({
+      kind: "added",
+      newLineNo: v++,
+      newText: i.val
+    }), r++);
+  }
+  return a;
+}
+function T(s, t) {
+  const e = (a) => a.match(/\S+|\s+/g) ?? [];
+  return g(e(s), e(t));
+}
+var b = ({ a: s, b: t, side: e }) => /* @__PURE__ */ d(u, { children: T(s, t).map((a, c) => a.kind === "eq" ? /* @__PURE__ */ d("span", { children: a.val }, c) : a.kind === "del" && e === "old" ? /* @__PURE__ */ d("mark", {
+  className: "dv-word dv-word--del",
+  children: a.val
+}, c) : a.kind === "ins" && e === "new" ? /* @__PURE__ */ d("mark", {
+  className: "dv-word dv-word--ins",
+  children: a.val
+}, c) : null) }), L = [
+  {
+    name: "comment",
+    pattern: /\/\/.*$|\/\*[\s\S]*?\*\/|#.*$/m
+  },
+  {
+    name: "string",
+    pattern: /`[\s\S]*?`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/
+  },
+  {
+    name: "keyword",
+    pattern: /\b(const|let|var|function|return|if|else|for|while|class|import|export|default|from|async|await|new|typeof|instanceof|void|null|undefined|true|false|extends|implements|interface|type|enum|public|private|protected|static|readonly|abstract|def|print|pass|lambda|yield|in|is|not|and|or)\b/
+  },
+  {
+    name: "number",
+    pattern: /\b\d+\.?\d*\b/
+  },
+  {
+    name: "tag",
+    pattern: /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s[^>]*)?>/
+  },
+  {
+    name: "attr",
+    pattern: /\b[a-zA-Z-]+(?==)/
+  },
+  {
+    name: "function",
+    pattern: /\b[a-zA-Z_$][a-zA-Z0-9_$]*(?=\s*\()/
+  }
+];
+function y(s) {
+  const t = [];
+  let e = s;
+  for (; e.length > 0; ) {
+    let a = !1;
+    for (const { name: c, pattern: v } of L) {
+      const r = e.match(new RegExp(`^(?:${v.source})`, v.flags));
+      if (r) {
+        t.push({
+          name: c,
+          val: r[0]
+        }), e = e.slice(r[0].length), a = !0;
+        break;
+      }
+    }
+    a || (t.push({
+      name: "plain",
+      val: e[0]
+    }), e = e.slice(1));
+  }
+  return t;
+}
+var A = ({ text: s }) => /* @__PURE__ */ d(u, { children: w(() => y(s), [s]).map((t, e) => t.name === "plain" ? /* @__PURE__ */ d("span", { children: t.val }, e) : /* @__PURE__ */ d("span", {
+  className: `dv-token dv-token--${t.name}`,
+  children: t.val
+}, e)) }), N = ({ line: s, side: t, type: e }) => {
+  const a = t === "old" ? s.text ?? s.oldText ?? "" : s.text ?? s.newText ?? "";
+  return s.kind !== "equal" && s.oldText !== void 0 && s.newText !== void 0 ? /* @__PURE__ */ d(b, {
+    a: s.oldText,
+    b: s.newText,
+    side: t
+  }) : e === "code" ? /* @__PURE__ */ d(A, { text: a }) : /* @__PURE__ */ d(u, { children: a });
+}, Z = ({ oldValue: s, newValue: t, mode: e = "split", type: a = "text", oldTitle: c = "Before", newTitle: v = "After", showLineNumbers: r = !0 }) => {
+  const i = w(() => $(s, t), [s, t]), m = w(() => ({
+    added: i.filter((n) => n.kind === "added").length,
+    removed: i.filter((n) => n.kind === "removed").length
+  }), [i]);
+  return /* @__PURE__ */ _("div", {
+    className: `dv dv--${e} dv--${a}`,
+    children: [/* @__PURE__ */ _("div", {
+      className: "dv__header",
+      children: [e === "split" ? /* @__PURE__ */ _(u, { children: [/* @__PURE__ */ d("div", {
+        className: "dv__header-side",
+        children: c
+      }), /* @__PURE__ */ d("div", {
+        className: "dv__header-side",
+        children: v
+      })] }) : /* @__PURE__ */ _("div", {
+        className: "dv__header-inline",
+        children: [
+          /* @__PURE__ */ d("span", { children: c }),
+          /* @__PURE__ */ d("span", {
+            className: "dv__header-arrow",
+            children: "→"
+          }),
+          /* @__PURE__ */ d("span", { children: v })
+        ]
+      }), /* @__PURE__ */ _("div", {
+        className: "dv__stats",
+        children: [m.removed > 0 && /* @__PURE__ */ _("span", {
+          className: "dv__stat dv__stat--removed",
+          children: ["−", m.removed]
+        }), m.added > 0 && /* @__PURE__ */ _("span", {
+          className: "dv__stat dv__stat--added",
+          children: ["+", m.added]
+        })]
+      })]
+    }), /* @__PURE__ */ d("div", {
+      className: "dv__body",
+      children: e === "split" ? /* @__PURE__ */ _("div", {
+        className: "dv__split",
+        children: [/* @__PURE__ */ d("div", {
+          className: "dv__pane dv__pane--old",
+          children: i.map((n, o) => {
+            const l = n.kind === "added";
+            return /* @__PURE__ */ _("div", {
+              className: `dv__row ${l ? "dv__row--blank" : `dv__row--${n.kind}`}`,
+              children: [
+                r && /* @__PURE__ */ d("span", {
+                  className: "dv__lineno",
+                  children: l ? "" : n.oldLineNo
+                }),
+                /* @__PURE__ */ d("span", {
+                  className: "dv__gutter",
+                  children: l ? "" : n.kind === "removed" ? "−" : " "
+                }),
+                /* @__PURE__ */ d("span", {
+                  className: "dv__code",
+                  children: !l && /* @__PURE__ */ d(N, {
+                    line: n,
+                    side: "old",
+                    type: a
+                  })
+                })
+              ]
+            }, o);
+          })
+        }), /* @__PURE__ */ d("div", {
+          className: "dv__pane dv__pane--new",
+          children: i.map((n, o) => {
+            const l = n.kind === "removed";
+            return /* @__PURE__ */ _("div", {
+              className: `dv__row ${l ? "dv__row--blank" : `dv__row--${n.kind}`}`,
+              children: [
+                r && /* @__PURE__ */ d("span", {
+                  className: "dv__lineno",
+                  children: l ? "" : n.newLineNo
+                }),
+                /* @__PURE__ */ d("span", {
+                  className: "dv__gutter",
+                  children: l ? "" : n.kind === "added" ? "+" : " "
+                }),
+                /* @__PURE__ */ d("span", {
+                  className: "dv__code",
+                  children: !l && /* @__PURE__ */ d(N, {
+                    line: n,
+                    side: "new",
+                    type: a
+                  })
+                })
+              ]
+            }, o);
+          })
+        })]
+      }) : /* @__PURE__ */ d("div", {
+        className: "dv__inline",
+        children: i.map((n, o) => /* @__PURE__ */ _("div", {
+          className: `dv__row dv__row--${n.kind}`,
+          children: [
+            r && /* @__PURE__ */ _(u, { children: [/* @__PURE__ */ d("span", {
+              className: "dv__lineno",
+              children: n.kind !== "added" ? n.oldLineNo : ""
+            }), /* @__PURE__ */ d("span", {
+              className: "dv__lineno",
+              children: n.kind !== "removed" ? n.newLineNo : ""
+            })] }),
+            /* @__PURE__ */ d("span", {
+              className: "dv__gutter",
+              children: n.kind === "removed" ? "−" : n.kind === "added" ? "+" : " "
+            }),
+            /* @__PURE__ */ d("span", {
+              className: "dv__code",
+              children: /* @__PURE__ */ d(N, {
+                line: n,
+                side: n.kind === "removed" ? "old" : "new",
+                type: a
+              })
+            })
+          ]
+        }, o))
+      })
+    })]
+  });
+};
+export {
+  Z as DiffViewer
+};

package/dist/components/Drawer/Drawer.css

@@ -0,0 +1 @@
+.drawer-overlay{--drawer-overlay-backdrop-filter:blur(8px) saturate(.9);background:var(--backdrop-color);z-index:1000;-webkit-backdrop-filter:var(--drawer-overlay-backdrop-filter);animation:.3s fadeIn;position:fixed;inset:0}.drawer{--drawer-width:320px;--drawer-max-width:none;--drawer-margin:0;--drawer-border-radius:0;--drawer-shadow:none;--drawer-slide-offset:-100%;--drawer-background-color:var(--modal-background-color,var(--card-background-color));--drawer-border-color:var(--modal-border-color,var(--card-border-color,var(--delimiter-color)));--drawer-backdrop-filter:var(--modal-backdrop-filter,var(--card-backdrop-filter,none));--drawer-header-background-color:var(--card-background-accent-color);width:var(--drawer-width);max-width:var(--drawer-max-width);margin:var(--drawer-margin);background:var(--drawer-background-color);-webkit-backdrop-filter:var(--drawer-backdrop-filter);border:var(--spacing-1) solid var(--drawer-border-color);border-radius:var(--drawer-border-radius);z-index:1001;min-height:0;box-shadow:var(--drawer-shadow);flex-direction:column;animation:.3s drawerSlideIn;display:flex;position:fixed;top:0;bottom:0;overflow:hidden}.drawer--left{--drawer-slide-offset:-100%;left:0}.drawer--right{--drawer-slide-offset:100%;right:0}.drawer__header{justify-content:space-between;align-items:center;gap:var(--spacing-12);padding:var(--spacing-16);border-bottom:var(--spacing-1) solid var(--drawer-border-color);background:var(--drawer-header-background-color);flex-shrink:0;display:flex}.drawer__title{align-items:center;gap:var(--spacing-8);min-width:0;color:var(--modal-title-color,var(--body-color-accent));font-family:var(--modal-title-font-family,var(--font-family,sans-serif));font-size:var(--modal-title-font-size,var(--font-size-xl));font-style:var(--modal-title-font-style,normal);font-weight:var(--modal-title-font-weight,var(--font-weight-semibold));letter-spacing:var(--modal-title-letter-spacing,normal);text-transform:var(--modal-title-text-transform,none);flex:1;margin:0;display:flex}.drawer__title-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.drawer__header-actions{align-items:center;gap:var(--spacing-8);flex-shrink:0;display:flex}.drawer__back{flex-shrink:0;align-self:center}.drawer__close{width:32px;height:32px;padding:var(--spacing-4);flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;display:flex}.drawer__close:focus{outline:2px solid var(--body-accent-color);outline-offset:2px}.drawer__content{min-height:0;padding:var(--spacing-16);flex:1;overflow-y:auto}.drawer__footer{justify-content:flex-end;align-items:center;gap:var(--spacing-16);padding:var(--spacing-16);border-top:var(--spacing-1) solid var(--drawer-border-color);background:var(--drawer-header-background-color);flex-shrink:0;display:flex}.drawer__footer-content{flex:1;min-width:0}.drawer__footer-actions{justify-content:flex-end;align-items:center;gap:var(--spacing-12);flex-shrink:0;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes drawerSlideIn{0%{transform:translateX(var(--drawer-slide-offset))}to{transform:translate(0)}}@media (width<=768px){.drawer{max-width:var(--drawer-max-width);width:min(var(--drawer-width), 100vw - var(--spacing-32))!important}}.drawer__content::-webkit-scrollbar{width:var(--scrollbar-size)}.drawer__content::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.drawer__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.drawer__content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}