@knotx/plugins-background 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,208 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _transform_dec, _container_dec, _a, _init;
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  BackgroundVariant2["Cross"] = "cross";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+class Background extends (_a = core.BasePlugin, _container_dec = [decorators.inject.container()], _transform_dec = [decorators.inject.canvas.transform()], _render_dec = [decorators.layer(core.Layer.Background)], _a) {
+  constructor(props = {}) {
+    super();
+    this.props = props;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "background");
+    __publicField(this, "container", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "transform", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+  }
+  render() {
+    const { container, transform } = core.use(() => ({
+      container: this.container,
+      transform: this.transform
+    }));
+    return /* @__PURE__ */ jsxRuntime.jsx(BackgroundComponent, __spreadProps(__spreadValues({}, this.props), { id: this.pluginId, container, transform }));
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "render", _render_dec, Background);
+__decorateElement(_init, 5, "container", _container_dec, Background);
+__decorateElement(_init, 5, "transform", _transform_dec, Background);
+__decoratorMetadata(_init, Background);
+const defaultSize = {
+  ["dots" /* Dots */]: 1,
+  ["lines" /* Lines */]: 1,
+  ["cross" /* Cross */]: 6
+};
+function BackgroundComponent({
+  id,
+  variant = "dots" /* Dots */,
+  // only used for dots and cross
+  gap = 20,
+  // only used for lines and cross
+  size,
+  lineWidth = 1,
+  offset = 0,
+  color,
+  bgColor,
+  style,
+  container,
+  transform = {
+    positionX: 0,
+    positionY: 0,
+    scale: 1,
+    previousScale: 1
+  }
+}) {
+  const patternSize = size || defaultSize[variant];
+  const isDots = variant === "dots" /* Dots */;
+  const isCross = variant === "cross" /* Cross */;
+  const gapXY = Array.isArray(gap) ? gap : [gap, gap];
+  const scaledGap = [gapXY[0] * transform.scale || 1, gapXY[1] * transform.scale || 1];
+  const scaledSize = patternSize * transform.scale;
+  const offsetXY = Array.isArray(offset) ? offset : [offset, offset];
+  const patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
+  const scaledOffset = [
+    offsetXY[0] * transform.scale || 1 + patternDimensions[0] / 2,
+    offsetXY[1] * transform.scale || 1 + patternDimensions[1] / 2
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      style: __spreadValues(__spreadValues({
+        "position": "absolute",
+        "width": "100%",
+        "height": "100%",
+        "top": 0,
+        "left": 0,
+        // @ts-expect-error can use css variable
+        "--background-color-props": bgColor,
+        "--background-pattern-color-props": color
+      }, style), container),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pattern",
+          {
+            id,
+            x: transform.positionX % scaledGap[0],
+            y: transform.positionY % scaledGap[1],
+            width: scaledGap[0],
+            height: scaledGap[1],
+            patternUnits: "userSpaceOnUse",
+            patternTransform: `translate(-${scaledOffset[0]},-${scaledOffset[1]})`,
+            children: isDots ? /* @__PURE__ */ jsxRuntime.jsx(DotPattern, { radius: scaledSize / 2 }) : /* @__PURE__ */ jsxRuntime.jsx(
+              LinePattern,
+              {
+                dimensions: patternDimensions,
+                lineWidth,
+                variant
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
+      ]
+    }
+  );
+}
+BackgroundComponent.displayName = "Background";
+function LinePattern({ dimensions, lineWidth, variant }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      strokeWidth: lineWidth,
+      d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
+      style: {
+        stroke: `var( --background-pattern-color-props, var(--background-pattern-color, var(--background-pattern-${variant}-color-default)) )`
+      }
+    }
+  );
+}
+function DotPattern({ radius }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      cx: radius,
+      cy: radius,
+      r: radius,
+      style: {
+        fill: "var( --background-pattern-color-props, var(--background-pattern-color, var(--background-pattern-dots-color-default)) )"
+      }
+    }
+  );
+}
+
+exports.Background = Background;
+exports.BackgroundVariant = BackgroundVariant;

package/dist/index.d.cts

@@ -0,0 +1,50 @@
+import { BasePlugin, Container } from '@knotx/core';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
+
+/**
+ * Background plugin
+ * Main implementation comes from https://github.com/xyflow/xyflow/blob/main/packages/react/src/additional-components/Background/Background.tsx
+ */
+
+declare enum BackgroundVariant {
+    Lines = "lines",
+    Dots = "dots",
+    Cross = "cross"
+}
+declare class Background extends BasePlugin<'background'> {
+    private props;
+    name: "background";
+    constructor(props?: Omit<BackgroundProps, 'id'>);
+    container: Container;
+    transform: CanvasTransformState;
+    render(): JSX.Element;
+}
+interface BackgroundProps {
+    id: string;
+    /** Color of the pattern */
+    color?: string;
+    /** Color of the background */
+    bgColor?: string;
+    /** Gap between repetitions of the pattern */
+    gap?: number | [number, number];
+    /** Size of a single pattern element */
+    size?: number;
+    /** Offset of the pattern */
+    offset?: number | [number, number];
+    /** Line width of the Line pattern */
+    lineWidth?: number;
+    /**
+     * Variant of the pattern
+     * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
+     * 'lines', 'dots', 'cross'
+     */
+    variant?: BackgroundVariant;
+    /** Style applied to the container */
+    style?: Record<string, any>;
+    /** Container of the canvas */
+    container?: Container;
+    /** Transform of the canvas */
+    transform?: CanvasTransformState;
+}
+
+export { Background, type BackgroundProps, BackgroundVariant };

package/dist/index.d.mts

@@ -0,0 +1,50 @@
+import { BasePlugin, Container } from '@knotx/core';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
+
+/**
+ * Background plugin
+ * Main implementation comes from https://github.com/xyflow/xyflow/blob/main/packages/react/src/additional-components/Background/Background.tsx
+ */
+
+declare enum BackgroundVariant {
+    Lines = "lines",
+    Dots = "dots",
+    Cross = "cross"
+}
+declare class Background extends BasePlugin<'background'> {
+    private props;
+    name: "background";
+    constructor(props?: Omit<BackgroundProps, 'id'>);
+    container: Container;
+    transform: CanvasTransformState;
+    render(): JSX.Element;
+}
+interface BackgroundProps {
+    id: string;
+    /** Color of the pattern */
+    color?: string;
+    /** Color of the background */
+    bgColor?: string;
+    /** Gap between repetitions of the pattern */
+    gap?: number | [number, number];
+    /** Size of a single pattern element */
+    size?: number;
+    /** Offset of the pattern */
+    offset?: number | [number, number];
+    /** Line width of the Line pattern */
+    lineWidth?: number;
+    /**
+     * Variant of the pattern
+     * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
+     * 'lines', 'dots', 'cross'
+     */
+    variant?: BackgroundVariant;
+    /** Style applied to the container */
+    style?: Record<string, any>;
+    /** Container of the canvas */
+    container?: Container;
+    /** Transform of the canvas */
+    transform?: CanvasTransformState;
+}
+
+export { Background, type BackgroundProps, BackgroundVariant };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import { BasePlugin, Container } from '@knotx/core';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
+
+/**
+ * Background plugin
+ * Main implementation comes from https://github.com/xyflow/xyflow/blob/main/packages/react/src/additional-components/Background/Background.tsx
+ */
+
+declare enum BackgroundVariant {
+    Lines = "lines",
+    Dots = "dots",
+    Cross = "cross"
+}
+declare class Background extends BasePlugin<'background'> {
+    private props;
+    name: "background";
+    constructor(props?: Omit<BackgroundProps, 'id'>);
+    container: Container;
+    transform: CanvasTransformState;
+    render(): JSX.Element;
+}
+interface BackgroundProps {
+    id: string;
+    /** Color of the pattern */
+    color?: string;
+    /** Color of the background */
+    bgColor?: string;
+    /** Gap between repetitions of the pattern */
+    gap?: number | [number, number];
+    /** Size of a single pattern element */
+    size?: number;
+    /** Offset of the pattern */
+    offset?: number | [number, number];
+    /** Line width of the Line pattern */
+    lineWidth?: number;
+    /**
+     * Variant of the pattern
+     * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
+     * 'lines', 'dots', 'cross'
+     */
+    variant?: BackgroundVariant;
+    /** Style applied to the container */
+    style?: Record<string, any>;
+    /** Container of the canvas */
+    container?: Container;
+    /** Transform of the canvas */
+    transform?: CanvasTransformState;
+}
+
+export { Background, type BackgroundProps, BackgroundVariant };

package/dist/index.mjs

@@ -0,0 +1,205 @@
+import { jsx, jsxs } from '@knotx/jsx/jsx-runtime';
+import { Layer, use, BasePlugin } from '@knotx/core';
+import { inject, layer } from '@knotx/decorators';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _render_dec, _transform_dec, _container_dec, _a, _init;
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  BackgroundVariant2["Cross"] = "cross";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+class Background extends (_a = BasePlugin, _container_dec = [inject.container()], _transform_dec = [inject.canvas.transform()], _render_dec = [layer(Layer.Background)], _a) {
+  constructor(props = {}) {
+    super();
+    this.props = props;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "background");
+    __publicField(this, "container", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "transform", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+  }
+  render() {
+    const { container, transform } = use(() => ({
+      container: this.container,
+      transform: this.transform
+    }));
+    return /* @__PURE__ */ jsx(BackgroundComponent, __spreadProps(__spreadValues({}, this.props), { id: this.pluginId, container, transform }));
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "render", _render_dec, Background);
+__decorateElement(_init, 5, "container", _container_dec, Background);
+__decorateElement(_init, 5, "transform", _transform_dec, Background);
+__decoratorMetadata(_init, Background);
+const defaultSize = {
+  ["dots" /* Dots */]: 1,
+  ["lines" /* Lines */]: 1,
+  ["cross" /* Cross */]: 6
+};
+function BackgroundComponent({
+  id,
+  variant = "dots" /* Dots */,
+  // only used for dots and cross
+  gap = 20,
+  // only used for lines and cross
+  size,
+  lineWidth = 1,
+  offset = 0,
+  color,
+  bgColor,
+  style,
+  container,
+  transform = {
+    positionX: 0,
+    positionY: 0,
+    scale: 1,
+    previousScale: 1
+  }
+}) {
+  const patternSize = size || defaultSize[variant];
+  const isDots = variant === "dots" /* Dots */;
+  const isCross = variant === "cross" /* Cross */;
+  const gapXY = Array.isArray(gap) ? gap : [gap, gap];
+  const scaledGap = [gapXY[0] * transform.scale || 1, gapXY[1] * transform.scale || 1];
+  const scaledSize = patternSize * transform.scale;
+  const offsetXY = Array.isArray(offset) ? offset : [offset, offset];
+  const patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
+  const scaledOffset = [
+    offsetXY[0] * transform.scale || 1 + patternDimensions[0] / 2,
+    offsetXY[1] * transform.scale || 1 + patternDimensions[1] / 2
+  ];
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: __spreadValues(__spreadValues({
+        "position": "absolute",
+        "width": "100%",
+        "height": "100%",
+        "top": 0,
+        "left": 0,
+        // @ts-expect-error can use css variable
+        "--background-color-props": bgColor,
+        "--background-pattern-color-props": color
+      }, style), container),
+      children: [
+        /* @__PURE__ */ jsx(
+          "pattern",
+          {
+            id,
+            x: transform.positionX % scaledGap[0],
+            y: transform.positionY % scaledGap[1],
+            width: scaledGap[0],
+            height: scaledGap[1],
+            patternUnits: "userSpaceOnUse",
+            patternTransform: `translate(-${scaledOffset[0]},-${scaledOffset[1]})`,
+            children: isDots ? /* @__PURE__ */ jsx(DotPattern, { radius: scaledSize / 2 }) : /* @__PURE__ */ jsx(
+              LinePattern,
+              {
+                dimensions: patternDimensions,
+                lineWidth,
+                variant
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
+      ]
+    }
+  );
+}
+BackgroundComponent.displayName = "Background";
+function LinePattern({ dimensions, lineWidth, variant }) {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeWidth: lineWidth,
+      d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
+      style: {
+        stroke: `var( --background-pattern-color-props, var(--background-pattern-color, var(--background-pattern-${variant}-color-default)) )`
+      }
+    }
+  );
+}
+function DotPattern({ radius }) {
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: radius,
+      cy: radius,
+      r: radius,
+      style: {
+        fill: "var( --background-pattern-color-props, var(--background-pattern-color, var(--background-pattern-dots-color-default)) )"
+      }
+    }
+  );
+}
+
+export { Background, BackgroundVariant };

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@knotx/plugins-background",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Background Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-background"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@knotx/plugins-canvas": "0.0.0",
+    "@knotx/core": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/jsx": "0.0.0"
+  },
+  "devDependencies": {
+    "@knotx/build-config": "0.0.0",
+    "@knotx/core": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/eslint-config": "0.0.0",
+    "@knotx/plugins-canvas": "0.0.0",
+    "@knotx/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}