@blinkorb/rcx 0.0.0 → 0.0.1

package/components/canvas/context.d.ts

@@ -0,0 +1,11 @@
+import type { RCXCanvasContext, RCXRenderingContext } from '../../types.ts';
+export declare const canvasContext: {
+    Provider: import("../../types.ts").RCXComponent<import("../../index.ts").ProviderProps<RCXCanvasContext>>;
+    useProvide: (value: RCXCanvasContext) => void;
+    useInject: () => Readonly<RCXCanvasContext> | undefined;
+};
+export declare const renderingContext: {
+    Provider: import("../../types.ts").RCXComponent<import("../../index.ts").ProviderProps<RCXRenderingContext>>;
+    useProvide: (value: RCXRenderingContext) => void;
+    useInject: () => Readonly<RCXRenderingContext> | undefined;
+};

package/components/canvas/context.js

@@ -0,0 +1,4 @@
+import { createContext } from "../../context/create-context.js";
+export const canvasContext = createContext();
+export const renderingContext = createContext();
+//# sourceMappingURL=context.js.map

package/components/canvas/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/canvas/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGhE,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,EAAoB,CAAC;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,EAAuB,CAAC","sourcesContent":["import { createContext } from '../../context/create-context.ts';\nimport type { RCXCanvasContext, RCXRenderingContext } from '../../types.ts';\n\nexport const canvasContext = createContext<RCXCanvasContext>();\n\nexport const renderingContext = createContext<RCXRenderingContext>();\n"]}

package/components/canvas/index.d.ts

@@ -0,0 +1,7 @@
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type CanvasProps = RCXPropsWithChildren<{
+    width?: number | 'auto';
+    height?: number | 'auto';
+    pixelRatio?: number | 'auto';
+}>;
+export declare const Canvas: RCXComponent<CanvasProps>;

package/components/canvas/index.js

@@ -0,0 +1,62 @@
+import { useOnMount } from "../../hooks/use-on.js";
+import { useRenderBeforeChildren } from "../../hooks/use-render.js";
+import { useReactive, useUnreactive } from "../../hooks/use-state.js";
+import { getRecommendedPixelRatio } from "../../utils/get-recommended-pixel-ratio.js";
+import { canvasContext, renderingContext } from "./context.js";
+const getValueOrAuto = (value, autoValue) => {
+    if (typeof value === 'number') {
+        return value;
+    }
+    return autoValue;
+};
+export const Canvas = (props) => {
+    const renderingContextStateRoot = renderingContext.useInject();
+    if (!renderingContextStateRoot) {
+        throw new Error('Canvas was rendered outside of an application');
+    }
+    const initialCanvasSize = renderingContextStateRoot.canvas.getBoundingClientRect();
+    const canvasSize = useReactive({
+        width: initialCanvasSize.width,
+        height: initialCanvasSize.height,
+    });
+    const resizeObserver = useUnreactive(new ResizeObserver((entries) => {
+        const canvasEntry = entries[0];
+        if (typeof canvasEntry === 'undefined') {
+            return;
+        }
+        const rect = canvasEntry.target.getBoundingClientRect();
+        canvasSize.width = rect.width;
+        canvasSize.height = rect.height;
+    }));
+    useOnMount(() => {
+        resizeObserver.observe(renderingContextStateRoot.canvas);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    });
+    useRenderBeforeChildren((renderingContextState) => {
+        const pixelRatio = getValueOrAuto(props.pixelRatio, getRecommendedPixelRatio());
+        const rect = renderingContextState.canvas.getBoundingClientRect();
+        const width = getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;
+        const height = getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;
+        renderingContextState.canvas.width = width * pixelRatio;
+        renderingContextState.canvas.height = height * pixelRatio;
+        renderingContextState.ctx2d.scale(pixelRatio, pixelRatio);
+    });
+    const pixelRatio = getValueOrAuto(props.pixelRatio, getRecommendedPixelRatio());
+    const rect = renderingContextStateRoot.canvas.getBoundingClientRect();
+    const width = getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;
+    const height = getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;
+    canvasContext.useProvide({
+        ...renderingContextStateRoot,
+        props,
+        width,
+        height,
+        pixelRatio,
+        actualWidth: width * pixelRatio,
+        actualHeight: height * pixelRatio,
+    });
+    return props.children;
+};
+Canvas.displayName = 'Canvas';
+//# sourceMappingURL=index.js.map

package/components/canvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/canvas/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { useOnMount } from '../../hooks/use-on.ts';\nimport { useRenderBeforeChildren } from '../../hooks/use-render.ts';\nimport { useReactive, useUnreactive } from '../../hooks/use-state.ts';\nimport type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\nimport { getRecommendedPixelRatio } from '../../utils/get-recommended-pixel-ratio.ts';\nimport { canvasContext, renderingContext } from './context.ts';\n\nexport type CanvasProps = RCXPropsWithChildren<{\n  width?: number | 'auto';\n  height?: number | 'auto';\n  pixelRatio?: number | 'auto';\n}>;\n\nconst getValueOrAuto = (\n  value: undefined | number | 'auto',\n  autoValue: number\n) => {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  return autoValue;\n};\n\nexport const Canvas: RCXComponent<CanvasProps> = (props) => {\n  const renderingContextStateRoot = renderingContext.useInject();\n\n  if (!renderingContextStateRoot) {\n    throw new Error('Canvas was rendered outside of an application');\n  }\n\n  const initialCanvasSize =\n    renderingContextStateRoot.canvas.getBoundingClientRect();\n  const canvasSize = useReactive({\n    width: initialCanvasSize.width,\n    height: initialCanvasSize.height,\n  });\n  const resizeObserver = useUnreactive(\n    new ResizeObserver((entries) => {\n      const canvasEntry = entries[0];\n      if (typeof canvasEntry === 'undefined') {\n        return;\n      }\n\n      const rect = canvasEntry.target.getBoundingClientRect();\n      canvasSize.width = rect.width;\n      canvasSize.height = rect.height;\n    })\n  );\n\n  useOnMount(() => {\n    resizeObserver.observe(renderingContextStateRoot.canvas);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  });\n\n  useRenderBeforeChildren((renderingContextState) => {\n    const pixelRatio = getValueOrAuto(\n      props.pixelRatio,\n      getRecommendedPixelRatio()\n    );\n    const rect = renderingContextState.canvas.getBoundingClientRect();\n    const width =\n      getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;\n    const height =\n      getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;\n\n    renderingContextState.canvas.width = width * pixelRatio;\n    renderingContextState.canvas.height = height * pixelRatio;\n    renderingContextState.ctx2d.scale(pixelRatio, pixelRatio);\n  });\n\n  const pixelRatio = getValueOrAuto(\n    props.pixelRatio,\n    getRecommendedPixelRatio()\n  );\n  const rect = renderingContextStateRoot.canvas.getBoundingClientRect();\n  const width =\n    getValueOrAuto(props.width, rect.width * pixelRatio) / pixelRatio;\n  const height =\n    getValueOrAuto(props.height, rect.height * pixelRatio) / pixelRatio;\n\n  canvasContext.useProvide({\n    ...renderingContextStateRoot,\n    props,\n    width,\n    height,\n    pixelRatio,\n    actualWidth: width * pixelRatio,\n    actualHeight: height * pixelRatio,\n  });\n\n  return props.children;\n};\n\nCanvas.displayName = 'Canvas';\n"]}

package/components/index.js

@@ -0,0 +1,6 @@
+export * from "./canvas/index.js";
+export * from "./paths/index.js";
+export * from "./shapes/index.js";
+export * from "./text/index.js";
+export * from "./transform/index.js";
+//# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './canvas/index.ts';\nexport * from './paths/index.ts';\nexport * from './shapes/index.ts';\nexport * from './text/index.ts';\nexport * from './transform/index.ts';\n"]}

package/components/paths/arc-to.d.ts

@@ -0,0 +1,12 @@
+import type { RCXComponent, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export type ArcToProps = RCXPropsWithChildren<{
+    startControlX: number;
+    startControlY: number;
+    endControlX: number;
+    endControlY: number;
+    radius: number;
+    style?: RCXStyleProp<RCXShapeStyle>;
+    beginPath?: boolean;
+    closePath?: boolean;
+}>;
+export declare const ArcTo: RCXComponent<ArcToProps>;

package/components/paths/arc-to.js

@@ -0,0 +1,24 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+import { applyFillAndStrokeStyles } from "../../utils/apply-fill-and-stroke-style.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+export const ArcTo = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { startControlX, startControlY, endControlX, endControlY, radius, beginPath = false, } = props;
+        renderingContext.ctx2d.save();
+        if (beginPath) {
+            renderingContext.ctx2d.beginPath();
+        }
+        renderingContext.ctx2d.arcTo(startControlX, startControlY, endControlX, endControlY, radius);
+    });
+    useRenderAfterChildren((renderingContext) => {
+        const { closePath = false } = props;
+        if (closePath) {
+            renderingContext.ctx2d.closePath();
+        }
+        applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+ArcTo.displayName = 'ArcTo';
+//# sourceMappingURL=arc-to.js.map

package/components/paths/arc-to.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc-to.js","sourceRoot":"","sources":["../../../src/components/paths/arc-to.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAa9D,MAAM,CAAC,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE;IACvD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EACJ,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,GAAG,KAAK,GAClB,GAAG,KAAK,CAAC;QAEV,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAC1B,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,MAAM,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,MAAM,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;QAEpC,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type {\n  RCXComponent,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\n\nexport type ArcToProps = RCXPropsWithChildren<{\n  startControlX: number;\n  startControlY: number;\n  endControlX: number;\n  endControlY: number;\n  radius: number;\n  style?: RCXStyleProp<RCXShapeStyle>;\n  beginPath?: boolean;\n  closePath?: boolean;\n}>;\n\nexport const ArcTo: RCXComponent<ArcToProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const {\n      startControlX,\n      startControlY,\n      endControlX,\n      endControlY,\n      radius,\n      beginPath = false,\n    } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    renderingContext.ctx2d.arcTo(\n      startControlX,\n      startControlY,\n      endControlX,\n      endControlY,\n      radius\n    );\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    const { closePath = false } = props;\n\n    if (closePath) {\n      renderingContext.ctx2d.closePath();\n    }\n\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nArcTo.displayName = 'ArcTo';\n"]}

package/components/paths/clip.d.ts

@@ -0,0 +1,6 @@
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type ClipProps = RCXPropsWithChildren<{
+    path?: Path2D;
+    fillRule?: CanvasFillRule;
+}>;
+export declare const Clip: RCXComponent<ClipProps>;

package/components/paths/clip.js

@@ -0,0 +1,19 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+export const Clip = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { path, fillRule } = props;
+        renderingContext.ctx2d.save();
+        if (typeof path === 'undefined') {
+            renderingContext.ctx2d.clip(fillRule);
+        }
+        else {
+            renderingContext.ctx2d.clip(path, fillRule);
+        }
+    });
+    useRenderAfterChildren((renderingContext) => {
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Clip.displayName = 'Clip';
+//# sourceMappingURL=clip.js.map

package/components/paths/clip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip.js","sourceRoot":"","sources":["../../../src/components/paths/clip.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAQnC,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,KAAK,EAAE,EAAE;IACrD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;QAEjC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,OAAO,IAAI,KAAK,WAAW,EAAE,CAAC;YAChC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\n\nexport type ClipProps = RCXPropsWithChildren<{\n  path?: Path2D;\n  fillRule?: CanvasFillRule;\n}>;\n\nexport const Clip: RCXComponent<ClipProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { path, fillRule } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (typeof path === 'undefined') {\n      renderingContext.ctx2d.clip(fillRule);\n    } else {\n      renderingContext.ctx2d.clip(path, fillRule);\n    }\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nClip.displayName = 'Clip';\n"]}

package/components/paths/index.js

@@ -0,0 +1,6 @@
+export * from "./arc-to.js";
+export * from "./line.js";
+export * from "./path.js";
+export * from "./point.js";
+export * from "./clip.js";
+//# sourceMappingURL=index.js.map

package/components/paths/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/paths/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC","sourcesContent":["export * from './arc-to.ts';\nexport * from './line.ts';\nexport * from './path.ts';\nexport * from './point.ts';\nexport * from './clip.ts';\n"]}

package/components/paths/line.d.ts

@@ -0,0 +1,11 @@
+import type { RCXComponent, RCXLineStyle, RCXPropsWithChildren, RCXStyleProp } from '../../types.ts';
+export type LineProps = RCXPropsWithChildren<{
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    beginPath?: boolean;
+    closePath?: boolean;
+    style?: RCXStyleProp<RCXLineStyle>;
+}>;
+export declare const Line: RCXComponent<LineProps>;

package/components/paths/line.js

@@ -0,0 +1,25 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+import { applyFillAndStrokeStyles } from "../../utils/apply-fill-and-stroke-style.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+export const Line = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { startX, startY, endX, endY, beginPath = true } = props;
+        renderingContext.ctx2d.save();
+        if (beginPath) {
+            renderingContext.ctx2d.beginPath();
+        }
+        renderingContext.ctx2d.moveTo(startX, startY);
+        renderingContext.ctx2d.lineTo(endX, endY);
+    });
+    useRenderAfterChildren((renderingContext) => {
+        const { closePath = false } = props;
+        if (closePath) {
+            renderingContext.ctx2d.closePath();
+        }
+        applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Line.displayName = 'Line';
+//# sourceMappingURL=line.js.map

package/components/paths/line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../src/components/paths/line.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAY9D,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,KAAK,EAAE,EAAE;IACrD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE/D,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC9C,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,MAAM,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;QAEpC,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type {\n  RCXComponent,\n  RCXLineStyle,\n  RCXPropsWithChildren,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\n\nexport type LineProps = RCXPropsWithChildren<{\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n  beginPath?: boolean;\n  closePath?: boolean;\n  style?: RCXStyleProp<RCXLineStyle>;\n}>;\n\nexport const Line: RCXComponent<LineProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { startX, startY, endX, endY, beginPath = true } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    renderingContext.ctx2d.moveTo(startX, startY);\n    renderingContext.ctx2d.lineTo(endX, endY);\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    const { closePath = false } = props;\n\n    if (closePath) {\n      renderingContext.ctx2d.closePath();\n    }\n\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nLine.displayName = 'Line';\n"]}

package/components/paths/path.d.ts

@@ -0,0 +1,8 @@
+import type { RCXComponent, RCXPoint, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export type PathProps = RCXPropsWithChildren<{
+    points?: readonly RCXPoint[];
+    beginPath?: boolean;
+    closePath?: boolean;
+    style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+export declare const Path: RCXComponent<PathProps>;

package/components/paths/path.js

@@ -0,0 +1,33 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+import { applyFillAndStrokeStyles } from "../../utils/apply-fill-and-stroke-style.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+import { isArray } from "../../utils/type-guards.js";
+export const Path = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { points, beginPath = true } = props;
+        renderingContext.ctx2d.save();
+        if (beginPath) {
+            renderingContext.ctx2d.beginPath();
+        }
+        points?.forEach((point, index) => {
+            const [x, y] = isArray(point) ? point : [point.x, point.y];
+            if (index === 0) {
+                renderingContext.ctx2d.moveTo(x, y);
+            }
+            else {
+                renderingContext.ctx2d.lineTo(x, y);
+            }
+        });
+    });
+    useRenderAfterChildren((renderingContext) => {
+        const { closePath = false } = props;
+        if (closePath) {
+            renderingContext.ctx2d.closePath();
+        }
+        applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Path.displayName = 'Path';
+//# sourceMappingURL=path.js.map

package/components/paths/path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.js","sourceRoot":"","sources":["../../../src/components/paths/path.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAQnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AASrD,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,KAAK,EAAE,EAAE;IACrD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE3C,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAE3D,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAChB,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,MAAM,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;QAEpC,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type {\n  RCXComponent,\n  RCXPoint,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\nimport { isArray } from '../../utils/type-guards.ts';\n\nexport type PathProps = RCXPropsWithChildren<{\n  points?: readonly RCXPoint[];\n  beginPath?: boolean;\n  closePath?: boolean;\n  style?: RCXStyleProp<RCXShapeStyle>;\n}>;\n\nexport const Path: RCXComponent<PathProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { points, beginPath = true } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    points?.forEach((point, index) => {\n      const [x, y] = isArray(point) ? point : [point.x, point.y];\n\n      if (index === 0) {\n        renderingContext.ctx2d.moveTo(x, y);\n      } else {\n        renderingContext.ctx2d.lineTo(x, y);\n      }\n    });\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    const { closePath = false } = props;\n\n    if (closePath) {\n      renderingContext.ctx2d.closePath();\n    }\n\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nPath.displayName = 'Path';\n"]}

package/components/paths/point.d.ts

@@ -0,0 +1,7 @@
+import type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type PointProps = RCXPropsWithChildren<{
+    x: number;
+    y: number;
+    lineTo?: boolean;
+}>;
+export declare const Point: RCXComponent<PointProps>;

package/components/paths/point.js

@@ -0,0 +1,15 @@
+import { useRenderBeforeChildren } from "../../hooks/use-render.js";
+export const Point = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { x, y, lineTo = true } = props;
+        if (lineTo) {
+            renderingContext.ctx2d.lineTo(x, y);
+        }
+        else {
+            renderingContext.ctx2d.moveTo(x, y);
+        }
+    });
+    return props.children;
+};
+Point.displayName = 'Point';
+//# sourceMappingURL=point.js.map

package/components/paths/point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.js","sourceRoot":"","sources":["../../../src/components/paths/point.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,MAAM,CAAC,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE;IACvD,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAEtC,IAAI,MAAM,EAAE,CAAC;YACX,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { useRenderBeforeChildren } from '../../hooks/use-render.ts';\nimport type { RCXComponent, RCXPropsWithChildren } from '../../types.ts';\n\nexport type PointProps = RCXPropsWithChildren<{\n  x: number;\n  y: number;\n  lineTo?: boolean;\n}>;\n\nexport const Point: RCXComponent<PointProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { x, y, lineTo = true } = props;\n\n    if (lineTo) {\n      renderingContext.ctx2d.lineTo(x, y);\n    } else {\n      renderingContext.ctx2d.moveTo(x, y);\n    }\n  });\n\n  return props.children;\n};\n\nPoint.displayName = 'Point';\n"]}

package/components/shapes/circle.d.ts

@@ -0,0 +1,14 @@
+import type { RCXComponent, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export type CircleProps = RCXPropsWithChildren<{
+    x: number;
+    y: number;
+    radius: number;
+    rotation?: number;
+    startAngle?: number;
+    endAngle?: number;
+    counterClockwise?: boolean;
+    beginPath?: boolean;
+    closePath?: boolean;
+    style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+export declare const Circle: RCXComponent<CircleProps>;

package/components/shapes/circle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@blinkorb/rcx/jsx-runtime";
+import { Ellipse } from "./ellipse.js";
+export const Circle = (props) => {
+    const { radius, ...rest } = props;
+    return (_jsx(Ellipse, { ...rest, radiusX: radius, radiusY: radius, children: props.children }));
+};
+Circle.displayName = 'Circle';
+//# sourceMappingURL=circle.js.map

package/components/shapes/circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.js","sourceRoot":"","sources":["../../../src/components/shapes/circle.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,CAAC,MAAM,MAAM,GAA8B,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACL,KAAC,OAAO,OAAK,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAChD,KAAK,CAAC,QAAQ,GACP,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import type {\n  RCXComponent,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { Ellipse } from './ellipse.ts';\n\nexport type CircleProps = RCXPropsWithChildren<{\n  x: number;\n  y: number;\n  radius: number;\n  rotation?: number;\n  startAngle?: number;\n  endAngle?: number;\n  counterClockwise?: boolean;\n  beginPath?: boolean;\n  closePath?: boolean;\n  style?: RCXStyleProp<RCXShapeStyle>;\n}>;\n\nexport const Circle: RCXComponent<CircleProps> = (props) => {\n  const { radius, ...rest } = props;\n\n  return (\n    <Ellipse {...rest} radiusX={radius} radiusY={radius}>\n      {props.children}\n    </Ellipse>\n  );\n};\n\nCircle.displayName = 'Circle';\n"]}

package/components/shapes/ellipse.d.ts

@@ -0,0 +1,15 @@
+import type { RCXComponent, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export type EllipseProps = RCXPropsWithChildren<{
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+    rotation?: number;
+    startAngle?: number;
+    endAngle?: number;
+    counterClockwise?: boolean;
+    beginPath?: boolean;
+    closePath?: boolean;
+    style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+export declare const Ellipse: RCXComponent<EllipseProps>;

package/components/shapes/ellipse.js

@@ -0,0 +1,24 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+import { applyFillAndStrokeStyles } from "../../utils/apply-fill-and-stroke-style.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+export const Ellipse = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { x, y, radiusX, radiusY, rotation = 0, startAngle = 0, endAngle = Math.PI * 2, counterClockwise = false, beginPath = true, } = props;
+        renderingContext.ctx2d.save();
+        if (beginPath) {
+            renderingContext.ctx2d.beginPath();
+        }
+        renderingContext.ctx2d.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise);
+    });
+    useRenderAfterChildren((renderingContext) => {
+        const { closePath = true } = props;
+        if (closePath) {
+            renderingContext.ctx2d.closePath();
+        }
+        applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Ellipse.displayName = 'Ellipse';
+//# sourceMappingURL=ellipse.js.map

package/components/shapes/ellipse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../src/components/shapes/ellipse.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAgB9D,MAAM,CAAC,MAAM,OAAO,GAA+B,CAAC,KAAK,EAAE,EAAE;IAC3D,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EACJ,CAAC,EACD,CAAC,EACD,OAAO,EACP,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,UAAU,GAAG,CAAC,EACd,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,EACtB,gBAAgB,GAAG,KAAK,EACxB,SAAS,GAAG,IAAI,GACjB,GAAG,KAAK,CAAC;QAEV,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAC5B,CAAC,EACD,CAAC,EACD,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,gBAAgB,CACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAEnC,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type {\n  RCXComponent,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\n\nexport type EllipseProps = RCXPropsWithChildren<{\n  x: number;\n  y: number;\n  radiusX: number;\n  radiusY: number;\n  rotation?: number;\n  startAngle?: number;\n  endAngle?: number;\n  counterClockwise?: boolean;\n  beginPath?: boolean;\n  closePath?: boolean;\n  style?: RCXStyleProp<RCXShapeStyle>;\n}>;\n\nexport const Ellipse: RCXComponent<EllipseProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const {\n      x,\n      y,\n      radiusX,\n      radiusY,\n      rotation = 0,\n      startAngle = 0,\n      endAngle = Math.PI * 2,\n      counterClockwise = false,\n      beginPath = true,\n    } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    renderingContext.ctx2d.ellipse(\n      x,\n      y,\n      radiusX,\n      radiusY,\n      rotation,\n      startAngle,\n      endAngle,\n      counterClockwise\n    );\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    const { closePath = true } = props;\n\n    if (closePath) {\n      renderingContext.ctx2d.closePath();\n    }\n\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nEllipse.displayName = 'Ellipse';\n"]}

package/components/shapes/index.js

@@ -0,0 +1,4 @@
+export * from "./circle.js";
+export * from "./ellipse.js";
+export * from "./rectangle.js";
+//# sourceMappingURL=index.js.map

package/components/shapes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/shapes/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './circle.tsx';\nexport * from './ellipse.ts';\nexport * from './rectangle.ts';\n"]}

package/components/shapes/rectangle.d.ts

@@ -0,0 +1,10 @@
+import type { RCXComponent, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export type RectangleProps = RCXPropsWithChildren<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    beginPath?: boolean;
+    style?: RCXStyleProp<RCXShapeStyle>;
+}>;
+export declare const Rectangle: RCXComponent<RectangleProps>;

package/components/shapes/rectangle.js

@@ -0,0 +1,20 @@
+import { useRenderAfterChildren, useRenderBeforeChildren, } from "../../hooks/use-render.js";
+import { applyFillAndStrokeStyles } from "../../utils/apply-fill-and-stroke-style.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+export const Rectangle = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { x, y, width, height, beginPath = true } = props;
+        renderingContext.ctx2d.save();
+        if (beginPath) {
+            renderingContext.ctx2d.beginPath();
+        }
+        renderingContext.ctx2d.rect(x, y, width, height);
+    });
+    useRenderAfterChildren((renderingContext) => {
+        applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));
+        renderingContext.ctx2d.restore();
+    });
+    return props.children;
+};
+Rectangle.displayName = 'Rectangle';
+//# sourceMappingURL=rectangle.js.map

package/components/shapes/rectangle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectangle.js","sourceRoot":"","sources":["../../../src/components/shapes/rectangle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAW9D,MAAM,CAAC,MAAM,SAAS,GAAiC,CAAC,KAAK,EAAE,EAAE;IAC/D,uBAAuB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC3C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAExD,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE9B,IAAI,SAAS,EAAE,CAAC;YACd,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACrC,CAAC;QAED,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,sBAAsB,CAAC,CAAC,gBAAgB,EAAE,EAAE;QAC1C,wBAAwB,CAAC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,QAAQ,CAAC;AACxB,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import {\n  useRenderAfterChildren,\n  useRenderBeforeChildren,\n} from '../../hooks/use-render.ts';\nimport type {\n  RCXComponent,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { applyFillAndStrokeStyles } from '../../utils/apply-fill-and-stroke-style.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\n\nexport type RectangleProps = RCXPropsWithChildren<{\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  beginPath?: boolean;\n  style?: RCXStyleProp<RCXShapeStyle>;\n}>;\n\nexport const Rectangle: RCXComponent<RectangleProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { x, y, width, height, beginPath = true } = props;\n\n    renderingContext.ctx2d.save();\n\n    if (beginPath) {\n      renderingContext.ctx2d.beginPath();\n    }\n\n    renderingContext.ctx2d.rect(x, y, width, height);\n  });\n\n  useRenderAfterChildren((renderingContext) => {\n    applyFillAndStrokeStyles(renderingContext, resolveStyles(props.style));\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return props.children;\n};\n\nRectangle.displayName = 'Rectangle';\n"]}

package/components/text/index.js

@@ -0,0 +1,2 @@
+export * from "./text.js";
+//# sourceMappingURL=index.js.map

package/components/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './text.ts';\n"]}

package/components/text/text.d.ts

@@ -0,0 +1,13 @@
+import type { RCXChildren, RCXComponent, RCXFontStyle, RCXPropsWithChildren, RCXShapeStyle, RCXStyleProp } from '../../types.ts';
+export interface TextStyle extends RCXShapeStyle, RCXFontStyle {
+    align?: CanvasTextAlign;
+    baseline?: CanvasTextBaseline;
+}
+export type TextProps = RCXPropsWithChildren<{
+    x: number;
+    y: number;
+    maxWidth?: number;
+    children?: RCXChildren;
+    style?: RCXStyleProp<TextStyle>;
+}>;
+export declare const Text: RCXComponent<TextProps>;

package/components/text/text.js

@@ -0,0 +1,78 @@
+import { useRenderBeforeChildren } from "../../hooks/use-render.js";
+import { isValidFillOrStrokeStyle } from "../../utils/is-valid-fill-or-stroke-style.js";
+import { isValidStrokeCap } from "../../utils/is-valid-stroke-cap.js";
+import { isValidStrokeJoin } from "../../utils/is-valid-stroke-join.js";
+import { resolveStyles } from "../../utils/resolve-styles.js";
+import { isArray } from "../../utils/type-guards.js";
+import { withPx } from "../../utils/with-px.js";
+const DEFAULT_FONT_STYLE = {
+    // font string
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 10,
+    fontFamily: 'sans-serif',
+    // other ctx2d properties
+    fontStretch: 'normal',
+    fontVariant: 'normal',
+    fontKerning: 'normal',
+};
+const getTextFromChildren = (children) => {
+    if (children === null ||
+        typeof children === 'boolean' ||
+        typeof children === 'undefined') {
+        return '';
+    }
+    if (typeof children === 'object') {
+        if (isArray(children)) {
+            return children.reduce((acc, child) => acc + getTextFromChildren(child), '');
+        }
+        return getTextFromChildren(children.props.children);
+    }
+    return children.toString();
+};
+export const Text = (props) => {
+    useRenderBeforeChildren((renderingContext) => {
+        const { x, y, maxWidth, children } = props;
+        const { fill, stroke, strokeWidth, strokeCap, strokeJoin, align, baseline, fontStyle = DEFAULT_FONT_STYLE.fontStyle, fontWeight = DEFAULT_FONT_STYLE.fontWeight, fontSize = DEFAULT_FONT_STYLE.fontSize, fontFamily = DEFAULT_FONT_STYLE.fontFamily, 
+        // other ctx2d properties
+        fontStretch = DEFAULT_FONT_STYLE.fontStretch, fontVariant = DEFAULT_FONT_STYLE.fontVariant, fontKerning = DEFAULT_FONT_STYLE.fontKerning, } = resolveStyles(props.style);
+        const text = getTextFromChildren(children);
+        renderingContext.ctx2d.save();
+        if (typeof align === 'string') {
+            renderingContext.ctx2d.textAlign = align;
+        }
+        if (typeof baseline === 'string') {
+            renderingContext.ctx2d.textBaseline = baseline;
+        }
+        renderingContext.ctx2d.font = [
+            fontStyle,
+            fontWeight,
+            withPx(fontSize),
+            fontFamily,
+        ].join(' ');
+        renderingContext.ctx2d.fontStretch = fontStretch;
+        renderingContext.ctx2d.fontVariantCaps = fontVariant;
+        renderingContext.ctx2d.fontKerning = fontKerning;
+        if (isValidFillOrStrokeStyle(fill)) {
+            renderingContext.ctx2d.fillStyle = fill;
+            renderingContext.ctx2d.fillText(text, x, y, maxWidth);
+        }
+        if (typeof strokeWidth === 'number') {
+            renderingContext.ctx2d.lineWidth = strokeWidth;
+        }
+        if (isValidStrokeCap(strokeCap)) {
+            renderingContext.ctx2d.lineCap = strokeCap;
+        }
+        if (isValidStrokeJoin(strokeJoin)) {
+            renderingContext.ctx2d.lineJoin = strokeJoin;
+        }
+        if (isValidFillOrStrokeStyle(stroke)) {
+            renderingContext.ctx2d.strokeStyle = stroke;
+            renderingContext.ctx2d.strokeText(text, x, y, maxWidth);
+        }
+        renderingContext.ctx2d.restore();
+    });
+    return null;
+};
+Text.displayName = 'Text';
+//# sourceMappingURL=text.js.map

package/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/components/text/text.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRenderBeforeChildren } from '../../hooks/use-render.ts';\nimport type {\n  RCXChildren,\n  RCXComponent,\n  RCXFontStyle,\n  RCXPropsWithChildren,\n  RCXShapeStyle,\n  RCXStyleProp,\n} from '../../types.ts';\nimport { isValidFillOrStrokeStyle } from '../../utils/is-valid-fill-or-stroke-style.ts';\nimport { isValidStrokeCap } from '../../utils/is-valid-stroke-cap.ts';\nimport { isValidStrokeJoin } from '../../utils/is-valid-stroke-join.ts';\nimport { resolveStyles } from '../../utils/resolve-styles.ts';\nimport { isArray } from '../../utils/type-guards.ts';\nimport { withPx } from '../../utils/with-px.ts';\n\nexport interface TextStyle extends RCXShapeStyle, RCXFontStyle {\n  align?: CanvasTextAlign;\n  baseline?: CanvasTextBaseline;\n}\n\nexport type TextProps = RCXPropsWithChildren<{\n  x: number;\n  y: number;\n  maxWidth?: number;\n  children?: RCXChildren;\n  style?: RCXStyleProp<TextStyle>;\n}>;\n\nconst DEFAULT_FONT_STYLE = {\n  // font string\n  fontStyle: 'normal',\n  fontWeight: 'normal',\n  fontSize: 10,\n  fontFamily: 'sans-serif',\n  // other ctx2d properties\n  fontStretch: 'normal',\n  fontVariant: 'normal',\n  fontKerning: 'normal',\n} satisfies Required<RCXFontStyle>;\n\nconst getTextFromChildren = (children: RCXChildren): string => {\n  if (\n    children === null ||\n    typeof children === 'boolean' ||\n    typeof children === 'undefined'\n  ) {\n    return '';\n  }\n\n  if (typeof children === 'object') {\n    if (isArray(children)) {\n      return children.reduce<string>(\n        (acc, child) => acc + getTextFromChildren(child),\n        ''\n      );\n    }\n\n    return getTextFromChildren(children.props.children);\n  }\n\n  return children.toString();\n};\n\nexport const Text: RCXComponent<TextProps> = (props) => {\n  useRenderBeforeChildren((renderingContext) => {\n    const { x, y, maxWidth, children } = props;\n    const {\n      fill,\n      stroke,\n      strokeWidth,\n      strokeCap,\n      strokeJoin,\n      align,\n      baseline,\n      fontStyle = DEFAULT_FONT_STYLE.fontStyle,\n      fontWeight = DEFAULT_FONT_STYLE.fontWeight,\n      fontSize = DEFAULT_FONT_STYLE.fontSize,\n      fontFamily = DEFAULT_FONT_STYLE.fontFamily,\n      // other ctx2d properties\n      fontStretch = DEFAULT_FONT_STYLE.fontStretch,\n      fontVariant = DEFAULT_FONT_STYLE.fontVariant,\n      fontKerning = DEFAULT_FONT_STYLE.fontKerning,\n    } = resolveStyles(props.style);\n\n    const text = getTextFromChildren(children);\n\n    renderingContext.ctx2d.save();\n\n    if (typeof align === 'string') {\n      renderingContext.ctx2d.textAlign = align;\n    }\n\n    if (typeof baseline === 'string') {\n      renderingContext.ctx2d.textBaseline = baseline;\n    }\n\n    renderingContext.ctx2d.font = [\n      fontStyle,\n      fontWeight,\n      withPx(fontSize),\n      fontFamily,\n    ].join(' ');\n\n    renderingContext.ctx2d.fontStretch = fontStretch;\n    renderingContext.ctx2d.fontVariantCaps = fontVariant;\n    renderingContext.ctx2d.fontKerning = fontKerning;\n\n    if (isValidFillOrStrokeStyle(fill)) {\n      renderingContext.ctx2d.fillStyle = fill;\n      renderingContext.ctx2d.fillText(text, x, y, maxWidth);\n    }\n\n    if (typeof strokeWidth === 'number') {\n      renderingContext.ctx2d.lineWidth = strokeWidth;\n    }\n\n    if (isValidStrokeCap(strokeCap)) {\n      renderingContext.ctx2d.lineCap = strokeCap;\n    }\n\n    if (isValidStrokeJoin(strokeJoin)) {\n      renderingContext.ctx2d.lineJoin = strokeJoin;\n    }\n\n    if (isValidFillOrStrokeStyle(stroke)) {\n      renderingContext.ctx2d.strokeStyle = stroke;\n      renderingContext.ctx2d.strokeText(text, x, y, maxWidth);\n    }\n\n    renderingContext.ctx2d.restore();\n  });\n\n  return null;\n};\n\nText.displayName = 'Text';\n"]}

package/components/transform/index.js

@@ -0,0 +1,4 @@
+export * from "./translate.js";
+export * from "./rotate.js";
+export * from "./scale.js";
+//# sourceMappingURL=index.js.map

package/components/transform/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/transform/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC","sourcesContent":["export * from './translate.ts';\nexport * from './rotate.ts';\nexport * from './scale.ts';\n"]}

package/components/transform/rotate.d.ts

@@ -0,0 +1,5 @@
+import { RCXComponent, RCXPropsWithChildren } from '../../types.ts';
+export type RotateProps = RCXPropsWithChildren<{
+    rotation: number;
+}>;
+export declare const Rotate: RCXComponent<RotateProps>;