@glennjong/pixel-window 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+declare function getFrame({ size, stroke, frame, background }: {
+    size: number;
+    stroke: string;
+    frame: string;
+    background: string;
+}): string;
+declare const frame: string;
+declare const checkbox: string;
+declare const checkboxLight: string;
+
+export { checkbox, checkboxLight, frame, getFrame };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+declare function getFrame({ size, stroke, frame, background }: {
+    size: number;
+    stroke: string;
+    frame: string;
+    background: string;
+}): string;
+declare const frame: string;
+declare const checkbox: string;
+declare const checkboxLight: string;
+
+export { checkbox, checkboxLight, frame, getFrame };

package/dist/index.js

@@ -0,0 +1,246 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FreePixelWindow: () => FreePixelWindow,
+  PixelWindow: () => PixelWindow,
+  checkbox: () => checkbox,
+  checkboxLight: () => checkboxLight,
+  frame: () => frame,
+  getFrame: () => getFrame
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/frame.ts
+function getFrame({ size, stroke, frame: frame2, background }) {
+  const height = size;
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{height}}" viewBox="0 0 12 12"><path fill="{{stroke}}" d="M2 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zM1 1h1v1H1z"/><path fill="{{frame}}" d="M2 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{stroke}}" d="M10 1h1v1h-1zM0 2h1v1H0z"/><path fill="{{frame}}" d="M1 2h1v1H1zm1 0h1v1H2z"/><path fill="{{stroke}}" d="M3 2h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{frame}}" d="M9 2h1v1H9zm1 0h1v1h-1z"/><path fill="{{stroke}}" d="M11 2h1v1h-1zM0 3h1v1H0z"/><path fill="{{frame}}" d="M1 3h1v1H1z"/><path fill="{{stroke}}" d="M2 3h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{frame}}" d="M10 3h1v1h-1z"/><path fill="{{stroke}}" d="M11 3h1v1h-1zM0 4h1v1H0z"/><path fill="{{frame}}" d="M1 4h1v1H1z"/><path fill="{{stroke}}" d="M2 4h1v1H2zm1 0h1v1H3z"/><path fill="{{background}}" d="M4 4h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z"/><path fill="{{stroke}}" d="M8 4h1v1H8zm1 0h1v1H9z"/><path fill="{{frame}}" d="M10 4h1v1h-1z"/><path fill="{{stroke}}" d="M11 4h1v1h-1zM0 5h1v1H0z"/><path fill="{{frame}}" d="M1 5h1v1H1z"/><path fill="{{stroke}}" d="M2 5h1v1H2z"/><path fill="{{background}}" d="M3 5h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 5h1v1H9z"/><path fill="{{frame}}" d="M10 5h1v1h-1z"/><path fill="{{stroke}}" d="M11 5h1v1h-1zM0 6h1v1H0z"/><path fill="{{frame}}" d="M1 6h1v1H1z"/><path fill="{{stroke}}" d="M2 6h1v1H2z"/><path fill="{{background}}" d="M3 6h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 6h1v1H9z"/><path fill="{{frame}}" d="M10 6h1v1h-1z"/><path fill="{{stroke}}" d="M11 6h1v1h-1zM0 7h1v1H0z"/><path fill="{{frame}}" d="M1 7h1v1H1z"/><path fill="{{stroke}}" d="M2 7h1v1H2z"/><path fill="{{background}}" d="M3 7h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 7h1v1H9z"/><path fill="{{frame}}" d="M10 7h1v1h-1z"/><path fill="{{stroke}}" d="M11 7h1v1h-1zM0 8h1v1H0z"/><path fill="{{frame}}" d="M1 8h1v1H1zm1 0h1v1H2z"/><path fill="{{stroke}}" d="M3 8h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{frame}}" d="M9 8h1v1H9zm1 0h1v1h-1z"/><path fill="{{stroke}}" d="M11 8h1v1h-1zM0 9h1v1H0zm1 0h1v1H1z"/><path fill="{{frame}}" d="M2 9h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{stroke}}" d="M10 9h1v1h-1zm-9 1h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm-8 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/></svg>'.replace(/\{\{size\}\}/g, size.toString()).replace(/\{\{height\}\}/g, height.toString()).replace(/\{\{stroke\}\}/g, stroke).replace(/\{\{frame\}\}/g, frame2).replace(/\{\{background\}\}/g, background);
+  const encodedSvg = encodeURIComponent(svg).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)));
+  return `data:image/svg+xml;base64,${btoa(encodedSvg)}`;
+}
+function getCheckbox({ size, color }) {
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}" viewBox="0 0 12 6"><rect width="1" height="1" x="1" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="4" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="7" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="8" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="9" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="10" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="1" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="4" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="7" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="8" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="9" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="10" y="5" fill="{{color}}"></rect></svg>'.replace(/\{\{width\}\}/g, (size * 2).toString()).replace(/\{\{height\}\}/g, size.toString()).replace(/\{\{color\}\}/g, color);
+  const encodedSvg = encodeURIComponent(svg).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))).replace(/#/g, "%23");
+  return `data:image/svg+xml;base64,${btoa(encodedSvg)}`;
+}
+var frame = getFrame({
+  size: 160,
+  stroke: "#000",
+  frame: "#333",
+  background: "#DDD"
+});
+var checkbox = getCheckbox({
+  size: 12,
+  color: "#000"
+});
+var checkboxLight = getCheckbox({
+  size: 12,
+  color: "#000"
+});
+
+// src/index.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PixelWindow = ({
+  style = {},
+  stroke = "#000",
+  frame: frame2 = "#333",
+  background = "#DDD",
+  pixel = 160,
+  children
+}) => {
+  const pixelFrame = getFrame({
+    size: pixel,
+    stroke,
+    frame: frame2,
+    background
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "window",
+      style: {
+        width: "100%",
+        height: "100%",
+        borderImage: `url(${pixelFrame})`,
+        borderImageSlice: "49% 49% fill",
+        borderImageWidth: `${pixel}px`
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: `${pixel}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: { boxSizing: "border-box", ...style },
+          children
+        }
+      ) })
+    }
+  );
+};
+var FreePixelWindow = ({
+  name,
+  children,
+  pixel = 16,
+  stroke = "#000",
+  frame: frame2 = "#333",
+  background = "#DDD",
+  position: initialPosition = { x: 100, y: 100 },
+  style,
+  minWidth = 120,
+  minHeight = 100
+}) => {
+  const [position, setPosition] = (0, import_react.useState)(() => {
+    if (name) {
+      const savedPosition = localStorage.getItem(`${name}-position`);
+      return savedPosition ? JSON.parse(savedPosition) : initialPosition;
+    }
+    return initialPosition;
+  });
+  const [size, setSize] = (0, import_react.useState)(() => {
+    const savedSize = localStorage.getItem(`${name}-size`);
+    return savedSize ? JSON.parse(savedSize) : { width: 300, height: 200 };
+  });
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react.useState)(false);
+  const [dragStart, setDragStart] = (0, import_react.useState)({ x: 0, y: 0 });
+  const [resizeStart, setResizeStart] = (0, import_react.useState)({ width: 0, height: 0, mouseX: 0, mouseY: 0 });
+  (0, import_react.useEffect)(() => {
+    if (name) {
+      localStorage.setItem(`${name}-position`, JSON.stringify(position));
+      localStorage.setItem(`${name}-size`, JSON.stringify(size));
+    }
+  }, [name, position, size]);
+  const handleMouseMove = (0, import_react.useCallback)((e) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    } else if (isResizing) {
+      const deltaX = e.clientX - resizeStart.mouseX;
+      const deltaY = e.clientY - resizeStart.mouseY;
+      setSize({
+        width: Math.max(resizeStart.width + deltaX, minWidth),
+        height: Math.max(resizeStart.height + deltaY, minHeight)
+      });
+    }
+  }, [isDragging, isResizing, dragStart, resizeStart, minWidth, minHeight]);
+  const handleMouseUp = (0, import_react.useCallback)(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isDragging || isResizing) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+  };
+  const handleResizeStart = (e) => {
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeStart({
+      width: size.width,
+      height: size.height,
+      mouseX: e.clientX,
+      mouseY: e.clientY
+    });
+  };
+  const pixelFrame = getFrame({
+    size: pixel,
+    stroke,
+    frame: frame2,
+    background
+  });
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          overflow: "hidden",
+          resize: "none",
+          top: position.y,
+          left: position.x,
+          width: size.width,
+          height: size.height,
+          borderImage: `url(${pixelFrame})`,
+          borderImageSlice: "49% 49% fill",
+          borderImageWidth: `${pixel}px`
+        },
+        onMouseUp: handleMouseUp,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+              style: {
+                height: `${pixel}px`,
+                cursor: "grab",
+                userSelect: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            padding: `${pixel}px`,
+            paddingTop: 0,
+            ...style
+          }, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              onMouseDown: handleResizeStart,
+              style: {
+                position: "absolute",
+                width: `${pixel}px`,
+                height: `${pixel}px`,
+                cursor: "se-resize",
+                bottom: 0,
+                right: 0
+              }
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FreePixelWindow,
+  PixelWindow,
+  checkbox,
+  checkboxLight,
+  frame,
+  getFrame
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/frame.ts","../src/index.tsx"],"sourcesContent":["export * from './index';\nexport * from './frame';\n","export function getFrame({ size, stroke, frame, background }: { size: number; stroke: string; frame: string; background: string }): string {\n\tconst height = size; // Assuming square frames\n\tconst svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"{{size}}\" height=\"{{height}}\" viewBox=\"0 0 12 12\"><path fill=\"{{stroke}}\" d=\"M2 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zM1 1h1v1H1z\"/><path fill=\"{{frame}}\" d=\"M2 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{stroke}}\" d=\"M10 1h1v1h-1zM0 2h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 2h1v1H1zm1 0h1v1H2z\"/><path fill=\"{{stroke}}\" d=\"M3 2h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{frame}}\" d=\"M9 2h1v1H9zm1 0h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 2h1v1h-1zM0 3h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 3h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 3h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 3h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 3h1v1h-1zM0 4h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 4h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 4h1v1H2zm1 0h1v1H3z\"/><path fill=\"{{background}}\" d=\"M4 4h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z\"/><path fill=\"{{stroke}}\" d=\"M8 4h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 4h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 4h1v1h-1zM0 5h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 5h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 5h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 5h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 5h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 5h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 5h1v1h-1zM0 6h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 6h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 6h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 6h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 6h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 6h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 6h1v1h-1zM0 7h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 7h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 7h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 7h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 7h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 7h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 7h1v1h-1zM0 8h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 8h1v1H1zm1 0h1v1H2z\"/><path fill=\"{{stroke}}\" d=\"M3 8h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{frame}}\" d=\"M9 8h1v1H9zm1 0h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 8h1v1h-1zM0 9h1v1H0zm1 0h1v1H1z\"/><path fill=\"{{frame}}\" d=\"M2 9h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{stroke}}\" d=\"M10 9h1v1h-1zm-9 1h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm-8 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/></svg>'\n\t\t.replace(/\\{\\{size\\}\\}/g, size.toString())\n\t\t.replace(/\\{\\{height\\}\\}/g, height.toString())\n\t\t.replace(/\\{\\{stroke\\}\\}/g, stroke)\n\t\t.replace(/\\{\\{frame\\}\\}/g, frame)\n\t\t.replace(/\\{\\{background\\}\\}/g, background);\n\n\t// Encode SVG to Base64 safely\n\tconst encodedSvg = encodeURIComponent(svg)\n\t\t.replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)));\n\n\treturn `data:image/svg+xml;base64,${btoa(encodedSvg)}`;\n}\n\nfunction getCheckbox({ size, color }: { size: number; color: string }) {\n\tconst svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"{{width}}\" height=\"{{height}}\" viewBox=\"0 0 12 6\"><rect width=\"1\" height=\"1\" x=\"1\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"4\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"7\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"8\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"9\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"10\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"1\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"4\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"7\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"8\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"9\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"10\" y=\"5\" fill=\"{{color}}\"></rect></svg>'\n\t\t.replace(/\\{\\{width\\}\\}/g, (size*2).toString())\n\t\t.replace(/\\{\\{height\\}\\}/g, size.toString())\n\t\t.replace(/\\{\\{color\\}\\}/g, color)\n    \n\tconst encodedSvg = encodeURIComponent(svg)\n\t\t.replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)))\n\t\t.replace(/#/g, '%23');\n\n\treturn `data:image/svg+xml;base64,${btoa(encodedSvg)}`;\n\n}\n\nexport const frame = getFrame({\n\tsize: 160,\n\tstroke: '#000',\n\tframe: '#333',\n\tbackground: '#DDD',\n});\n\nexport const checkbox = getCheckbox({\n\tsize: 12,\n\tcolor: '#000',\n});\nexport const checkboxLight = getCheckbox({\n\tsize: 12,\n\tcolor: '#000',\n});\n","import { getFrame } from './frame';\nimport { useCallback, useEffect, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport const PixelWindow = ({\n\tstyle = {},\n\tstroke = '#000',\n\tframe = '#333',\n\tbackground = '#DDD',\n\tpixel = 160,\n\tchildren,\n}: {\n\tstyle?: React.CSSProperties,\n\tpixel?: number,\n\tstroke?: string\n\tframe?: string\n\tbackground?: string\n\tchildren: ReactNode;\n}) => {\n\n\tconst pixelFrame = getFrame({\n\t\tsize: pixel,\n\t\tstroke,\n\t\tframe,\n\t\tbackground,\n\t});\n\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"window\"\n\t\t\tstyle={{\n\t\t\t\twidth: '100%',\n\t\t\t\theight: '100%',\n\t\t\t\tborderImage: `url(${pixelFrame})`,\n\t\t\t\tborderImageSlice: '49% 49% fill',\n\t\t\t\tborderImageWidth: `${pixel}px`,\n\t\t\t}}\n\t\t>\n\t\t\t<div style={{ padding: `${pixel}px`}}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ boxSizing: 'border-box', ...style }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const FreePixelWindow = ({\n\tname,\n\tchildren,\n\tpixel = 16,\n\tstroke = '#000',\n\tframe = '#333',\n\tbackground = '#DDD',\n\tposition: initialPosition = { x: 100, y: 100 },\n\tstyle,\n\tminWidth = 120,\n\tminHeight = 100,\n}: {\n\tname?: string;\n\tchildren: ReactNode;\n\tpixel?: number;\n\tstroke?: string;\n\tframe?: string;\n\tbackground?: string;\n\tposition?: { x: number; y: number };\n\tstyle?: React.CSSProperties;\n\tminWidth?: number;\n\tminHeight?: number;\n}) => {\n\n\tconst [position, setPosition] = useState(() => {\n\t\tif (name) {\n\t\t\tconst savedPosition = localStorage.getItem(`${name}-position`);\n\t\t\treturn savedPosition ? JSON.parse(savedPosition) : initialPosition;\n\t\t}\n\t\treturn initialPosition;\n\t});\n\n\tconst [size, setSize] = useState(() => {\n\t\tconst savedSize = localStorage.getItem(`${name}-size`);\n\t\treturn savedSize ? JSON.parse(savedSize) : { width: 300, height: 200 };\n\t});\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [isResizing, setIsResizing] = useState(false);\n\tconst [dragStart, setDragStart] = useState({ x: 0, y: 0 });\n\tconst [resizeStart, setResizeStart] = useState({ width: 0, height: 0, mouseX: 0, mouseY: 0 });\n\n\tuseEffect(() => {\n\t\tif (name) {\n\t\t\tlocalStorage.setItem(`${name}-position`, JSON.stringify(position));\n\t\t\tlocalStorage.setItem(`${name}-size`, JSON.stringify(size));\n\n\t\t}\n\t}, [name, position, size]);\n\n\tconst handleMouseMove = useCallback((e: MouseEvent) => {\n\t\tif (isDragging) {\n\t\t\tsetPosition({\n\t\t\t\tx: e.clientX - dragStart.x,\n\t\t\t\ty: e.clientY - dragStart.y,\n\t\t\t});\n\t\t} else if (isResizing) {\n\t\t\tconst deltaX = e.clientX - resizeStart.mouseX;\n\t\t\tconst deltaY = e.clientY - resizeStart.mouseY;\n\n\t\t\tsetSize({\n\t\t\t\twidth: Math.max(resizeStart.width + deltaX, minWidth),\n\t\t\t\theight: Math.max(resizeStart.height + deltaY, minHeight),\n\t\t\t});\n\t\t}\n\t}, [isDragging, isResizing, dragStart, resizeStart, minWidth, minHeight]);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tsetIsDragging(false);\n\t\tsetIsResizing(false);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (isDragging || isResizing) {\n\t\t\twindow.addEventListener('mousemove', handleMouseMove);\n\t\t\twindow.addEventListener('mouseup', handleMouseUp);\n\t\t} else {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('mouseup', handleMouseUp);\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('mouseup', handleMouseUp);\n\t\t};\n\t}, [isDragging, isResizing, handleMouseMove, handleMouseUp]);\n\n\tconst handleMouseDown = (e: React.MouseEvent) => {\n\t\tsetIsDragging(true);\n\t\tsetDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });\n\t};\n\n\tconst handleResizeStart = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tsetIsResizing(true);\n\t\tsetResizeStart({\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t});\n\t};\n\n\tconst pixelFrame = getFrame({\n\t\tsize: pixel,\n\t\tstroke,\n\t\tframe,\n\t\tbackground,\n\t});\n\n\treturn createPortal(\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tresize: 'none',\n\t\t\t\ttop: position.y,\n\t\t\t\tleft: position.x,\n\t\t\t\twidth: size.width,\n\t\t\t\theight: size.height,\n\t\t\t\tborderImage: `url(${pixelFrame})`,\n\t\t\t\tborderImageSlice: '49% 49% fill',\n\t\t\t\tborderImageWidth: `${pixel}px`,\n\t\t\t}}\n\t\t\tonMouseUp={handleMouseUp}\n\t\t>\n\t\t\t<div \n\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\tstyle={{\n\t\t\t\t\theight: `${pixel}px`,\n\t\t\t\t\tcursor: \"grab\",\n\t\t\t\t\tuserSelect: \"none\"\n\t\t\t\t}}\n\t\t\t></div>\n\t\t\t<div style={{\n\t\t\t\tpadding: `${pixel}px`,\n\t\t\t\tpaddingTop: 0,\n\t\t\t\t...style\n\t\t\t}}>{children}</div>\n\t\t\t<div\n\t\t\t\tonMouseDown={handleResizeStart}\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\twidth: `${pixel}px`,\n\t\t\t\t\theight: `${pixel}px`,\n\t\t\t\t\tcursor: 'se-resize',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t}}\n\t\t\t></div>\n\t\t</div>,\n\t\tdocument.body\n\t);\n};\n"],"mappings":"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","names":["frame","frame"]}

package/dist/index.mjs

@@ -0,0 +1,215 @@
+// src/frame.ts
+function getFrame({ size, stroke, frame: frame2, background }) {
+  const height = size;
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{height}}" viewBox="0 0 12 12"><path fill="{{stroke}}" d="M2 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zM1 1h1v1H1z"/><path fill="{{frame}}" d="M2 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{stroke}}" d="M10 1h1v1h-1zM0 2h1v1H0z"/><path fill="{{frame}}" d="M1 2h1v1H1zm1 0h1v1H2z"/><path fill="{{stroke}}" d="M3 2h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{frame}}" d="M9 2h1v1H9zm1 0h1v1h-1z"/><path fill="{{stroke}}" d="M11 2h1v1h-1zM0 3h1v1H0z"/><path fill="{{frame}}" d="M1 3h1v1H1z"/><path fill="{{stroke}}" d="M2 3h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{frame}}" d="M10 3h1v1h-1z"/><path fill="{{stroke}}" d="M11 3h1v1h-1zM0 4h1v1H0z"/><path fill="{{frame}}" d="M1 4h1v1H1z"/><path fill="{{stroke}}" d="M2 4h1v1H2zm1 0h1v1H3z"/><path fill="{{background}}" d="M4 4h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z"/><path fill="{{stroke}}" d="M8 4h1v1H8zm1 0h1v1H9z"/><path fill="{{frame}}" d="M10 4h1v1h-1z"/><path fill="{{stroke}}" d="M11 4h1v1h-1zM0 5h1v1H0z"/><path fill="{{frame}}" d="M1 5h1v1H1z"/><path fill="{{stroke}}" d="M2 5h1v1H2z"/><path fill="{{background}}" d="M3 5h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 5h1v1H9z"/><path fill="{{frame}}" d="M10 5h1v1h-1z"/><path fill="{{stroke}}" d="M11 5h1v1h-1zM0 6h1v1H0z"/><path fill="{{frame}}" d="M1 6h1v1H1z"/><path fill="{{stroke}}" d="M2 6h1v1H2z"/><path fill="{{background}}" d="M3 6h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 6h1v1H9z"/><path fill="{{frame}}" d="M10 6h1v1h-1z"/><path fill="{{stroke}}" d="M11 6h1v1h-1zM0 7h1v1H0z"/><path fill="{{frame}}" d="M1 7h1v1H1z"/><path fill="{{stroke}}" d="M2 7h1v1H2z"/><path fill="{{background}}" d="M3 7h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{stroke}}" d="M9 7h1v1H9z"/><path fill="{{frame}}" d="M10 7h1v1h-1z"/><path fill="{{stroke}}" d="M11 7h1v1h-1zM0 8h1v1H0z"/><path fill="{{frame}}" d="M1 8h1v1H1zm1 0h1v1H2z"/><path fill="{{stroke}}" d="M3 8h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z"/><path fill="{{frame}}" d="M9 8h1v1H9zm1 0h1v1h-1z"/><path fill="{{stroke}}" d="M11 8h1v1h-1zM0 9h1v1H0zm1 0h1v1H1z"/><path fill="{{frame}}" d="M2 9h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/><path fill="{{stroke}}" d="M10 9h1v1h-1zm-9 1h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm-8 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z"/></svg>'.replace(/\{\{size\}\}/g, size.toString()).replace(/\{\{height\}\}/g, height.toString()).replace(/\{\{stroke\}\}/g, stroke).replace(/\{\{frame\}\}/g, frame2).replace(/\{\{background\}\}/g, background);
+  const encodedSvg = encodeURIComponent(svg).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)));
+  return `data:image/svg+xml;base64,${btoa(encodedSvg)}`;
+}
+function getCheckbox({ size, color }) {
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}" viewBox="0 0 12 6"><rect width="1" height="1" x="1" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="4" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="7" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="8" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="9" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="10" y="0" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="1" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="2" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="3" fill="{{color}}"></rect><rect width="1" height="1" x="0" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="5" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="6" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="11" y="4" fill="{{color}}"></rect><rect width="1" height="1" x="1" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="2" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="3" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="4" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="7" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="8" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="9" y="5" fill="{{color}}"></rect><rect width="1" height="1" x="10" y="5" fill="{{color}}"></rect></svg>'.replace(/\{\{width\}\}/g, (size * 2).toString()).replace(/\{\{height\}\}/g, size.toString()).replace(/\{\{color\}\}/g, color);
+  const encodedSvg = encodeURIComponent(svg).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))).replace(/#/g, "%23");
+  return `data:image/svg+xml;base64,${btoa(encodedSvg)}`;
+}
+var frame = getFrame({
+  size: 160,
+  stroke: "#000",
+  frame: "#333",
+  background: "#DDD"
+});
+var checkbox = getCheckbox({
+  size: 12,
+  color: "#000"
+});
+var checkboxLight = getCheckbox({
+  size: 12,
+  color: "#000"
+});
+
+// src/index.tsx
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PixelWindow = ({
+  style = {},
+  stroke = "#000",
+  frame: frame2 = "#333",
+  background = "#DDD",
+  pixel = 160,
+  children
+}) => {
+  const pixelFrame = getFrame({
+    size: pixel,
+    stroke,
+    frame: frame2,
+    background
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "window",
+      style: {
+        width: "100%",
+        height: "100%",
+        borderImage: `url(${pixelFrame})`,
+        borderImageSlice: "49% 49% fill",
+        borderImageWidth: `${pixel}px`
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { padding: `${pixel}px` }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { boxSizing: "border-box", ...style },
+          children
+        }
+      ) })
+    }
+  );
+};
+var FreePixelWindow = ({
+  name,
+  children,
+  pixel = 16,
+  stroke = "#000",
+  frame: frame2 = "#333",
+  background = "#DDD",
+  position: initialPosition = { x: 100, y: 100 },
+  style,
+  minWidth = 120,
+  minHeight = 100
+}) => {
+  const [position, setPosition] = useState(() => {
+    if (name) {
+      const savedPosition = localStorage.getItem(`${name}-position`);
+      return savedPosition ? JSON.parse(savedPosition) : initialPosition;
+    }
+    return initialPosition;
+  });
+  const [size, setSize] = useState(() => {
+    const savedSize = localStorage.getItem(`${name}-size`);
+    return savedSize ? JSON.parse(savedSize) : { width: 300, height: 200 };
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [resizeStart, setResizeStart] = useState({ width: 0, height: 0, mouseX: 0, mouseY: 0 });
+  useEffect(() => {
+    if (name) {
+      localStorage.setItem(`${name}-position`, JSON.stringify(position));
+      localStorage.setItem(`${name}-size`, JSON.stringify(size));
+    }
+  }, [name, position, size]);
+  const handleMouseMove = useCallback((e) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    } else if (isResizing) {
+      const deltaX = e.clientX - resizeStart.mouseX;
+      const deltaY = e.clientY - resizeStart.mouseY;
+      setSize({
+        width: Math.max(resizeStart.width + deltaX, minWidth),
+        height: Math.max(resizeStart.height + deltaY, minHeight)
+      });
+    }
+  }, [isDragging, isResizing, dragStart, resizeStart, minWidth, minHeight]);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+  }, []);
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+  };
+  const handleResizeStart = (e) => {
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeStart({
+      width: size.width,
+      height: size.height,
+      mouseX: e.clientX,
+      mouseY: e.clientY
+    });
+  };
+  const pixelFrame = getFrame({
+    size: pixel,
+    stroke,
+    frame: frame2,
+    background
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          overflow: "hidden",
+          resize: "none",
+          top: position.y,
+          left: position.x,
+          width: size.width,
+          height: size.height,
+          borderImage: `url(${pixelFrame})`,
+          borderImageSlice: "49% 49% fill",
+          borderImageWidth: `${pixel}px`
+        },
+        onMouseUp: handleMouseUp,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+              style: {
+                height: `${pixel}px`,
+                cursor: "grab",
+                userSelect: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: {
+            padding: `${pixel}px`,
+            paddingTop: 0,
+            ...style
+          }, children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onMouseDown: handleResizeStart,
+              style: {
+                position: "absolute",
+                width: `${pixel}px`,
+                height: `${pixel}px`,
+                cursor: "se-resize",
+                bottom: 0,
+                right: 0
+              }
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+export {
+  FreePixelWindow,
+  PixelWindow,
+  checkbox,
+  checkboxLight,
+  frame,
+  getFrame
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/frame.ts","../src/index.tsx"],"sourcesContent":["export function getFrame({ size, stroke, frame, background }: { size: number; stroke: string; frame: string; background: string }): string {\n\tconst height = size; // Assuming square frames\n\tconst svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"{{size}}\" height=\"{{height}}\" viewBox=\"0 0 12 12\"><path fill=\"{{stroke}}\" d=\"M2 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zM1 1h1v1H1z\"/><path fill=\"{{frame}}\" d=\"M2 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{stroke}}\" d=\"M10 1h1v1h-1zM0 2h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 2h1v1H1zm1 0h1v1H2z\"/><path fill=\"{{stroke}}\" d=\"M3 2h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{frame}}\" d=\"M9 2h1v1H9zm1 0h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 2h1v1h-1zM0 3h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 3h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 3h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 3h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 3h1v1h-1zM0 4h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 4h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 4h1v1H2zm1 0h1v1H3z\"/><path fill=\"{{background}}\" d=\"M4 4h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7z\"/><path fill=\"{{stroke}}\" d=\"M8 4h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 4h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 4h1v1h-1zM0 5h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 5h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 5h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 5h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 5h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 5h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 5h1v1h-1zM0 6h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 6h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 6h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 6h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 6h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 6h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 6h1v1h-1zM0 7h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 7h1v1H1z\"/><path fill=\"{{stroke}}\" d=\"M2 7h1v1H2z\"/><path fill=\"{{background}}\" d=\"M3 7h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{stroke}}\" d=\"M9 7h1v1H9z\"/><path fill=\"{{frame}}\" d=\"M10 7h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 7h1v1h-1zM0 8h1v1H0z\"/><path fill=\"{{frame}}\" d=\"M1 8h1v1H1zm1 0h1v1H2z\"/><path fill=\"{{stroke}}\" d=\"M3 8h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8z\"/><path fill=\"{{frame}}\" d=\"M9 8h1v1H9zm1 0h1v1h-1z\"/><path fill=\"{{stroke}}\" d=\"M11 8h1v1h-1zM0 9h1v1H0zm1 0h1v1H1z\"/><path fill=\"{{frame}}\" d=\"M2 9h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/><path fill=\"{{stroke}}\" d=\"M10 9h1v1h-1zm-9 1h1v1H1zm1 0h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm-8 1h1v1H2zm1 0h1v1H3zm1 0h1v1H4zm1 0h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9z\"/></svg>'\n\t\t.replace(/\\{\\{size\\}\\}/g, size.toString())\n\t\t.replace(/\\{\\{height\\}\\}/g, height.toString())\n\t\t.replace(/\\{\\{stroke\\}\\}/g, stroke)\n\t\t.replace(/\\{\\{frame\\}\\}/g, frame)\n\t\t.replace(/\\{\\{background\\}\\}/g, background);\n\n\t// Encode SVG to Base64 safely\n\tconst encodedSvg = encodeURIComponent(svg)\n\t\t.replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)));\n\n\treturn `data:image/svg+xml;base64,${btoa(encodedSvg)}`;\n}\n\nfunction getCheckbox({ size, color }: { size: number; color: string }) {\n\tconst svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"{{width}}\" height=\"{{height}}\" viewBox=\"0 0 12 6\"><rect width=\"1\" height=\"1\" x=\"1\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"4\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"7\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"8\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"9\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"10\" y=\"0\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"1\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"2\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"3\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"0\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"5\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"6\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"11\" y=\"4\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"1\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"2\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"3\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"4\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"7\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"8\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"9\" y=\"5\" fill=\"{{color}}\"></rect><rect width=\"1\" height=\"1\" x=\"10\" y=\"5\" fill=\"{{color}}\"></rect></svg>'\n\t\t.replace(/\\{\\{width\\}\\}/g, (size*2).toString())\n\t\t.replace(/\\{\\{height\\}\\}/g, size.toString())\n\t\t.replace(/\\{\\{color\\}\\}/g, color)\n    \n\tconst encodedSvg = encodeURIComponent(svg)\n\t\t.replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)))\n\t\t.replace(/#/g, '%23');\n\n\treturn `data:image/svg+xml;base64,${btoa(encodedSvg)}`;\n\n}\n\nexport const frame = getFrame({\n\tsize: 160,\n\tstroke: '#000',\n\tframe: '#333',\n\tbackground: '#DDD',\n});\n\nexport const checkbox = getCheckbox({\n\tsize: 12,\n\tcolor: '#000',\n});\nexport const checkboxLight = getCheckbox({\n\tsize: 12,\n\tcolor: '#000',\n});\n","import { getFrame } from './frame';\nimport { useCallback, useEffect, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport const PixelWindow = ({\n\tstyle = {},\n\tstroke = '#000',\n\tframe = '#333',\n\tbackground = '#DDD',\n\tpixel = 160,\n\tchildren,\n}: {\n\tstyle?: React.CSSProperties,\n\tpixel?: number,\n\tstroke?: string\n\tframe?: string\n\tbackground?: string\n\tchildren: ReactNode;\n}) => {\n\n\tconst pixelFrame = getFrame({\n\t\tsize: pixel,\n\t\tstroke,\n\t\tframe,\n\t\tbackground,\n\t});\n\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"window\"\n\t\t\tstyle={{\n\t\t\t\twidth: '100%',\n\t\t\t\theight: '100%',\n\t\t\t\tborderImage: `url(${pixelFrame})`,\n\t\t\t\tborderImageSlice: '49% 49% fill',\n\t\t\t\tborderImageWidth: `${pixel}px`,\n\t\t\t}}\n\t\t>\n\t\t\t<div style={{ padding: `${pixel}px`}}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ boxSizing: 'border-box', ...style }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const FreePixelWindow = ({\n\tname,\n\tchildren,\n\tpixel = 16,\n\tstroke = '#000',\n\tframe = '#333',\n\tbackground = '#DDD',\n\tposition: initialPosition = { x: 100, y: 100 },\n\tstyle,\n\tminWidth = 120,\n\tminHeight = 100,\n}: {\n\tname?: string;\n\tchildren: ReactNode;\n\tpixel?: number;\n\tstroke?: string;\n\tframe?: string;\n\tbackground?: string;\n\tposition?: { x: number; y: number };\n\tstyle?: React.CSSProperties;\n\tminWidth?: number;\n\tminHeight?: number;\n}) => {\n\n\tconst [position, setPosition] = useState(() => {\n\t\tif (name) {\n\t\t\tconst savedPosition = localStorage.getItem(`${name}-position`);\n\t\t\treturn savedPosition ? JSON.parse(savedPosition) : initialPosition;\n\t\t}\n\t\treturn initialPosition;\n\t});\n\n\tconst [size, setSize] = useState(() => {\n\t\tconst savedSize = localStorage.getItem(`${name}-size`);\n\t\treturn savedSize ? JSON.parse(savedSize) : { width: 300, height: 200 };\n\t});\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [isResizing, setIsResizing] = useState(false);\n\tconst [dragStart, setDragStart] = useState({ x: 0, y: 0 });\n\tconst [resizeStart, setResizeStart] = useState({ width: 0, height: 0, mouseX: 0, mouseY: 0 });\n\n\tuseEffect(() => {\n\t\tif (name) {\n\t\t\tlocalStorage.setItem(`${name}-position`, JSON.stringify(position));\n\t\t\tlocalStorage.setItem(`${name}-size`, JSON.stringify(size));\n\n\t\t}\n\t}, [name, position, size]);\n\n\tconst handleMouseMove = useCallback((e: MouseEvent) => {\n\t\tif (isDragging) {\n\t\t\tsetPosition({\n\t\t\t\tx: e.clientX - dragStart.x,\n\t\t\t\ty: e.clientY - dragStart.y,\n\t\t\t});\n\t\t} else if (isResizing) {\n\t\t\tconst deltaX = e.clientX - resizeStart.mouseX;\n\t\t\tconst deltaY = e.clientY - resizeStart.mouseY;\n\n\t\t\tsetSize({\n\t\t\t\twidth: Math.max(resizeStart.width + deltaX, minWidth),\n\t\t\t\theight: Math.max(resizeStart.height + deltaY, minHeight),\n\t\t\t});\n\t\t}\n\t}, [isDragging, isResizing, dragStart, resizeStart, minWidth, minHeight]);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tsetIsDragging(false);\n\t\tsetIsResizing(false);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (isDragging || isResizing) {\n\t\t\twindow.addEventListener('mousemove', handleMouseMove);\n\t\t\twindow.addEventListener('mouseup', handleMouseUp);\n\t\t} else {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('mouseup', handleMouseUp);\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('mouseup', handleMouseUp);\n\t\t};\n\t}, [isDragging, isResizing, handleMouseMove, handleMouseUp]);\n\n\tconst handleMouseDown = (e: React.MouseEvent) => {\n\t\tsetIsDragging(true);\n\t\tsetDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });\n\t};\n\n\tconst handleResizeStart = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tsetIsResizing(true);\n\t\tsetResizeStart({\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t});\n\t};\n\n\tconst pixelFrame = getFrame({\n\t\tsize: pixel,\n\t\tstroke,\n\t\tframe,\n\t\tbackground,\n\t});\n\n\treturn createPortal(\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tresize: 'none',\n\t\t\t\ttop: position.y,\n\t\t\t\tleft: position.x,\n\t\t\t\twidth: size.width,\n\t\t\t\theight: size.height,\n\t\t\t\tborderImage: `url(${pixelFrame})`,\n\t\t\t\tborderImageSlice: '49% 49% fill',\n\t\t\t\tborderImageWidth: `${pixel}px`,\n\t\t\t}}\n\t\t\tonMouseUp={handleMouseUp}\n\t\t>\n\t\t\t<div \n\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\tstyle={{\n\t\t\t\t\theight: `${pixel}px`,\n\t\t\t\t\tcursor: \"grab\",\n\t\t\t\t\tuserSelect: \"none\"\n\t\t\t\t}}\n\t\t\t></div>\n\t\t\t<div style={{\n\t\t\t\tpadding: `${pixel}px`,\n\t\t\t\tpaddingTop: 0,\n\t\t\t\t...style\n\t\t\t}}>{children}</div>\n\t\t\t<div\n\t\t\t\tonMouseDown={handleResizeStart}\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\twidth: `${pixel}px`,\n\t\t\t\t\theight: `${pixel}px`,\n\t\t\t\t\tcursor: 'se-resize',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t}}\n\t\t\t></div>\n\t\t</div>,\n\t\tdocument.body\n\t);\n};\n"],"mappings":"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","names":["frame","frame"]}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@glennjong/pixel-window",
+  "version": "0.1.1",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}