@devalok/shilp-sutra 0.1.0

package/dist/primitives/react-tabs.js

@@ -0,0 +1,163 @@
+import * as v from "react";
+import { composeEventHandlers as g } from "./_internal/primitive.js";
+import { createContextScope as x } from "./_internal/react-context.js";
+import { Root as E, Item as F, createRovingFocusGroupScope as C } from "./react-roving-focus.js";
+import { Presence as w } from "./_internal/react-presence.js";
+import { Primitive as b } from "./_internal/react-primitive.js";
+import { useDirection as D } from "./_internal/react-direction.js";
+import { useControllableState as V } from "./_internal/react-use-controllable-state.js";
+import { useId as G } from "./_internal/react-id.js";
+import { jsx as l } from "react/jsx-runtime";
+var p = "Tabs", [L] = x(p, [
+  C
+]), h = C(), [$, T] = L(p), I = v.forwardRef(
+  (e, r) => {
+    const {
+      __scopeTabs: s,
+      value: t,
+      onValueChange: n,
+      defaultValue: c,
+      orientation: o = "horizontal",
+      dir: d,
+      activationMode: f = "automatic",
+      ...m
+    } = e, i = D(d), [a, u] = V({
+      prop: t,
+      onChange: n,
+      defaultProp: c ?? "",
+      caller: p
+    });
+    return /* @__PURE__ */ l(
+      $,
+      {
+        scope: s,
+        baseId: G(),
+        value: a,
+        onValueChange: u,
+        orientation: o,
+        dir: i,
+        activationMode: f,
+        children: /* @__PURE__ */ l(
+          b.div,
+          {
+            dir: i,
+            "data-orientation": o,
+            ...m,
+            ref: r
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = p;
+var R = "TabsList", _ = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, loop: t = !0, ...n } = e, c = T(R, s), o = h(s);
+    return /* @__PURE__ */ l(
+      E,
+      {
+        asChild: !0,
+        ...o,
+        orientation: c.orientation,
+        dir: c.dir,
+        loop: t,
+        children: /* @__PURE__ */ l(
+          b.div,
+          {
+            role: "tablist",
+            "aria-orientation": c.orientation,
+            ...n,
+            ref: r
+          }
+        )
+      }
+    );
+  }
+);
+_.displayName = R;
+var y = "TabsTrigger", A = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, disabled: n = !1, ...c } = e, o = T(y, s), d = h(s), f = P(o.baseId, t), m = S(o.baseId, t), i = t === o.value;
+    return /* @__PURE__ */ l(
+      F,
+      {
+        asChild: !0,
+        ...d,
+        focusable: !n,
+        active: i,
+        children: /* @__PURE__ */ l(
+          b.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i,
+            "aria-controls": m,
+            "data-state": i ? "active" : "inactive",
+            "data-disabled": n ? "" : void 0,
+            disabled: n,
+            id: f,
+            ...c,
+            ref: r,
+            onMouseDown: g(e.onMouseDown, (a) => {
+              !n && a.button === 0 && a.ctrlKey === !1 ? o.onValueChange(t) : a.preventDefault();
+            }),
+            onKeyDown: g(e.onKeyDown, (a) => {
+              [" ", "Enter"].includes(a.key) && o.onValueChange(t);
+            }),
+            onFocus: g(e.onFocus, () => {
+              const a = o.activationMode !== "manual";
+              !i && !n && a && o.onValueChange(t);
+            })
+          }
+        )
+      }
+    );
+  }
+);
+A.displayName = y;
+var M = "TabsContent", N = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, forceMount: n, children: c, ...o } = e, d = T(M, s), f = P(d.baseId, t), m = S(d.baseId, t), i = t === d.value, a = v.useRef(i);
+    return v.useEffect(() => {
+      const u = requestAnimationFrame(() => a.current = !1);
+      return () => cancelAnimationFrame(u);
+    }, []), /* @__PURE__ */ l(w, { present: n || i, children: ({ present: u }) => /* @__PURE__ */ l(
+      b.div,
+      {
+        "data-state": i ? "active" : "inactive",
+        "data-orientation": d.orientation,
+        role: "tabpanel",
+        "aria-labelledby": f,
+        hidden: !u,
+        id: m,
+        tabIndex: 0,
+        ...o,
+        ref: r,
+        style: {
+          ...e.style,
+          animationDuration: a.current ? "0s" : void 0
+        },
+        children: u && c
+      }
+    ) });
+  }
+);
+N.displayName = M;
+function P(e, r) {
+  return `${e}-trigger-${r}`;
+}
+function S(e, r) {
+  return `${e}-content-${r}`;
+}
+var Q = I, U = _, W = A, X = N;
+export {
+  X as Content,
+  U as List,
+  Q as Root,
+  I as Tabs,
+  N as TabsContent,
+  _ as TabsList,
+  A as TabsTrigger,
+  W as Trigger
+};

package/dist/primitives/react-toast.js

@@ -0,0 +1,446 @@
+import * as n from "react";
+import * as Pe from "react-dom";
+import { composeEventHandlers as R } from "./_internal/primitive.js";
+import { useComposedRefs as oe } from "./_internal/react-compose-refs.js";
+import { createCollection as Ce } from "./_internal/react-collection.js";
+import { createContextScope as xe } from "./_internal/react-context.js";
+import { Branch as he, Root as Re } from "./_internal/react-dismissable-layer.js";
+import { Portal as be } from "./_internal/react-portal.js";
+import { Presence as ge } from "./_internal/react-presence.js";
+import { Primitive as D, dispatchDiscreteCustomEvent as Se } from "./_internal/react-primitive.js";
+import { useCallbackRef as U } from "./_internal/react-use-callback-ref.js";
+import { useControllableState as Ie } from "./_internal/react-use-controllable-state.js";
+import { useLayoutEffect as Ae } from "./_internal/react-use-layout-effect.js";
+import { VisuallyHidden as re } from "./react-visually-hidden.js";
+import { jsx as l, jsxs as G, Fragment as ne } from "react/jsx-runtime";
+var J = "ToastProvider", [Q, Fe, _e] = Ce("Toast"), [se] = xe("Toast", [_e]), [De, X] = se(J), ae = (e) => {
+  const {
+    __scopeToast: o,
+    label: r = "Notification",
+    duration: t = 5e3,
+    swipeDirection: c = "right",
+    swipeThreshold: d = 50,
+    children: p
+  } = e, [v, T] = n.useState(null), [s, h] = n.useState(0), y = n.useRef(!1), N = n.useRef(!1);
+  return r.trim() || console.error(
+    `Invalid prop \`label\` supplied to \`${J}\`. Expected non-empty \`string\`.`
+  ), /* @__PURE__ */ l(Q.Provider, { scope: o, children: /* @__PURE__ */ l(
+    De,
+    {
+      scope: o,
+      label: r,
+      duration: t,
+      swipeDirection: c,
+      swipeThreshold: d,
+      toastCount: s,
+      viewport: v,
+      onViewportChange: T,
+      onToastAdd: n.useCallback(() => h((g) => g + 1), []),
+      onToastRemove: n.useCallback(() => h((g) => g - 1), []),
+      isFocusedToastEscapeKeyDownRef: y,
+      isClosePausedRef: N,
+      children: p
+    }
+  ) });
+};
+ae.displayName = J;
+var ie = "ToastViewport", Ne = ["F8"], j = "toast.viewportPause", q = "toast.viewportResume", ce = n.forwardRef(
+  (e, o) => {
+    const {
+      __scopeToast: r,
+      hotkey: t = Ne,
+      label: c = "Notifications ({hotkey})",
+      ...d
+    } = e, p = X(ie, r), v = Fe(r), T = n.useRef(null), s = n.useRef(null), h = n.useRef(null), y = n.useRef(null), N = oe(o, y, p.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), S = p.toastCount > 0;
+    n.useEffect(() => {
+      const i = (P) => {
+        var m;
+        t.length !== 0 && t.every((w) => P[w] || P.code === w) && ((m = y.current) == null || m.focus());
+      };
+      return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+    }, [t]), n.useEffect(() => {
+      const i = T.current, P = y.current;
+      if (S && i && P) {
+        const f = () => {
+          if (!p.isClosePausedRef.current) {
+            const C = new CustomEvent(j);
+            P.dispatchEvent(C), p.isClosePausedRef.current = !0;
+          }
+        }, m = () => {
+          if (p.isClosePausedRef.current) {
+            const C = new CustomEvent(q);
+            P.dispatchEvent(C), p.isClosePausedRef.current = !1;
+          }
+        }, w = (C) => {
+          !i.contains(C.relatedTarget) && m();
+        }, E = () => {
+          i.contains(document.activeElement) || m();
+        };
+        return i.addEventListener("focusin", f), i.addEventListener("focusout", w), i.addEventListener("pointermove", f), i.addEventListener("pointerleave", E), window.addEventListener("blur", f), window.addEventListener("focus", m), () => {
+          i.removeEventListener("focusin", f), i.removeEventListener("focusout", w), i.removeEventListener("pointermove", f), i.removeEventListener("pointerleave", E), window.removeEventListener("blur", f), window.removeEventListener("focus", m);
+        };
+      }
+    }, [S, p.isClosePausedRef]);
+    const u = n.useCallback(
+      ({ tabbingDirection: i }) => {
+        const f = v().map((m) => {
+          const w = m.ref.current, E = [w, ...Be(w)];
+          return i === "forwards" ? E : E.reverse();
+        });
+        return (i === "forwards" ? f.reverse() : f).flat();
+      },
+      [v]
+    );
+    return n.useEffect(() => {
+      const i = y.current;
+      if (i) {
+        const P = (f) => {
+          var E, C, I;
+          const m = f.altKey || f.ctrlKey || f.metaKey;
+          if (f.key === "Tab" && !m) {
+            const L = document.activeElement, F = f.shiftKey;
+            if (f.target === i && F) {
+              (E = s.current) == null || E.focus();
+              return;
+            }
+            const A = u({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((a) => a === L);
+            B(A.slice(V + 1)) ? f.preventDefault() : F ? (C = s.current) == null || C.focus() : (I = h.current) == null || I.focus();
+          }
+        };
+        return i.addEventListener("keydown", P), () => i.removeEventListener("keydown", P);
+      }
+    }, [v, u]), /* @__PURE__ */ G(
+      he,
+      {
+        ref: T,
+        role: "region",
+        "aria-label": c.replace("{hotkey}", g),
+        tabIndex: -1,
+        style: { pointerEvents: S ? void 0 : "none" },
+        children: [
+          S && /* @__PURE__ */ l(
+            z,
+            {
+              ref: s,
+              onFocusFromOutsideViewport: () => {
+                const i = u({
+                  tabbingDirection: "forwards"
+                });
+                B(i);
+              }
+            }
+          ),
+          /* @__PURE__ */ l(Q.Slot, { scope: r, children: /* @__PURE__ */ l(D.ol, { tabIndex: -1, ...d, ref: N }) }),
+          S && /* @__PURE__ */ l(
+            z,
+            {
+              ref: h,
+              onFocusFromOutsideViewport: () => {
+                const i = u({
+                  tabbingDirection: "backwards"
+                });
+                B(i);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ce.displayName = ie;
+var ue = "ToastFocusProxy", z = n.forwardRef(
+  (e, o) => {
+    const { __scopeToast: r, onFocusFromOutsideViewport: t, ...c } = e, d = X(ue, r);
+    return /* @__PURE__ */ l(
+      re,
+      {
+        tabIndex: 0,
+        ...c,
+        ref: o,
+        style: { position: "fixed" },
+        onFocus: (p) => {
+          var s;
+          const v = p.relatedTarget;
+          !((s = d.viewport) != null && s.contains(v)) && t();
+        }
+      }
+    );
+  }
+);
+z.displayName = ue;
+var k = "Toast", Le = "toast.swipeStart", Me = "toast.swipeMove", Oe = "toast.swipeCancel", ke = "toast.swipeEnd", le = n.forwardRef(
+  (e, o) => {
+    const { forceMount: r, open: t, defaultOpen: c, onOpenChange: d, ...p } = e, [v, T] = Ie({
+      prop: t,
+      defaultProp: c ?? !0,
+      onChange: d,
+      caller: k
+    });
+    return /* @__PURE__ */ l(ge, { present: r || v, children: /* @__PURE__ */ l(
+      He,
+      {
+        open: v,
+        ...p,
+        ref: o,
+        onClose: () => T(!1),
+        onPause: U(e.onPause),
+        onResume: U(e.onResume),
+        onSwipeStart: R(e.onSwipeStart, (s) => {
+          s.currentTarget.setAttribute("data-swipe", "start");
+        }),
+        onSwipeMove: R(e.onSwipeMove, (s) => {
+          const { x: h, y } = s.detail.delta;
+          s.currentTarget.setAttribute("data-swipe", "move"), s.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${h}px`), s.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
+        }),
+        onSwipeCancel: R(e.onSwipeCancel, (s) => {
+          s.currentTarget.setAttribute("data-swipe", "cancel"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), s.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
+        }),
+        onSwipeEnd: R(e.onSwipeEnd, (s) => {
+          const { x: h, y } = s.detail.delta;
+          s.currentTarget.setAttribute("data-swipe", "end"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), s.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${h}px`), s.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`), T(!1);
+        })
+      }
+    ) });
+  }
+);
+le.displayName = k;
+var [Ve, Ke] = se(k, {
+  onClose() {
+  }
+}), He = n.forwardRef(
+  (e, o) => {
+    const {
+      __scopeToast: r,
+      type: t = "foreground",
+      duration: c,
+      open: d,
+      onClose: p,
+      onEscapeKeyDown: v,
+      onPause: T,
+      onResume: s,
+      onSwipeStart: h,
+      onSwipeMove: y,
+      onSwipeCancel: N,
+      onSwipeEnd: g,
+      ...S
+    } = e, u = X(k, r), [i, P] = n.useState(null), f = oe(o, (a) => P(a)), m = n.useRef(null), w = n.useRef(null), E = c || u.duration, C = n.useRef(0), I = n.useRef(E), L = n.useRef(0), { onToastAdd: F, onToastRemove: Y } = u, _ = U(() => {
+      var x;
+      (i == null ? void 0 : i.contains(document.activeElement)) && ((x = u.viewport) == null || x.focus()), p();
+    }), A = n.useCallback(
+      (a) => {
+        !a || a === 1 / 0 || (window.clearTimeout(L.current), C.current = (/* @__PURE__ */ new Date()).getTime(), L.current = window.setTimeout(_, a));
+      },
+      [_]
+    );
+    n.useEffect(() => {
+      const a = u.viewport;
+      if (a) {
+        const x = () => {
+          A(I.current), s == null || s();
+        }, b = () => {
+          const M = (/* @__PURE__ */ new Date()).getTime() - C.current;
+          I.current = I.current - M, window.clearTimeout(L.current), T == null || T();
+        };
+        return a.addEventListener(j, b), a.addEventListener(q, x), () => {
+          a.removeEventListener(j, b), a.removeEventListener(q, x);
+        };
+      }
+    }, [u.viewport, E, T, s, A]), n.useEffect(() => {
+      d && !u.isClosePausedRef.current && A(E);
+    }, [d, E, u.isClosePausedRef, A]), n.useEffect(() => (F(), () => Y()), [F, Y]);
+    const V = n.useMemo(() => i ? we(i) : null, [i]);
+    return u.viewport ? /* @__PURE__ */ G(ne, { children: [
+      V && /* @__PURE__ */ l(
+        We,
+        {
+          __scopeToast: r,
+          role: "status",
+          "aria-live": t === "foreground" ? "assertive" : "polite",
+          children: V
+        }
+      ),
+      /* @__PURE__ */ l(Ve, { scope: r, onClose: _, children: Pe.createPortal(
+        /* @__PURE__ */ l(Q.ItemSlot, { scope: r, children: /* @__PURE__ */ l(
+          Re,
+          {
+            asChild: !0,
+            onEscapeKeyDown: R(v, () => {
+              u.isFocusedToastEscapeKeyDownRef.current || _(), u.isFocusedToastEscapeKeyDownRef.current = !1;
+            }),
+            children: /* @__PURE__ */ l(
+              D.li,
+              {
+                tabIndex: 0,
+                "data-state": d ? "open" : "closed",
+                "data-swipe-direction": u.swipeDirection,
+                ...S,
+                ref: f,
+                style: { userSelect: "none", touchAction: "none", ...e.style },
+                onKeyDown: R(e.onKeyDown, (a) => {
+                  a.key === "Escape" && (v == null || v(a.nativeEvent), a.nativeEvent.defaultPrevented || (u.isFocusedToastEscapeKeyDownRef.current = !0, _()));
+                }),
+                onPointerDown: R(e.onPointerDown, (a) => {
+                  a.button === 0 && (m.current = { x: a.clientX, y: a.clientY });
+                }),
+                onPointerMove: R(e.onPointerMove, (a) => {
+                  if (!m.current) return;
+                  const x = a.clientX - m.current.x, b = a.clientY - m.current.y, M = !!w.current, O = ["left", "right"].includes(u.swipeDirection), K = ["left", "up"].includes(u.swipeDirection) ? Math.min : Math.max, Ee = O ? K(0, x) : 0, ye = O ? 0 : K(0, b), $ = a.pointerType === "touch" ? 10 : 2, H = { x: Ee, y: ye }, ee = { originalEvent: a, delta: H };
+                  M ? (w.current = H, W(Me, y, ee, {
+                    discrete: !1
+                  })) : te(H, u.swipeDirection, $) ? (w.current = H, W(Le, h, ee, {
+                    discrete: !1
+                  }), a.target.setPointerCapture(a.pointerId)) : (Math.abs(x) > $ || Math.abs(b) > $) && (m.current = null);
+                }),
+                onPointerUp: R(e.onPointerUp, (a) => {
+                  const x = w.current, b = a.target;
+                  if (b.hasPointerCapture(a.pointerId) && b.releasePointerCapture(a.pointerId), w.current = null, m.current = null, x) {
+                    const M = a.currentTarget, O = { originalEvent: a, delta: x };
+                    te(x, u.swipeDirection, u.swipeThreshold) ? W(ke, g, O, {
+                      discrete: !0
+                    }) : W(
+                      Oe,
+                      N,
+                      O,
+                      {
+                        discrete: !0
+                      }
+                    ), M.addEventListener("click", (K) => K.preventDefault(), {
+                      once: !0
+                    });
+                  }
+                })
+              }
+            )
+          }
+        ) }),
+        u.viewport
+      ) })
+    ] }) : null;
+  }
+), We = (e) => {
+  const { __scopeToast: o, children: r, ...t } = e, c = X(k, o), [d, p] = n.useState(!1), [v, T] = n.useState(!1);
+  return Ye(() => p(!0)), n.useEffect(() => {
+    const s = window.setTimeout(() => T(!0), 1e3);
+    return () => window.clearTimeout(s);
+  }, []), v ? null : /* @__PURE__ */ l(be, { asChild: !0, children: /* @__PURE__ */ l(re, { ...t, children: d && /* @__PURE__ */ G(ne, { children: [
+    c.label,
+    " ",
+    r
+  ] }) }) });
+}, Ue = "ToastTitle", de = n.forwardRef(
+  (e, o) => {
+    const { __scopeToast: r, ...t } = e;
+    return /* @__PURE__ */ l(D.div, { ...t, ref: o });
+  }
+);
+de.displayName = Ue;
+var Xe = "ToastDescription", pe = n.forwardRef(
+  (e, o) => {
+    const { __scopeToast: r, ...t } = e;
+    return /* @__PURE__ */ l(D.div, { ...t, ref: o });
+  }
+);
+pe.displayName = Xe;
+var fe = "ToastAction", me = n.forwardRef(
+  (e, o) => {
+    const { altText: r, ...t } = e;
+    return r.trim() ? /* @__PURE__ */ l(Te, { altText: r, asChild: !0, children: /* @__PURE__ */ l(Z, { ...t, ref: o }) }) : (console.error(
+      `Invalid prop \`altText\` supplied to \`${fe}\`. Expected non-empty \`string\`.`
+    ), null);
+  }
+);
+me.displayName = fe;
+var ve = "ToastClose", Z = n.forwardRef(
+  (e, o) => {
+    const { __scopeToast: r, ...t } = e, c = Ke(ve, r);
+    return /* @__PURE__ */ l(Te, { asChild: !0, children: /* @__PURE__ */ l(
+      D.button,
+      {
+        type: "button",
+        ...t,
+        ref: o,
+        onClick: R(e.onClick, c.onClose)
+      }
+    ) });
+  }
+);
+Z.displayName = ve;
+var Te = n.forwardRef((e, o) => {
+  const { __scopeToast: r, altText: t, ...c } = e;
+  return /* @__PURE__ */ l(
+    D.div,
+    {
+      "data-radix-toast-announce-exclude": "",
+      "data-radix-toast-announce-alt": t || void 0,
+      ...c,
+      ref: o
+    }
+  );
+});
+function we(e) {
+  const o = [];
+  return Array.from(e.childNodes).forEach((t) => {
+    if (t.nodeType === t.TEXT_NODE && t.textContent && o.push(t.textContent), $e(t)) {
+      const c = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
+      if (!c)
+        if (d) {
+          const p = t.dataset.radixToastAnnounceAlt;
+          p && o.push(p);
+        } else
+          o.push(...we(t));
+    }
+  }), o;
+}
+function W(e, o, r, { discrete: t }) {
+  const c = r.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: r });
+  o && c.addEventListener(e, o, { once: !0 }), t ? Se(c, d) : c.dispatchEvent(d);
+}
+var te = (e, o, r = 0) => {
+  const t = Math.abs(e.x), c = Math.abs(e.y), d = t > c;
+  return o === "left" || o === "right" ? d && t > r : !d && c > r;
+};
+function Ye(e = () => {
+}) {
+  const o = U(e);
+  Ae(() => {
+    let r = 0, t = 0;
+    return r = window.requestAnimationFrame(() => t = window.requestAnimationFrame(o)), () => {
+      window.cancelAnimationFrame(r), window.cancelAnimationFrame(t);
+    };
+  }, [o]);
+}
+function $e(e) {
+  return e.nodeType === e.ELEMENT_NODE;
+}
+function Be(e) {
+  const o = [], r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (t) => {
+      const c = t.tagName === "INPUT" && t.type === "hidden";
+      return t.disabled || t.hidden || c ? NodeFilter.FILTER_SKIP : t.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  for (; r.nextNode(); ) o.push(r.currentNode);
+  return o;
+}
+function B(e) {
+  const o = document.activeElement;
+  return e.some((r) => r === o ? !0 : (r.focus(), document.activeElement !== o));
+}
+var at = ae, it = ce, ct = le, ut = de, lt = pe, dt = me, pt = Z;
+export {
+  dt as Action,
+  pt as Close,
+  lt as Description,
+  at as Provider,
+  ct as Root,
+  ut as Title,
+  le as Toast,
+  me as ToastAction,
+  Z as ToastClose,
+  pe as ToastDescription,
+  ae as ToastProvider,
+  de as ToastTitle,
+  ce as ToastViewport,
+  it as Viewport
+};