@code0-tech/pictor 0.9.1 → 0.9.3

package/dist/assets/components/progress/Progress.style.css

@@ -1 +1 @@
-.progress{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress__dot{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:#393743;position:absolute;max-width:100%;aspect-ratio:1/1;height:200%;z-index:2;top:50%;transform:translate(50%) translateY(-50%);border-radius:50rem;right:calc(100% - 1% * (var(--progress, 0)));overflow:hidden}.progress__dot:after{content:"";position:absolute;top:50%;left:50%;border-radius:inherit;width:60%;height:60%;transform:translate(-50%,-50%);background:var(--color);background-repeat:no-repeat}.progress__indicator{position:absolute;background:var(--color);background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.5),rgba(0,0,0,.5) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.5;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}
+.progress{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;background:transparent;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:var(--color);opacity:.1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.progress__dot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(50%) translateY(-50%);right:calc(100% - 1% * (var(--progress, 0)))}.progress__indicator{position:absolute;background:var(--color);border-radius:inherit;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.25;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}

package/dist/assets/components/resizable/Resizable.style.css

@@ -1 +1 @@
-.d-resizable__panel{color:#fff;position:relative;background:transparent;overflow:hidden;z-index:0}.d-resizable__panel{border:none}.d-resizable__handle{position:relative;display:flex;align-items:center;justify-content:center;background:transparent;outline:none}.d-resizable__handle[aria-orientation=vertical]{width:.7rem;height:100%}.d-resizable__handle[aria-orientation=horizontal]{height:.7rem;width:100%}.d-resizable__handle[data-separator=hover] .d-resizable__handle-bar{background:#2c2b37}.d-resizable__handle[data-separator=active] .d-resizable__handle-bar{background:#393743}.d-resizable__handle-bar{z-index:1;position:relative;border-radius:.7rem;height:10%;padding:.2rem}.d-resizable__handle-bar{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.d-resizable__handle-bar:hover{background:#2c2b37;box-shadow:inset 0 1px 1px #bfbfbf1a}.d-resizable__handle-bar:active,.d-resizable__handle-bar:focus,.d-resizable__handle-bar[aria-selected=true],.d-resizable__handle-bar[data-state=open]{background:#393743;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.d-resizable__handle-bar{box-shadow:none!important}.d-resizable__panel--primary{background:#070514;border:none}.d-resizable__panel--secondary{background:#191825;border:none}.d-resizable__panel--tertiary{background:#201e2c;border:none}.d-resizable__panel--success{background:#0a1814;border:none}.d-resizable__panel--warning{background:#201813;border:none}.d-resizable__panel--error{background:#1c0516;border:none}.d-resizable__panel--info{background:#121e24;border:none}
+.d-resizable__panel{color:#fff;position:relative;background:transparent;overflow:hidden;z-index:0}.d-resizable__panel{border:none}.d-resizable__handle{position:relative;display:flex;align-items:center;justify-content:center;background:transparent;outline:none}.d-resizable__handle[aria-orientation=vertical]{width:.7rem;height:100%}.d-resizable__handle[aria-orientation=vertical] .d-resizable__handle-bar{height:10%}.d-resizable__handle[aria-orientation=horizontal]{height:.7rem;width:100%}.d-resizable__handle[aria-orientation=horizontal] .d-resizable__handle-bar{width:10%}.d-resizable__handle[data-separator=hover] .d-resizable__handle-bar{background:#2c2b37}.d-resizable__handle[data-separator=active] .d-resizable__handle-bar{background:#393743}.d-resizable__handle-bar{z-index:1;position:relative;border-radius:.7rem;padding:.2rem}.d-resizable__handle-bar{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.d-resizable__handle-bar:hover{background:#2c2b37;box-shadow:inset 0 1px 1px #bfbfbf1a}.d-resizable__handle-bar:active,.d-resizable__handle-bar:focus,.d-resizable__handle-bar[aria-selected=true],.d-resizable__handle-bar[data-state=open]{background:#393743;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.d-resizable__handle-bar{box-shadow:none!important}.d-resizable__panel--primary{background:#070514;border:none}.d-resizable__panel--secondary{background:#191825;border:none}.d-resizable__panel--tertiary{background:#201e2c;border:none}.d-resizable__panel--success{background:#0a1814;border:none}.d-resizable__panel--warning{background:#201813;border:none}.d-resizable__panel--error{background:#1c0516;border:none}.d-resizable__panel--info{background:#121e24;border:none}

package/dist/components/gantt/Gantt.js

@@ -1,92 +1,87 @@
-import { jsx as d, jsxs as B } from "react/jsx-runtime";
-import { c as H } from "../../_virtual/compiler-runtime.js";
+import { jsx as c, jsxs as j } from "react/jsx-runtime";
+import { c as B } from "../../_virtual/compiler-runtime.js";
 import "../../utils/contextStore.js";
 import "react";
 import "merge-props";
-import { hashToColor as R } from "../../utils/color.js";
+import { hashToColor as H } from "../../utils/color.js";
 import '../../assets/components/gantt/Gantt.style.css';/* empty css                 */
-import { ScrollArea as W, ScrollAreaViewport as z, ScrollAreaScrollbar as T, ScrollAreaThumb as _ } from "../scroll-area/ScrollArea.js";
-import { GanttGroup as C } from "./GanttGroup.js";
-const X = (e) => {
-  const t = H.c(22), {
-    items: S,
-    stepWidth: b,
-    rowHeight: M,
-    step: V,
-    children: y
-  } = e, A = b === void 0 ? "50px" : b, E = M === void 0 ? "50px" : M, p = V === void 0 ? 1 : V;
-  let c, a, l, m, h, u;
-  if (t[0] !== y || t[1] !== S || t[2] !== E || t[3] !== p || t[4] !== A) {
-    const s = [];
-    S?.forEach((o) => {
-      const r = o.end - o.start;
-      let n = !1;
-      if (s.length <= 0) {
-        s.push({
-          step: r,
-          items: [o]
-        });
-        return;
-      }
-      s.forEach((i) => {
-        const x = (i.step + r) / 1.75, G = i.step / 3 - 10, j = i.step * 3 + 10;
-        G < r && r < j && !n && (i.step = x, i.items.push(o), n = !0);
-      }), n || s.push({
-        step: r,
-        items: [o]
+import { ScrollAreaViewport as R, ScrollAreaScrollbar as A, ScrollAreaThumb as E, ScrollArea as T } from "../scroll-area/ScrollArea.js";
+import { GanttGroup as W } from "./GanttGroup.js";
+const P = (s) => {
+  const t = B.c(15), {
+    items: m,
+    stepWidth: f,
+    rowHeight: b,
+    step: x,
+    children: S
+  } = s, g = f === void 0 ? "50px" : f, w = b === void 0 ? "50px" : b, i = x === void 0 ? 1 : x;
+  let e, l;
+  t[0] !== m || t[1] !== i ? (e = [], m?.forEach((r) => {
+    const o = r.end - r.start;
+    let a = !1;
+    if (e.length <= 0) {
+      e.push({
+        step: o,
+        items: [r]
       });
-    }), s.sort(D).forEach((o, r) => {
-      if (r > 0) {
-        const n = Math.min(...o.items.map(k)), i = Math.max(...o.items.map(q));
-        s[0].items.push({
-          start: n,
-          end: i + s[0].step * p / 6,
-          id: `group-source-${r}`,
-          type: "group",
-          data: {
-            displayMessage: `${r}`,
-            color: R(`group-source-${r}`)
-          }
-        });
-      }
-    }), a = W, m = "100%", h = "100%", u = "hover", c = z, l = s.sort(v).map((o, r) => {
-      const n = Math.min(...o.items.map(F));
-      return /* @__PURE__ */ d(C, { children: y, id: `group-target-${r}`, hideScaling: r != 0, start: n - n / (s[0].step * p) * (o.step * p), step: o.step * p, stepWidth: A, rowHeight: E, items: o.items }, `group-target-${r}`);
-    }), t[0] = y, t[1] = S, t[2] = E, t[3] = p, t[4] = A, t[5] = c, t[6] = a, t[7] = l, t[8] = m, t[9] = h, t[10] = u;
-  } else
-    c = t[5], a = t[6], l = t[7], m = t[8], h = t[9], u = t[10];
-  let f;
-  t[11] !== c || t[12] !== l ? (f = /* @__PURE__ */ d(c, { children: l }), t[11] = c, t[12] = l, t[13] = f) : f = t[13];
-  let $;
-  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? ($ = /* @__PURE__ */ d(T, { orientation: "horizontal", children: /* @__PURE__ */ d(_, {}) }), t[14] = $) : $ = t[14];
-  let g;
-  t[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ d(T, { orientation: "vertical", children: /* @__PURE__ */ d(_, {}) }), t[15] = g) : g = t[15];
-  let w;
-  return t[16] !== a || t[17] !== m || t[18] !== h || t[19] !== u || t[20] !== f ? (w = /* @__PURE__ */ B(a, { w: m, h, type: u, children: [
-    f,
-    $,
-    g
-  ] }), t[16] = a, t[17] = m, t[18] = h, t[19] = u, t[20] = f, t[21] = w) : w = t[21], w;
-}, Y = (e) => {
-  const t = e > 5e5 ? e / 1e6 : e > 500 ? e / 1e3 : e, S = e > 5e5 ? "s" : e > 500 ? "ms" : "μs";
-  return `${Math.round(t * 10) / 10}${S}`;
+      return;
+    }
+    e.forEach((n) => {
+      const M = (n.step + o) / 1.75, V = n.step / 3 - 10, G = n.step * 3 + 10;
+      V < o && o < G && !a && (n.step = M, n.items.push(r), a = !0);
+    }), a || e.push({
+      step: o,
+      items: [r]
+    });
+  }), e.sort(z).forEach((r, o) => {
+    if (o > 0) {
+      const a = Math.min(...r.items.map(C)), n = Math.max(...r.items.map(D));
+      e[0].items.push({
+        start: a,
+        end: n + e[0].step * i / 6,
+        id: `group-source-${o}`,
+        type: "group",
+        data: {
+          items: r.items,
+          step: i,
+          firstGroupStep: e[0].step,
+          groupStep: r.step,
+          displayMessage: `${o}`,
+          color: H(`group-source-${o}`)
+        }
+      });
+    }
+  }), l = Math.min(...e[0].items.map(k)), t[0] = m, t[1] = i, t[2] = e, t[3] = l) : (e = t[2], l = t[3]);
+  const y = l, _ = y - y / (e[0].step * i) * (e[0].step * i), $ = e[0].step * i;
+  let p;
+  t[4] !== S || t[5] !== e[0].items || t[6] !== w || t[7] !== g || t[8] !== _ || t[9] !== $ ? (p = /* @__PURE__ */ c(R, { children: /* @__PURE__ */ c(W, { children: S, id: "group-target", hideScaling: !1, start: _, step: $, stepWidth: g, rowHeight: w, items: e[0].items }, "group-target") }), t[4] = S, t[5] = e[0].items, t[6] = w, t[7] = g, t[8] = _, t[9] = $, t[10] = p) : p = t[10];
+  let h;
+  t[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ c(A, { orientation: "horizontal", children: /* @__PURE__ */ c(E, {}) }), t[11] = h) : h = t[11];
+  let u;
+  t[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ c(A, { orientation: "vertical", children: /* @__PURE__ */ c(E, {}) }), t[12] = u) : u = t[12];
+  let d;
+  return t[13] !== p ? (d = /* @__PURE__ */ j(T, { w: "100%", h: "100%", type: "hover", children: [
+    p,
+    h,
+    u
+  ] }), t[13] = p, t[14] = d) : d = t[14], d;
+}, Q = (s) => {
+  const t = s > 5e5 ? s / 1e6 : s > 500 ? s / 1e3 : s, m = s > 5e5 ? "s" : s > 500 ? "ms" : "μs";
+  return `${Math.round(t * 10) / 10}${m}`;
 };
-function D(e, t) {
-  return t.step - e.step;
-}
-function k(e) {
-  return e.start;
+function z(s, t) {
+  return t.step - s.step;
 }
-function q(e) {
-  return e.end;
+function C(s) {
+  return s.start;
 }
-function v(e, t) {
-  return t.step - e.step;
+function D(s) {
+  return s.end;
 }
-function F(e) {
-  return e.start;
+function k(s) {
+  return s.start;
 }
 export {
-  X as Gantt,
-  Y as getRelativeValue
+  P as Gantt,
+  Q as getRelativeValue
 };

package/dist/components/gantt/GanttGroup.js

@@ -1,134 +1,143 @@
-import { jsx as W, jsxs as B, Fragment as rt } from "react/jsx-runtime";
-import { c as ot } from "../../_virtual/compiler-runtime.js";
-import J from "react";
+import { jsxs as N, jsx as x, Fragment as F } from "react/jsx-runtime";
+import { c as et } from "../../_virtual/compiler-runtime.js";
+import P from "react";
 import "../../utils/contextStore.js";
 import "merge-props";
-import { withAlpha as Q, hashToColor as U } from "../../utils/color.js";
-import { GanttFooter as st } from "./GanttFooter.js";
-import { GanttItem as at } from "./GanttItem.js";
-import { GanttHeader as lt } from "./GanttHeader.js";
-const I = (e, t, n, R, l, S) => {
-  const _ = Math.max(0, e - n), H = Math.min(l, t - n), V = _ / l * S, f = (H - _) / l * S;
+import { withAlpha as J, hashToColor as K } from "../../utils/color.js";
+import { GanttItem as nt } from "./GanttItem.js";
+import { GanttHeader as rt } from "./GanttHeader.js";
+const C = (e, t, n, y, l, M) => {
+  const S = Math.max(0, e - n), E = Math.min(l, t - n), G = S / l * M, m = (E - S) / l * M;
   return {
-    left: V,
-    width: f
+    left: G,
+    width: m
   };
-}, Rt = (e) => {
-  const t = ot.c(63), {
+}, it = (e) => {
+  const t = et.c(50), {
     items: n,
-    stepWidth: R,
+    stepWidth: y,
     rowHeight: l,
-    step: S,
-    start: _,
-    end: H,
-    hideScaling: V,
-    children: f
-  } = e, u = R === void 0 ? "50px" : R, C = l === void 0 ? "50px" : l, r = S === void 0 ? 1 : S, i = _ === void 0 ? 1 : _, o = H === void 0 ? 999999999 : H, s = V === void 0 ? !1 : V, K = J.useRef(null), [X, Y] = J.useState(0), g = parseInt(u), a = o - i, O = Math.ceil(a / r), d = O * g, F = n?.filter(dt) ?? [], E = F.length === 0 ? r : F.reduce(ct, 0) / F.length;
-  let k;
-  t[0] !== n || t[1] !== i ? (k = n && n.length > 0 ? Math.min(...n.map(pt)) : i, t[0] = n, t[1] = i, t[2] = k) : k = t[2];
-  const h = k;
+    step: M,
+    start: S,
+    end: E,
+    hideScaling: G,
+    children: m
+  } = e, s = y === void 0 ? "50px" : y, $ = l === void 0 ? "50px" : l, a = M === void 0 ? 1 : M, i = S === void 0 ? 1 : S, o = E === void 0 ? 999999999 : E, c = G === void 0 ? !1 : G, R = P.useRef(null), [O, Q] = P.useState(0), [b, U] = P.useState(void 0), f = parseInt(s), d = o - i, q = Math.ceil(d / a), p = q * f, T = n?.filter(at) ?? [], W = T.length === 0 ? a : T.reduce(ot, 0) / T.length;
   let z;
-  t[3] !== o || t[4] !== n ? (z = n && n.length > 0 ? Math.max(...n.map(ht)) : o, t[3] = o, t[4] = n, t[5] = z) : z = t[5];
-  const c = z, Z = n && n.length > 0 ? Math.ceil((c - i) / r) : O, tt = Math.ceil(X / g), p = Math.max(tt, Z + 2);
-  let L, N;
-  t[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (L = () => {
-    const G = () => {
-      Y(K.current?.offsetWidth ?? 0);
+  t[0] !== n || t[1] !== i ? (z = n && n.length > 0 ? Math.min(...n.map(st)) : i, t[0] = n, t[1] = i, t[2] = z) : z = t[2];
+  const g = z;
+  let L;
+  t[3] !== o || t[4] !== n ? (L = n && n.length > 0 ? Math.max(...n.map(dt)) : o, t[3] = o, t[4] = n, t[5] = L) : L = t[5];
+  const u = L, X = n && n.length > 0 ? Math.ceil((u - i) / a) : q, Y = Math.ceil(O / f), h = Math.max(Y, X + 2);
+  let k;
+  t[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = () => {
+    const v = () => {
+      Q(R.current?.offsetWidth ?? 0);
     };
-    return G(), window.addEventListener("resize", G), () => window.removeEventListener("resize", G);
-  }, N = [], t[6] = L, t[7] = N) : (L = t[6], N = t[7]), J.useEffect(L, N);
-  let w, x, v, $, m, b;
-  if (t[8] !== E || t[9] !== f || t[10] !== p || t[11] !== o || t[12] !== s || t[13] !== c || t[14] !== h || t[15] !== n || t[16] !== e.id || t[17] !== C || t[18] !== i || t[19] !== r || t[20] !== u || t[21] !== g || t[22] !== a || t[23] !== d) {
-    const G = n?.length ? n.sort(mt).reduce(ft, []) : [], D = `repeat(${p}, ${u})`;
-    let T;
-    t[30] !== D ? (T = {
+    return v(), R?.current?.addEventListener("resize", v), window.addEventListener("resize", v), () => {
+      window.removeEventListener("resize", v), R.current?.removeEventListener("resize", v);
+    };
+  }, t[6] = k) : k = t[6], P.useEffect(k);
+  let H;
+  if (t[7] !== b || t[8] !== W || t[9] !== m || t[10] !== h || t[11] !== o || t[12] !== c || t[13] !== u || t[14] !== g || t[15] !== n || t[16] !== e.id || t[17] !== $ || t[18] !== i || t[19] !== a || t[20] !== s || t[21] !== f || t[22] !== d || t[23] !== p) {
+    const v = n?.length ? n.sort(lt).reduce(ct, []) : [], j = `repeat(${h}, ${s})`;
+    let I;
+    t[25] !== j ? (I = {
       display: "grid",
-      gridTemplateColumns: D,
-      width: "100%",
-      minHeight: "100%"
-    }, t[30] = D, t[31] = T) : T = t[31];
-    const et = T;
-    w = e.id, x = e.id, v = K, $ = et, t[32] !== E || t[33] !== p || t[34] !== s || t[35] !== i || t[36] !== r || t[37] !== u ? (m = !s && /* @__PURE__ */ W(lt, { columnCount: p, start: i, step: r, avgDuration: E, stepWidth: u }), t[32] = E, t[33] = p, t[34] = s, t[35] = i, t[36] = r, t[37] = u, t[38] = m) : m = t[38];
-    let j;
-    t[39] !== f || t[40] !== p || t[41] !== o || t[42] !== s || t[43] !== c || t[44] !== h || t[45] !== e.id || t[46] !== C || t[47] !== i || t[48] !== r || t[49] !== g || t[50] !== a || t[51] !== d ? (j = (nt, it) => /* @__PURE__ */ B("div", { style: {
-      gridColumn: "1 / -1",
-      height: C,
-      position: "relative",
-      backgroundColor: "transparent"
-    }, children: [
-      Array.from({
-        length: p - 1
-      }).map((M, A) => /* @__PURE__ */ W("div", { style: {
-        position: "absolute",
-        left: (A + 1) * g,
-        top: 0,
-        bottom: 0,
-        width: "0px",
-        borderLeft: `1px dashed rgba(255, 255, 255, ${s ? 0.05 : 0.1})`
-      } }, `grid-${A}`)),
-      s && /* @__PURE__ */ B(rt, { children: [
-        /* @__PURE__ */ W("div", { className: "gantt__group-wrapper", style: {
-          backgroundImage: `
+      gridTemplateColumns: j,
+      minWidth: "100%",
+      gridColumn: "1 / -1"
+    }, t[25] = j, t[26] = I) : I = t[26];
+    const Z = I;
+    let V;
+    t[27] !== W || t[28] !== h || t[29] !== c || t[30] !== i || t[31] !== a || t[32] !== s ? (V = !c && /* @__PURE__ */ x(rt, { columnCount: h, start: i, step: a, avgDuration: W, stepWidth: s }), t[27] = W, t[28] = h, t[29] = c, t[30] = i, t[31] = a, t[32] = s, t[33] = V) : V = t[33];
+    let A;
+    t[34] !== b || t[35] !== m || t[36] !== h || t[37] !== o || t[38] !== c || t[39] !== u || t[40] !== g || t[41] !== e.id || t[42] !== $ || t[43] !== i || t[44] !== a || t[45] !== s || t[46] !== f || t[47] !== d || t[48] !== p ? (A = (B, _) => /* @__PURE__ */ N(F, { children: [
+      /* @__PURE__ */ N("div", { style: {
+        gridColumn: "1 / -1",
+        minHeight: $,
+        position: "relative",
+        backgroundColor: "transparent"
+      }, children: [
+        Array.from({
+          length: h - 1
+        }).map((r, w) => /* @__PURE__ */ x("div", { style: {
+          position: "absolute",
+          left: (w + 1) * f,
+          top: 0,
+          bottom: 0,
+          width: "0px",
+          borderLeft: `1px dashed rgba(255, 255, 255, ${c ? 0.05 : 0.1})`
+        } }, `grid-${w}`)),
+        c && /* @__PURE__ */ N(F, { children: [
+          /* @__PURE__ */ x("div", { className: "gantt__group-wrapper", style: {
+            backgroundImage: `
                                         linear-gradient(to right, transparent, #070514), 
                                         repeating-linear-gradient(
                                           45deg, 
                                           transparent, 
                                           transparent 2px, 
-                                          ${Q(U(e.id.replace("target", "source")), 0.5)} 4px
+                                          ${J(K(e.id.replace("target", "source")), 0.5)} 4px
                                         )
                                     `,
-          left: `${I(h, h + r, i, o, a, d).left}px`,
-          width: `${I(h, h + r, i, o, a, d).width}px`
-        } }),
-        /* @__PURE__ */ W("div", { className: "gantt__group-wrapper", style: {
-          backgroundImage: `
+            left: `${C(g, g + a, i, o, d, p).left}px`,
+            width: `${C(g, g + a, i, o, d, p).width}px`
+          } }),
+          /* @__PURE__ */ x("div", { className: "gantt__group-wrapper", style: {
+            backgroundImage: `
                                         linear-gradient(to left, transparent, #070514), 
                                         repeating-linear-gradient(
                                           45deg, 
                                           transparent, 
                                           transparent 2px, 
-                                          ${Q(U(e.id.replace("target", "source")), 0.5)} 4px
+                                          ${J(K(e.id.replace("target", "source")), 0.5)} 4px
                                         )
                                     `,
-          left: `${I(c - r, c, i, o, a, d).left}px`,
-          width: `${I(c - r, c, i, o, a, d).width}px`
-        } })
-      ] }),
-      nt.map((M, A) => {
-        const q = I(M.start, M.end, i, o, a, d);
-        return q.width > 0 && /* @__PURE__ */ W(at, { id: M.id, w: `${q.width}px`, left: `${q.left}px`, children: f?.(M, A) }, M.id);
-      })
-    ] }, `row-${it}`), t[39] = f, t[40] = p, t[41] = o, t[42] = s, t[43] = c, t[44] = h, t[45] = e.id, t[46] = C, t[47] = i, t[48] = r, t[49] = g, t[50] = a, t[51] = d, t[52] = j) : j = t[52], b = G.map(j), t[8] = E, t[9] = f, t[10] = p, t[11] = o, t[12] = s, t[13] = c, t[14] = h, t[15] = n, t[16] = e.id, t[17] = C, t[18] = i, t[19] = r, t[20] = u, t[21] = g, t[22] = a, t[23] = d, t[24] = w, t[25] = x, t[26] = v, t[27] = $, t[28] = m, t[29] = b;
+            left: `${C(u - a, u, i, o, d, p).left}px`,
+            width: `${C(u - a, u, i, o, d, p).width}px`
+          } })
+        ] }),
+        B.map((r, w) => {
+          const D = C(r.start, r.end, i, o, d, p);
+          return D.width > 0 && /* @__PURE__ */ x(F, { children: /* @__PURE__ */ x(nt, { id: r.id, w: `${D.width}px`, left: `${D.left}px`, onClick: () => {
+            r.type == "group" && U((tt) => r.id === tt ? void 0 : r.id);
+          }, children: m?.(r, w) }, r.id) });
+        })
+      ] }, `row-${_}`),
+      B.map((r, w) => r.type === "group" && b === r.id && /* @__PURE__ */ x(it, { children: m, id: `group-target-${w}`, start: Math.min(...r.data.items.map(pt)) - Math.min(...r.data.items.map(ut)) / (r.data.firstGroupStep * r.data.step) * (r.data.groupStep * r.data.step), step: r.data.groupStep * r.data.step, stepWidth: s, rowHeight: $, items: r.data.items }, `group-target-${w}`))
+    ] }), t[34] = b, t[35] = m, t[36] = h, t[37] = o, t[38] = c, t[39] = u, t[40] = g, t[41] = e.id, t[42] = $, t[43] = i, t[44] = a, t[45] = s, t[46] = f, t[47] = d, t[48] = p, t[49] = A) : A = t[49], H = /* @__PURE__ */ N("div", { "data-gantt-id": e.id, id: e.id, ref: R, style: Z, children: [
+      V,
+      v.map(A)
+    ] }), t[7] = b, t[8] = W, t[9] = m, t[10] = h, t[11] = o, t[12] = c, t[13] = u, t[14] = g, t[15] = n, t[16] = e.id, t[17] = $, t[18] = i, t[19] = a, t[20] = s, t[21] = f, t[22] = d, t[23] = p, t[24] = H;
   } else
-    w = t[24], x = t[25], v = t[26], $ = t[27], m = t[28], b = t[29];
-  let y;
-  t[53] !== s ? (y = !s && /* @__PURE__ */ W(st, {}), t[53] = s, t[54] = y) : y = t[54];
-  let P;
-  return t[55] !== w || t[56] !== x || t[57] !== v || t[58] !== $ || t[59] !== m || t[60] !== b || t[61] !== y ? (P = /* @__PURE__ */ B("div", { "data-gantt-id": w, id: x, ref: v, style: $, children: [
-    m,
-    b,
-    y
-  ] }), t[55] = w, t[56] = x, t[57] = v, t[58] = $, t[59] = m, t[60] = b, t[61] = y, t[62] = P) : P = t[62], P;
+    H = t[24];
+  return H;
 };
-function dt(e) {
+function at(e) {
   return e.type !== "group";
 }
-function ct(e, t) {
+function ot(e, t) {
   return e + (t.end - t.start);
 }
-function pt(e) {
+function st(e) {
   return e.start;
 }
-function ht(e) {
+function dt(e) {
   return e.end;
 }
-function mt(e, t) {
+function lt(e, t) {
   return e.start - t.start;
 }
-function ft(e, t) {
-  const n = e.find((R) => !R.some((l) => !(t.end <= l.start || t.start >= l.end)));
+function ct(e, t) {
+  const n = e.find((y) => !y.some((l) => !(t.end <= l.start || t.start >= l.end)));
   return n ? (n.push(t), e) : [...e, [t]];
 }
+function pt(e) {
+  return e.start;
+}
+function ut(e) {
+  return e.start;
+}
 export {
-  Rt as GanttGroup
+  it as GanttGroup
 };

package/dist/components/progress/Progress.d.ts

@@ -3,6 +3,7 @@ import { default as React, CSSProperties } from 'react';
 import * as Radix from "@radix-ui/react-progress";
 export type ProgressProps = ComponentProps & Radix.ProgressProps & {
     color?: CSSProperties['background'];
+    dot?: React.ReactNode;
     predictionValue?: number | null;
 };
 export declare const Progress: React.FC<ProgressProps>;

package/dist/components/progress/Progress.js

@@ -3,15 +3,16 @@ import "../../utils/contextStore.js";
 import "react";
 import { mergeComponentProps as l } from "../../utils/component.js";
 import "js-md5";
-import { Progress as d, ProgressIndicator as n } from "../../node_modules/@radix-ui/react-progress/dist/index.js";
+import { Progress as g, ProgressIndicator as n } from "../../node_modules/@radix-ui/react-progress/dist/index.js";
 import '../../assets/components/progress/Progress.style.css';/* empty css                    */
-const y = (r) => {
+const v = (r) => {
   const {
     color: a = "white",
-    predictionValue: g,
+    predictionValue: h,
+    dot: m,
     ...o
-  } = r, t = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, m = `translateX(-${100 - t}%)`, s = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, c = `translateX(-${100 - s}%)`;
-  return /* @__PURE__ */ i(d, { ...l("progress", {
+  } = r, t = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, c = `translateX(-${100 - t}%)`, s = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, d = `translateX(-${100 - s}%)`;
+  return /* @__PURE__ */ i(g, { ...l("progress", {
     ...o,
     style: {
       ...o.style,
@@ -20,7 +21,7 @@ const y = (r) => {
       "--color": a
     }
   }), children: [
-    /* @__PURE__ */ e("div", { className: "progress__dot" }),
+    /* @__PURE__ */ e("div", { className: "progress__dot", children: m }),
     /* @__PURE__ */ i("div", { style: {
       width: "100%",
       height: "100%",
@@ -29,14 +30,14 @@ const y = (r) => {
       position: "relative"
     }, children: [
       /* @__PURE__ */ e(n, { className: "progress__indicator", style: {
-        transform: m
+        transform: c
       } }),
       typeof r.predictionValue == "number" && /* @__PURE__ */ e(n, { className: "progress__indicator progress__indicator--prediction", style: {
-        transform: c
+        transform: d
       } })
     ] })
   ] });
 };
 export {
-  y as Progress
+  v as Progress
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {