@moyarich/console-addon-resizable 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,377 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { GripVertical, GripHorizontal, MoveDiagonal2 } from "lucide-react";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { consoleExtensionPoints } from "@moyarich/console-core";
+const horizontal$3 = "Resize console horizontally";
+const horizontalTitle$3 = "Drag to resize horizontally";
+const vertical$3 = "Resize console vertically";
+const verticalTitle$3 = "Drag to resize vertically";
+const both$3 = "Resize console in both directions";
+const bothTitle$3 = "Drag to resize width and height";
+const en = {
+  horizontal: horizontal$3,
+  horizontalTitle: horizontalTitle$3,
+  vertical: vertical$3,
+  verticalTitle: verticalTitle$3,
+  both: both$3,
+  bothTitle: bothTitle$3
+};
+const horizontal$2 = "Redimensionar horizontalmente";
+const horizontalTitle$2 = "Arrastrar para cambiar el ancho";
+const vertical$2 = "Redimensionar verticalmente";
+const verticalTitle$2 = "Arrastrar para cambiar la altura";
+const both$2 = "Redimensionar en ambas direcciones";
+const bothTitle$2 = "Arrastrar para cambiar ancho y altura";
+const es = {
+  horizontal: horizontal$2,
+  horizontalTitle: horizontalTitle$2,
+  vertical: vertical$2,
+  verticalTitle: verticalTitle$2,
+  both: both$2,
+  bothTitle: bothTitle$2
+};
+const horizontal$1 = "Redimensionner horizontalement";
+const horizontalTitle$1 = "Glisser pour modifier la largeur";
+const vertical$1 = "Redimensionner verticalement";
+const verticalTitle$1 = "Glisser pour modifier la hauteur";
+const both$1 = "Redimensionner dans les deux sens";
+const bothTitle$1 = "Glisser pour modifier largeur et hauteur";
+const fr = {
+  horizontal: horizontal$1,
+  horizontalTitle: horizontalTitle$1,
+  vertical: vertical$1,
+  verticalTitle: verticalTitle$1,
+  both: both$1,
+  bothTitle: bothTitle$1
+};
+const horizontal = "Redimensionar o console horizontalmente";
+const horizontalTitle = "Arraste para redimensionar horizontalmente";
+const vertical = "Redimensionar o console verticalmente";
+const verticalTitle = "Arraste para redimensionar verticalmente";
+const both = "Redimensionar o console nas duas direções";
+const bothTitle = "Arraste para alterar a largura e a altura";
+const pt = {
+  horizontal,
+  horizontalTitle,
+  vertical,
+  verticalTitle,
+  both,
+  bothTitle
+};
+const locales = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...locales[tag] ?? locales[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
+function resolveConsoleResizeAxes(direction) {
+  return {
+    horizontal: direction === "horizontal" || direction === "both" || direction === "inline",
+    vertical: direction === "vertical" || direction === "both" || direction === "block"
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function getCornerCursor(horizontalEdge, verticalEdge) {
+  return horizontalEdge === verticalEdge ? "nwse-resize" : "nesw-resize";
+}
+function toCssSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function ResizableConsoleFrame({
+  mode,
+  options,
+  children
+}) {
+  const {
+    direction = "both",
+    defaultWidth = 720,
+    defaultHeight = 300,
+    minWidth = 320,
+    minHeight = 180,
+    maxWidth,
+    maxHeight,
+    horizontalEdge = "end",
+    verticalEdge = "end",
+    className = "",
+    style,
+    onResize,
+    locale = "en",
+    translations
+  } = options;
+  const labels = resolveAddonMessages(locale, translations);
+  const axes = resolveConsoleResizeAxes(direction);
+  const frameRef = useRef(null);
+  const dragRef = useRef(null);
+  const bodyStyleRef = useRef(
+    null
+  );
+  const [width, setWidth] = useState(defaultWidth);
+  const [height, setHeight] = useState(defaultHeight);
+  const [activeAxis, setActiveAxis] = useState(null);
+  const restoreBodyStyles = useCallback(() => {
+    if (typeof document === "undefined" || !bodyStyleRef.current) {
+      return;
+    }
+    document.body.style.cursor = bodyStyleRef.current.cursor;
+    document.body.style.userSelect = bodyStyleRef.current.userSelect;
+    bodyStyleRef.current = null;
+  }, []);
+  const stopResize = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (drag && event && drag.pointerId === event.pointerId && drag.target.hasPointerCapture(event.pointerId)) {
+        drag.target.releasePointerCapture(event.pointerId);
+      }
+      dragRef.current = null;
+      setActiveAxis(null);
+      restoreBodyStyles();
+    },
+    [restoreBodyStyles]
+  );
+  useEffect(
+    () => () => {
+      dragRef.current = null;
+      restoreBodyStyles();
+    },
+    [restoreBodyStyles]
+  );
+  useEffect(() => {
+    if (!dragRef.current) {
+      return;
+    }
+    dragRef.current = null;
+    setActiveAxis(null);
+    restoreBodyStyles();
+  }, [direction, restoreBodyStyles]);
+  const startResize = (event, axis) => {
+    event.preventDefault();
+    const frame = frameRef.current;
+    if (!frame) {
+      return;
+    }
+    const bounds = frame.getBoundingClientRect();
+    const parentBounds = frame.parentElement?.getBoundingClientRect();
+    const parentMaxWidth = parentBounds?.width ?? Number.POSITIVE_INFINITY;
+    const resolvedMaxWidth = Math.min(
+      maxWidth ?? parentMaxWidth,
+      parentMaxWidth
+    );
+    const resolvedMaxHeight = maxHeight ?? Number.POSITIVE_INFINITY;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      axis,
+      pointerId: event.pointerId,
+      target: event.currentTarget,
+      startX: event.clientX,
+      startY: event.clientY,
+      startWidth: bounds.width,
+      startHeight: bounds.height,
+      maxWidth: resolvedMaxWidth,
+      maxHeight: resolvedMaxHeight
+    };
+    setActiveAxis(axis);
+    if (typeof document !== "undefined") {
+      bodyStyleRef.current = {
+        cursor: document.body.style.cursor,
+        userSelect: document.body.style.userSelect
+      };
+      document.body.style.cursor = axis === "both" ? getCornerCursor(horizontalEdge, verticalEdge) : axis === "horizontal" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    }
+  };
+  const moveResize = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) {
+      return;
+    }
+    let nextWidth = drag.startWidth;
+    let nextHeight = drag.startHeight;
+    if (drag.axis === "horizontal" || drag.axis === "both") {
+      const directionMultiplier = horizontalEdge === "end" ? 1 : -1;
+      nextWidth = clamp(
+        drag.startWidth + (event.clientX - drag.startX) * directionMultiplier,
+        minWidth,
+        drag.maxWidth
+      );
+      setWidth(nextWidth);
+    }
+    if (drag.axis === "vertical" || drag.axis === "both") {
+      const directionMultiplier = verticalEdge === "end" ? 1 : -1;
+      nextHeight = clamp(
+        drag.startHeight + (event.clientY - drag.startY) * directionMultiplier,
+        minHeight,
+        drag.maxHeight
+      );
+      setHeight(nextHeight);
+    }
+    onResize?.({
+      width: nextWidth,
+      height: nextHeight
+    });
+  };
+  const resizeWithKeyboard = (event, axis) => {
+    const horizontal2 = axis !== "vertical" && (event.key === "ArrowLeft" || event.key === "ArrowRight");
+    const vertical2 = axis !== "horizontal" && (event.key === "ArrowUp" || event.key === "ArrowDown");
+    const frame = frameRef.current;
+    if (!frame || !horizontal2 && !vertical2) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const bounds = frame.getBoundingClientRect();
+    const parentWidth = frame.parentElement?.getBoundingClientRect().width ?? Infinity;
+    const step = event.shiftKey ? 50 : 10;
+    let nextWidth = bounds.width;
+    let nextHeight = bounds.height;
+    if (horizontal2) {
+      const sign = (event.key === "ArrowRight" ? 1 : -1) * (horizontalEdge === "end" ? 1 : -1);
+      nextWidth = clamp(
+        bounds.width + sign * step,
+        minWidth,
+        Math.min(maxWidth ?? parentWidth, parentWidth)
+      );
+      setWidth(nextWidth);
+    }
+    if (vertical2) {
+      const sign = (event.key === "ArrowDown" ? 1 : -1) * (verticalEdge === "end" ? 1 : -1);
+      nextHeight = clamp(
+        bounds.height + sign * step,
+        minHeight,
+        maxHeight ?? Infinity
+      );
+      setHeight(nextHeight);
+    }
+    onResize?.({ width: nextWidth, height: nextHeight });
+  };
+  const renderHorizontalHandle = () => {
+    if (!axes.horizontal) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "console-resize-handle",
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-valuemin": minWidth,
+        "aria-valuemax": maxWidth,
+        "aria-valuenow": typeof width === "number" ? width : void 0,
+        "aria-label": labels.horizontal,
+        title: labels.horizontalTitle,
+        tabIndex: 0,
+        "data-console-resize-axis": "horizontal",
+        onKeyDown: (event) => resizeWithKeyboard(event, "horizontal"),
+        "data-active": activeAxis === "horizontal" || void 0,
+        onPointerDown: (event) => startResize(event, "horizontal"),
+        onPointerMove: moveResize,
+        onPointerUp: stopResize,
+        onPointerCancel: stopResize,
+        children: /* @__PURE__ */ jsx("span", { className: "console-resize-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GripVertical, { size: 14 }) })
+      }
+    );
+  };
+  const renderVerticalHandle = () => {
+    if (!axes.vertical) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "console-resize-handle",
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-valuemin": minHeight,
+        "aria-valuemax": maxHeight,
+        "aria-valuenow": typeof height === "number" ? height : void 0,
+        "aria-label": labels.vertical,
+        title: labels.verticalTitle,
+        tabIndex: 0,
+        "data-console-resize-axis": "vertical",
+        onKeyDown: (event) => resizeWithKeyboard(event, "vertical"),
+        "data-active": activeAxis === "vertical" || void 0,
+        onPointerDown: (event) => startResize(event, "vertical"),
+        onPointerMove: moveResize,
+        onPointerUp: stopResize,
+        onPointerCancel: stopResize,
+        children: /* @__PURE__ */ jsx("span", { className: "console-resize-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GripHorizontal, { size: 14 }) })
+      }
+    );
+  };
+  const renderCornerHandle = () => {
+    if (direction !== "both") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "console-resize-corner-handle",
+        role: "separator",
+        "aria-label": labels.both,
+        title: labels.bothTitle,
+        tabIndex: 0,
+        "data-console-resize-axis": "both",
+        onKeyDown: (event) => resizeWithKeyboard(event, "both"),
+        "data-active": activeAxis === "both" || void 0,
+        onPointerDown: (event) => startResize(event, "both"),
+        onPointerMove: moveResize,
+        onPointerUp: stopResize,
+        onPointerCancel: stopResize,
+        children: /* @__PURE__ */ jsx(MoveDiagonal2, { size: 15, "aria-hidden": "true" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: frameRef,
+      className: `console-resizable-frame ${className}`.trim(),
+      "data-console-resize-direction": direction,
+      "data-console-resize-horizontal-edge": horizontalEdge,
+      "data-console-resize-vertical-edge": verticalEdge,
+      "data-console-mode": mode,
+      style: {
+        "--_console-resizable-width": toCssSize(width),
+        "--_console-resizable-height": toCssSize(height),
+        "--_console-resizable-min-width": `${minWidth}px`,
+        "--_console-resizable-min-height": `${minHeight}px`,
+        "--_console-resizable-max-width": maxWidth === void 0 ? "100%" : `${maxWidth}px`,
+        "--_console-resizable-max-height": maxHeight === void 0 ? "100%" : `${maxHeight}px`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "console-resizable-frame-content", children }),
+        renderHorizontalHandle(),
+        renderVerticalHandle(),
+        renderCornerHandle()
+      ]
+    }
+  );
+}
+const RESIZABLE_CONSOLE_ADDON_ID = "@moyarich/console-addon-resizable";
+function createResizableConsoleAddon(options = {}) {
+  const decorator = {
+    render(context) {
+      return /* @__PURE__ */ jsx(ResizableConsoleFrame, { mode: context.mode, options, children: context.renderDefault() });
+    }
+  };
+  return {
+    id: RESIZABLE_CONSOLE_ADDON_ID,
+    activate(host) {
+      host.extensions.register(
+        consoleExtensionPoints.frameDecorator,
+        decorator,
+        {
+          id: `${RESIZABLE_CONSOLE_ADDON_ID}:frame`
+        }
+      );
+    }
+  };
+}
+export {
+  RESIZABLE_CONSOLE_ADDON_ID,
+  createResizableConsoleAddon,
+  resolveConsoleResizeAxes
+};

package/dist/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Resize console horizontally",
+  "horizontalTitle": "Drag to resize horizontally",
+  "vertical": "Resize console vertically",
+  "verticalTitle": "Drag to resize vertically",
+  "both": "Resize console in both directions",
+  "bothTitle": "Drag to resize width and height"
+}

package/dist/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionar horizontalmente",
+  "horizontalTitle": "Arrastrar para cambiar el ancho",
+  "vertical": "Redimensionar verticalmente",
+  "verticalTitle": "Arrastrar para cambiar la altura",
+  "both": "Redimensionar en ambas direcciones",
+  "bothTitle": "Arrastrar para cambiar ancho y altura"
+}

package/dist/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionner horizontalement",
+  "horizontalTitle": "Glisser pour modifier la largeur",
+  "vertical": "Redimensionner verticalement",
+  "verticalTitle": "Glisser pour modifier la hauteur",
+  "both": "Redimensionner dans les deux sens",
+  "bothTitle": "Glisser pour modifier largeur et hauteur"
+}

package/dist/locales/pt.json

@@ -0,0 +1,8 @@
+{
+  "horizontal": "Redimensionar o console horizontalmente",
+  "horizontalTitle": "Arraste para redimensionar horizontalmente",
+  "vertical": "Redimensionar o console verticalmente",
+  "verticalTitle": "Arraste para redimensionar verticalmente",
+  "both": "Redimensionar o console nas duas direções",
+  "bothTitle": "Arraste para alterar a largura e a altura"
+}

package/dist/localization.d.cts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;

package/dist/localization.d.ts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;