@shellui/core 0.0.11 → 0.0.13

package/dist/WindowsLayout-CEqkRKyk.js

@@ -0,0 +1,633 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useMemo as Z, useState as P, useRef as M, useEffect as T, useCallback as g } from "react";
+import { useTranslation as ne } from "react-i18next";
+import { shellui as q } from "@shellui/sdk";
+import { a as re, s as oe, b as J, Z as $, r as O, c as C } from "./index-CfvdAI_Y.js";
+import { L as se, O as ie } from "./OverlayShell-kDY56DaN.js";
+import { C as ae } from "./ContentView-CZG-ro_B.js";
+const F = (o) => {
+  try {
+    const w = new URL(o).hostname;
+    return w ? `https://icons.duckduckgo.com/ip3/${w}.ico` : null;
+  } catch {
+    return null;
+  }
+}, X = (o) => o.startsWith("/icons/"), le = () => `win-${Date.now()}-${Math.random().toString(36).slice(2)}`, Q = 280, ee = 200, ce = 720, de = 480, V = 48;
+function te() {
+  return {
+    x: 0,
+    y: 0,
+    w: typeof window < "u" ? window.innerWidth : 800,
+    h: typeof window < "u" ? window.innerHeight - V : 600
+  };
+}
+function ue(o, L, w) {
+  const x = `/${L}`, u = w.length > x.length ? w.slice(x.length + 1) : "";
+  return u ? `${o.endsWith("/") ? o : `${o}/`}${u}` : o;
+}
+function he({
+  win: o,
+  navItem: L,
+  currentLanguage: w,
+  isFocused: x,
+  onFocus: u,
+  onClose: A,
+  onBoundsChange: m,
+  maxZIndex: R,
+  zIndex: Y
+}) {
+  const H = O(L.label, w), [c, l] = P(o.bounds), [h, y] = P(!1), N = M(c), b = M(null), p = M(null), v = M(null), _ = M(null), z = M(null);
+  T(() => {
+    l(o.bounds);
+  }, [o.bounds]), T(() => {
+    m(c);
+  }, [c, m]), T(() => {
+    if (!h) return;
+    const t = () => l(te());
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [h]);
+  const W = g((t) => {
+    if (!p.current) return;
+    const r = p.current, a = t.clientX - r.startX, I = t.clientY - r.startY;
+    r.lastDx = a, r.lastDy = I;
+    const f = b.current;
+    f && (f.style.willChange = "transform", f.style.transform = `translate(${a}px, ${I}px)`);
+  }, []), E = g(
+    (t) => {
+      const r = b.current;
+      if (r && (r.removeEventListener("pointermove", W), r.removeEventListener("pointerup", E), r.releasePointerCapture(t.pointerId)), p.current) {
+        const a = p.current;
+        r && (r.style.transform = "", r.style.willChange = "");
+        const I = {
+          ...a.startBounds,
+          x: Math.max(0, a.startBounds.x + a.lastDx),
+          y: Math.max(0, a.startBounds.y + a.lastDy)
+        };
+        l(I), p.current = null;
+      }
+    },
+    [W]
+  ), j = g(
+    (t) => {
+      if (t.button !== 0 || h || t.target.closest("button")) return;
+      t.preventDefault(), u(), p.current = {
+        startX: t.clientX,
+        startY: t.clientY,
+        startBounds: { ...c },
+        lastDx: 0,
+        lastDy: 0
+      };
+      const r = b.current;
+      r && (r.setPointerCapture(t.pointerId), r.addEventListener("pointermove", W, { passive: !0 }), r.addEventListener("pointerup", E));
+    },
+    [c, h, u, W, E]
+  ), U = g(() => {
+    h ? (l(N.current), y(!1)) : (N.current = { ...c }, l(te()), y(!0));
+  }, [h, c]), B = g((t) => {
+    if (!v.current) return;
+    const { edge: r, startX: a, startY: I, startBounds: f } = v.current, G = t.clientX - a, K = t.clientY - I, D = { ...f };
+    if (r.includes("e") && (D.w = Math.max(Q, f.w + G)), r.includes("w")) {
+      const k = Math.max(Q, f.w - G);
+      D.x = f.x + f.w - k, D.w = k;
+    }
+    if (r.includes("s") && (D.h = Math.max(ee, f.h + K)), r.includes("n")) {
+      const k = Math.max(ee, f.h - K);
+      D.y = f.y + f.h - k, D.h = k;
+    }
+    z.current = D, _.current === null && (_.current = requestAnimationFrame(() => {
+      const k = z.current;
+      _.current = null, z.current = null, k && l(k);
+    }));
+  }, []), S = g(
+    (t) => {
+      const r = b.current;
+      r && (r.removeEventListener("pointermove", B), r.removeEventListener("pointerup", S), r.releasePointerCapture(t.pointerId)), v.current = null;
+    },
+    [B]
+  ), e = g(
+    (t, r) => {
+      if (t.button !== 0) return;
+      t.preventDefault(), t.stopPropagation(), u(), v.current = {
+        edge: r,
+        startX: t.clientX,
+        startY: t.clientY,
+        startBounds: { ...c }
+      };
+      const a = b.current;
+      a && (a.setPointerCapture(t.pointerId), a.addEventListener("pointermove", B, {
+        passive: !0
+      }), a.addEventListener("pointerup", S));
+    },
+    [c, u, B, S]
+  ), s = Z(
+    () => ue(o.baseUrl, o.path, o.pathname),
+    [o.baseUrl, o.path, o.pathname]
+  ), i = x ? R : Y;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: b,
+      className: "absolute flex flex-col rounded-lg border border-border bg-card shadow-lg overflow-hidden",
+      style: {
+        left: c.x,
+        top: c.y,
+        width: c.w,
+        height: c.h,
+        zIndex: i
+      },
+      onClick: u,
+      onMouseDown: u,
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: "flex items-center gap-2 pl-2 pr-1 py-1 bg-muted/80 border-b border-border cursor-move select-none shrink-0",
+            onPointerDown: j,
+            children: [
+              o.icon && /* @__PURE__ */ n(
+                "img",
+                {
+                  src: o.icon,
+                  alt: "",
+                  className: C(
+                    "h-4 w-4 shrink-0 rounded-sm object-cover",
+                    X(o.icon) && "opacity-90 dark:opacity-100 dark:invert"
+                  )
+                }
+              ),
+              /* @__PURE__ */ n("span", { className: "flex-1 text-sm font-medium truncate min-w-0", children: H }),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: (t) => {
+                    t.stopPropagation(), U();
+                  },
+                  className: "p-1 rounded cursor-pointer text-muted-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  "aria-label": h ? "Restore" : "Maximize",
+                  children: h ? /* @__PURE__ */ n(fe, { className: "h-4 w-4" }) : /* @__PURE__ */ n(pe, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: (t) => {
+                    t.stopPropagation(), A();
+                  },
+                  className: "p-1 rounded cursor-pointer text-muted-foreground hover:bg-destructive/20 hover:text-destructive transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ n(me, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: "flex-1 min-h-0 relative bg-background", children: [
+          !x && /* @__PURE__ */ n(
+            "div",
+            {
+              className: "absolute inset-0 z-10 cursor-pointer",
+              onClick: u,
+              onMouseDown: (t) => {
+                t.stopPropagation(), u();
+              },
+              "aria-hidden": !0
+            }
+          ),
+          /* @__PURE__ */ n(
+            ae,
+            {
+              url: s,
+              pathPrefix: o.path,
+              ignoreMessages: !0,
+              navItem: L
+            }
+          )
+        ] }),
+        !h && ["n", "s", "e", "w", "ne", "nw", "se", "sw"].map((t) => /* @__PURE__ */ n(
+          "div",
+          {
+            className: C(
+              "absolute bg-transparent",
+              t.includes("n") && "top-0 h-2 cursor-n-resize",
+              t.includes("s") && "bottom-0 h-2 cursor-s-resize",
+              t.includes("e") && "right-0 w-2 cursor-e-resize",
+              t.includes("w") && "left-0 w-2 cursor-w-resize",
+              t === "n" && "left-2 right-2",
+              t === "s" && "left-2 right-2",
+              t === "e" && "top-2 bottom-2",
+              t === "w" && "top-2 bottom-2",
+              t === "ne" && "top-0 right-0 w-2 h-2 cursor-ne-resize",
+              t === "nw" && "top-0 left-0 w-2 h-2 cursor-nw-resize",
+              t === "se" && "bottom-0 right-0 w-2 h-2 cursor-se-resize",
+              t === "sw" && "bottom-0 left-0 w-2 h-2 cursor-sw-resize"
+            ),
+            style: t === "n" ? { left: 8, right: 8 } : t === "s" ? { left: 8, right: 8 } : t === "e" ? { top: 8, bottom: 8 } : t === "w" ? { top: 8, bottom: 8 } : void 0,
+            onPointerDown: (r) => e(r, t)
+          },
+          t
+        ))
+      ]
+    }
+  );
+}
+function pe({ className: o }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: o,
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ n("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+        /* @__PURE__ */ n("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+        /* @__PURE__ */ n("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+        /* @__PURE__ */ n("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+      ]
+    }
+  );
+}
+function fe({ className: o }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: o,
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ n(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "10",
+            height: "10",
+            rx: "1"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "rect",
+          {
+            x: "11",
+            y: "11",
+            width: "10",
+            height: "10",
+            rx: "1"
+          }
+        )
+      ]
+    }
+  );
+}
+function me({ className: o }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: o,
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function be({ className: o }) {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className: o,
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ n("path", { d: "M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" })
+    }
+  );
+}
+function ge() {
+  return typeof window < "u" && Intl.DateTimeFormat ? Intl.DateTimeFormat().resolvedOptions().timeZone : "UTC";
+}
+function ze({
+  title: o,
+  appIcon: L,
+  logo: w,
+  navigation: x
+}) {
+  const { i18n: u } = ne(), { settings: A } = re(), m = u.language || "en", R = A.region?.timezone ?? ge(), { startNavItems: Y, endNavItems: H, navigationItems: c } = Z(() => {
+    const { start: e, end: s } = oe(x);
+    return {
+      startNavItems: J(e),
+      endNavItems: s,
+      navigationItems: J(x)
+    };
+  }, [x]), [l, h] = P([]), [y, N] = P(null), [b, p] = P(!1), [v, _] = P(() => /* @__PURE__ */ new Date()), z = M(null);
+  T(() => {
+    const e = setInterval(() => _(/* @__PURE__ */ new Date()), 1e3);
+    return () => clearInterval(e);
+  }, []);
+  const W = Z(
+    () => $.WINDOWS_WINDOW_BASE + Math.max(l.length, 1),
+    [l.length]
+  ), E = g(
+    (e) => {
+      const s = typeof e.label == "string" ? e.label : O(e.label, m), i = e.openIn === "external" && !e.icon ? F(e.url) : null, t = e.icon ?? i ?? null, r = le(), a = {
+        x: 60 + l.length * 24,
+        y: 60 + l.length * 24,
+        w: ce,
+        h: de
+      };
+      h((I) => [
+        ...I,
+        {
+          id: r,
+          path: e.path,
+          pathname: `/${e.path}`,
+          baseUrl: e.url,
+          label: s,
+          icon: t,
+          bounds: a
+        }
+      ]), N(r), p(!1);
+    },
+    [m, l.length]
+  ), j = g((e) => {
+    h((s) => s.filter((i) => i.id !== e)), N((s) => s === e ? null : s);
+  }, []);
+  T(() => {
+    if (l.length === 0) {
+      N(null);
+      return;
+    }
+    y !== null && l.some((s) => s.id === y) || N(l[0].id);
+  }, [l, y]);
+  const U = g((e) => {
+    N(e);
+  }, []), B = g((e, s) => {
+    h((i) => i.map((t) => t.id === e ? { ...t, bounds: s } : t));
+  }, []);
+  T(() => {
+    if (!b) return;
+    const e = (s) => {
+      z.current && !z.current.contains(s.target) && p(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [b]);
+  const S = g(
+    (e) => {
+      if (e.openIn === "modal") {
+        q.openModal(e.url), p(!1);
+        return;
+      }
+      if (e.openIn === "drawer") {
+        q.openDrawer({ url: e.url, position: e.drawerPosition }), p(!1);
+        return;
+      }
+      if (e.openIn === "external") {
+        window.open(e.url, "_blank", "noopener,noreferrer"), p(!1);
+        return;
+      }
+      E(e);
+    },
+    [E]
+  );
+  return /* @__PURE__ */ n(se, { children: /* @__PURE__ */ d(ie, { navigationItems: c, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "fixed inset-0 bg-muted/30",
+        style: { paddingBottom: V },
+        children: l.map((e, s) => {
+          const i = c.find((a) => a.path === e.path);
+          if (!i) return null;
+          const t = e.id === y, r = $.WINDOWS_WINDOW_BASE + s;
+          return /* @__PURE__ */ n(
+            he,
+            {
+              win: e,
+              navItem: i,
+              currentLanguage: m,
+              isFocused: t,
+              onFocus: () => U(e.id),
+              onClose: () => j(e.id),
+              onBoundsChange: (a) => B(e.id, a),
+              maxZIndex: W,
+              zIndex: r
+            },
+            e.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: "fixed left-0 right-0 bottom-0 flex items-center gap-1 px-2 border-t border-border bg-sidebar-background",
+        style: {
+          height: V,
+          zIndex: $.WINDOWS_TASKBAR,
+          paddingBottom: "env(safe-area-inset-bottom, 0px)"
+        },
+        children: [
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: "relative shrink-0",
+              ref: z,
+              children: [
+                /* @__PURE__ */ d(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => p((e) => !e),
+                    className: C(
+                      "flex items-center gap-2 h-9 px-3 rounded cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      b ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
+                    ),
+                    "aria-expanded": b,
+                    "aria-haspopup": "true",
+                    "aria-label": "Start",
+                    children: [
+                      /* @__PURE__ */ n(be, { className: "h-5 w-5" }),
+                      /* @__PURE__ */ n("span", { className: "font-semibold text-sm hidden sm:inline", children: o || "Start" })
+                    ]
+                  }
+                ),
+                b && /* @__PURE__ */ d(
+                  "div",
+                  {
+                    className: "absolute bottom-full left-0 mb-1 w-64 max-h-[70vh] overflow-y-auto rounded-lg border border-border bg-popover shadow-lg py-2 z-[10001]",
+                    style: { zIndex: $.MODAL_CONTENT },
+                    children: [
+                      /* @__PURE__ */ n("div", { className: "px-2 pb-2 border-b border-border mb-2", children: /* @__PURE__ */ n("span", { className: "text-sm font-semibold text-popover-foreground", children: o || "Applications" }) }),
+                      /* @__PURE__ */ n("div", { className: "grid gap-0.5", children: Y.filter((e) => !e.hidden).map((e) => {
+                        const s = typeof e.label == "string" ? e.label : O(e.label, m), i = e.icon ?? (e.openIn === "external" ? F(e.url) : null);
+                        return /* @__PURE__ */ d(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => S(e),
+                            className: "flex items-center gap-3 w-full px-3 py-2 text-left text-sm cursor-pointer text-popover-foreground hover:bg-accent hover:text-accent-foreground rounded-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                            children: [
+                              i ? /* @__PURE__ */ n(
+                                "img",
+                                {
+                                  src: i,
+                                  alt: "",
+                                  className: C(
+                                    "h-5 w-5 shrink-0 rounded-sm object-cover",
+                                    X(i) && "opacity-90 dark:opacity-100 dark:invert"
+                                  )
+                                }
+                              ) : /* @__PURE__ */ n("span", { className: "h-5 w-5 shrink-0 rounded-sm bg-muted" }),
+                              /* @__PURE__ */ n("span", { className: "truncate", children: s })
+                            ]
+                          },
+                          e.path
+                        );
+                      }) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "flex-1 flex items-center gap-1 min-w-0 overflow-x-auto", children: l.map((e) => {
+            const s = c.find((r) => r.path === e.path), i = s ? O(s.label, m) : e.label, t = e.id === y;
+            return /* @__PURE__ */ d(
+              "button",
+              {
+                type: "button",
+                onClick: () => U(e.id),
+                onContextMenu: (r) => {
+                  r.preventDefault(), j(e.id);
+                },
+                className: C(
+                  "flex items-center gap-2 h-8 px-2 rounded min-w-0 max-w-[140px] shrink-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  t ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
+                ),
+                title: i,
+                children: [
+                  e.icon ? /* @__PURE__ */ n(
+                    "img",
+                    {
+                      src: e.icon,
+                      alt: "",
+                      className: C(
+                        "h-4 w-4 shrink-0 rounded-sm object-cover",
+                        X(e.icon) && "opacity-90 dark:opacity-100 dark:invert"
+                      )
+                    }
+                  ) : /* @__PURE__ */ n("span", { className: "h-4 w-4 shrink-0 rounded-sm bg-muted" }),
+                  /* @__PURE__ */ n("span", { className: "text-xs truncate", children: i })
+                ]
+              },
+              e.id
+            );
+          }) }),
+          H.length > 0 && /* @__PURE__ */ n("div", { className: "flex items-center gap-0.5 shrink-0 border-l border-sidebar-border pl-2 ml-1", children: H.map((e) => {
+            const s = typeof e.label == "string" ? e.label : O(e.label, m), i = e.icon ?? (e.openIn === "external" ? F(e.url) : null);
+            return /* @__PURE__ */ d(
+              "button",
+              {
+                type: "button",
+                onClick: () => S(e),
+                className: "flex items-center gap-2 h-8 px-2 rounded cursor-pointer text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                title: s,
+                children: [
+                  i ? /* @__PURE__ */ n(
+                    "img",
+                    {
+                      src: i,
+                      alt: "",
+                      className: C(
+                        "h-4 w-4 shrink-0 rounded-sm object-cover",
+                        X(i) && "opacity-90 dark:opacity-100 dark:invert"
+                      )
+                    }
+                  ) : /* @__PURE__ */ n("span", { className: "h-4 w-4 shrink-0 rounded-sm bg-muted" }),
+                  /* @__PURE__ */ n("span", { className: "text-xs truncate max-w-[100px]", children: s })
+                ]
+              },
+              e.path
+            );
+          }) }),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: "flex flex-col items-end justify-center shrink-0 px-3 py-1 text-sidebar-foreground border-l border-sidebar-border ml-1 min-w-0",
+              style: { paddingRight: "max(0.75rem, env(safe-area-inset-right))" },
+              role: "timer",
+              "aria-live": "off",
+              "aria-label": new Intl.DateTimeFormat(m, {
+                timeZone: R,
+                dateStyle: "full",
+                timeStyle: "medium"
+              }).format(v),
+              children: [
+                /* @__PURE__ */ n(
+                  "time",
+                  {
+                    dateTime: v.toISOString(),
+                    className: "text-xs leading-tight tabular-nums whitespace-nowrap",
+                    children: new Intl.DateTimeFormat(m, {
+                      timeZone: R,
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit"
+                    }).format(v)
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "time",
+                  {
+                    dateTime: v.toISOString(),
+                    className: "text-[10px] leading-tight whitespace-nowrap text-sidebar-foreground/90",
+                    children: new Intl.DateTimeFormat(m, {
+                      timeZone: R,
+                      weekday: "short",
+                      day: "numeric",
+                      month: "short"
+                    }).format(v)
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  ze as WindowsLayout
+};
+//# sourceMappingURL=WindowsLayout-CEqkRKyk.js.map