@agot/card-preview 1.0.0 → 1.0.2

package/README.md

@@ -1,16 +1,31 @@
-# @throneteki-playtesting/card-preview
+# @agot/card-preview
 
-A lightweight React component library for rendering **A Game of Thrones LCG 2nd Edition** cards. 
-
-This library is installed directly from GitHub.
+A React component library for rendering **A Game of Thrones LCG 2nd Edition** cards. It requires data in an `IRenderCard` format.
 
 ## 📦 Installation
 
-To add this package to your project, run the following command:
-
 ```bash
-# Install the latest from the master branch:
-npm install throneteki-playtesting/got-automation#master:@agotCardPreview
+npm install @agot/card-preview
+```
+
+### Peer Dependencies
+Ensure your host project has the following installed:
+* **react** (^19.1.0)
+
+---
+
+## 🛠 Usage
+
+Import the `CardPreview` component and provide an `IRenderCard` to display the corresponding card image and data.
+
+```tsx
+import { CardPreview } from '@agot/card-preview';
 
-# Install a specific version (Recommended for stability):
-npm install throneteki-playtesting/got-automation#v1.1.0:@agotCardPreview
+const App = () => {
+  return (
+    <CardPreview 
+      card={{ ... }}
+    />
+  );
+};
+```

package/dist/index.d.mts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type DeepPartial<T> = T extends (infer U)[] ? DeepPartial<U>[] | undefined : T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -71,8 +72,30 @@ type CardComponentProps = Omit<BaseElementProps, "children"> & {
     scale?: number;
     orientation?: "horizontal" | "vertical";
     rounded?: boolean;
+    classNames?: {
+        wrapper?: string;
+        inner?: string;
+    };
+    styles?: {
+        wrapper?: CSSProperties;
+        inner?: CSSProperties;
+    };
 } & React.DOMAttributes<HTMLDivElement>;
 
-declare const CardPreview: ({ card, scale, orientation, rounded, className, style, ...props }: CardComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardPreview: react.MemoExoticComponent<({ card, scale, orientation, rounded, className, style, ...props }: CardComponentProps) => react_jsx_runtime.JSX.Element>;
+declare const CardBlank: react.MemoExoticComponent<({ children, scale, orientation, rounded, className, classNames: classGroups, style, styles: styleGroups, ...props }: BaseElementProps & {
+    classNames?: {
+        wrapper?: string;
+        inner?: string;
+    };
+    styles?: {
+        wrapper?: react.CSSProperties;
+        inner?: react.CSSProperties;
+    };
+    scale?: number;
+    orientation?: "vertical" | "horizontal";
+    rotated?: boolean;
+    rounded?: boolean;
+} & react.DOMAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element>;
 
-export { CardPreview as default };
+export { CardBlank, CardPreview };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type DeepPartial<T> = T extends (infer U)[] ? DeepPartial<U>[] | undefined : T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -71,8 +72,30 @@ type CardComponentProps = Omit<BaseElementProps, "children"> & {
     scale?: number;
     orientation?: "horizontal" | "vertical";
     rounded?: boolean;
+    classNames?: {
+        wrapper?: string;
+        inner?: string;
+    };
+    styles?: {
+        wrapper?: CSSProperties;
+        inner?: CSSProperties;
+    };
 } & React.DOMAttributes<HTMLDivElement>;
 
-declare const CardPreview: ({ card, scale, orientation, rounded, className, style, ...props }: CardComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardPreview: react.MemoExoticComponent<({ card, scale, orientation, rounded, className, style, ...props }: CardComponentProps) => react_jsx_runtime.JSX.Element>;
+declare const CardBlank: react.MemoExoticComponent<({ children, scale, orientation, rounded, className, classNames: classGroups, style, styles: styleGroups, ...props }: BaseElementProps & {
+    classNames?: {
+        wrapper?: string;
+        inner?: string;
+    };
+    styles?: {
+        wrapper?: react.CSSProperties;
+        inner?: react.CSSProperties;
+    };
+    scale?: number;
+    orientation?: "vertical" | "horizontal";
+    rotated?: boolean;
+    rounded?: boolean;
+} & react.DOMAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element>;
 
-export { CardPreview as default };
+export { CardBlank, CardPreview };

package/dist/index.js

@@ -30,12 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  default: () => index_default
+  CardBlank: () => CardBlank,
+  CardPreview: () => CardPreview
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/cardComponents.tsx
-var import_classnames2 = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"));
 
 // ../common/models/cards.ts
 var challengeIcons = ["military", "intrigue", "power"];
@@ -55,6 +56,14 @@ var import_react = require("react");
 // src/utils.ts
 var px = (value) => `${value}px`;
 var em = (value) => `${value}em`;
+var BASE_WIDTH = 240;
+var BASE_HEIGHT = 333;
+var gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+var divisor = gcd(BASE_WIDTH, BASE_HEIGHT);
+var ASPECT_RATIO = {
+  width: BASE_WIDTH / divisor,
+  height: BASE_HEIGHT / divisor
+};
 
 // src/components/autoSize.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -102,9 +111,6 @@ var autoSize_default = AutoSize;
 // src/components/cardComponents.tsx
 var import_react2 = require("react");
 
-// ../client/src/components/thronesIcon.tsx
-var import_classnames = __toESM(require("classnames"), 1);
-
 // ../common/utils.ts
 var thronesColors = {
   "baratheon": "#e3d852",
@@ -146,63 +152,92 @@ var thronesIcons = {
   agenda: "\uE611"
 };
 
-// ../client/src/components/thronesIcon.tsx
+// src/components/thronesIcon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ThronesIcon = ({ name, className, style, visible = true }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_classnames.default)("font-thronesdb leading-none", { invisible: !visible, "leading-relaxed": name === "unique" }, className), style, children: thronesIcons[name] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className, style: {
+    fontFamily: "thronesdb",
+    ...!visible && { visibility: "hidden" },
+    lineHeight: name === "unique" ? 1.625 : 1,
+    ...style
+  }, children: thronesIcons[name] });
 };
 var thronesIcon_default = ThronesIcon;
 
 // src/components/cardComponents.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var CardWrapper = (0, import_react2.memo)(({ children, scale = 1, orientation = "vertical", rounded = false, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
+  const wrapperRef = (0, import_react2.useRef)(null);
+  const [renderedWidth, setRenderedWidth] = (0, import_react2.useState)(BASE_WIDTH * scale);
+  (0, import_react2.useLayoutEffect)(() => {
+    const element = wrapperRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        if (width > 0) {
+          setRenderedWidth(width * scale);
+        }
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [scale]);
+  const dynamicScale = (0, import_react2.useMemo)(() => {
+    const baseWidth = orientation === "horizontal" ? BASE_HEIGHT : BASE_WIDTH;
+    return renderedWidth / baseWidth;
+  }, [orientation, renderedWidth]);
+  const aspectRatio = (0, import_react2.useMemo)(() => orientation === "horizontal" ? `${ASPECT_RATIO.height}/${ASPECT_RATIO.width}` : `${ASPECT_RATIO.width}/${ASPECT_RATIO.height}`, [orientation]);
+  const wrapperStyle = (0, import_react2.useMemo)(() => ({
+    overflow: "hidden",
+    position: "relative",
+    aspectRatio,
+    width: "100%",
+    height: "100%",
+    ...rounded && { borderRadius: px(12 * dynamicScale) },
+    ...style,
+    ...styleGroups?.wrapper
+  }), [aspectRatio, dynamicScale, rounded, style, styleGroups?.wrapper]);
+  const innerStyle = (0, import_react2.useMemo)(() => ({
+    width: px(BASE_WIDTH),
+    height: px(BASE_HEIGHT),
+    transform: `scale(${dynamicScale})`,
+    transformOrigin: "top left",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    ...styleGroups?.inner
+  }), [dynamicScale, styleGroups?.inner]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: wrapperRef, className: (0, import_classnames.default)(className, classGroups?.wrapper), style: wrapperStyle, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classGroups?.inner, style: innerStyle, children }) });
+});
 var defaultOrientation = (type) => type === "plot" ? "horizontal" : "vertical";
-var Card = (0, import_react2.memo)(({ children, card, orientation = defaultOrientation(card.type), scale = 1, rounded = true, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
-  const width = 240;
-  const height = 333;
-  const wrapperWidth = orientation === "horizontal" ? height : width;
-  const wrapperHeight = orientation === "horizontal" ? width : height;
-  const innerWidth = card.type === "plot" ? height : width;
-  const innerHeight = card.type === "plot" ? width : height;
-  const rotate = orientation !== defaultOrientation(card.type);
-  const innerStyle = (0, import_react2.useMemo)(() => {
-    const style2 = {
-      borderColor: card.faction ? thronesColors[card.faction] : "white",
-      background: "white",
-      color: "black",
-      fontFamily: "Open Sans, sans-serif",
-      ...scale !== 1 && { scale },
-      ...(scale !== 1 || rotate) && { transformOrigin: "top left" },
-      ...rotate && { position: "relative", rotate: "270deg", top: "100%" },
-      ...styleGroups?.inner
-    };
-    return style2;
-  }, [card.faction, rotate, scale, styleGroups?.inner]);
+var Card = (0, import_react2.memo)(({ children, card, orientation = defaultOrientation(card.type), rounded = true, scale = 1, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
+  const innerWidth = card.type === "plot" ? BASE_HEIGHT : BASE_WIDTH;
+  const innerHeight = card.type === "plot" ? BASE_WIDTH : BASE_HEIGHT;
+  const rotated = orientation !== defaultOrientation(card.type);
+  const innerStyle = (0, import_react2.useMemo)(() => ({
+    width: px(innerWidth),
+    height: px(innerHeight),
+    borderWidth: px(12),
+    borderColor: card.faction ? thronesColors[card.faction] : "white",
+    background: "white",
+    color: "black",
+    fontFamily: "Open Sans, sans-serif",
+    ...rotated && { rotate: "270deg", top: "100%" },
+    ...styleGroups?.inner
+  }), [card.faction, innerHeight, innerWidth, rotated, styleGroups?.inner]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
+    CardWrapper,
     {
-      className: (0, import_classnames2.default)(className, classGroups?.wrapper),
-      style: {
-        overflow: "hidden",
-        width: px(wrapperWidth * scale),
-        height: px(wrapperHeight * scale),
-        ...rounded && { borderRadius: px(12) },
-        ...style,
-        ...styleGroups?.wrapper
-      },
+      className,
+      style,
+      classNames: classGroups,
+      styles: { wrapper: styleGroups?.wrapper, inner: innerStyle },
+      rounded,
+      scale,
+      orientation,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
-        {
-          className: classGroups?.inner,
-          style: {
-            width: px(innerWidth),
-            height: px(innerHeight),
-            borderWidth: px(12),
-            ...innerStyle
-          },
-          children
-        }
-      )
+      children
     }
   );
 });
@@ -504,8 +539,9 @@ var Watermark = (0, import_react2.memo)(({ children: watermark, className, style
 });
 
 // src/cardtypes/character.tsx
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Character = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Character = (0, import_react3.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", position: "relative", flexDirection: "column", width: px(35) }, children: [
@@ -544,12 +580,13 @@ var Character = ({ card, scale, orientation, rounded, className, style, ...props
       ] })
     ] })
   ] });
-};
+});
 var character_default = Character;
 
 // src/cardtypes/location.tsx
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Location = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Location = (0, import_react4.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "row" } }, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", display: "flex", flexDirection: "column", width: px(35) }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Cost, { children: card.cost }),
@@ -583,12 +620,13 @@ var Location = ({ card, scale, orientation, rounded, className, style, ...props
       ] })
     ] })
   ] });
-};
+});
 var location_default = Location;
 
 // src/cardtypes/attachment.tsx
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Attachment = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Attachment = (0, import_react5.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
@@ -618,12 +656,13 @@ var Attachment = ({ card, scale, orientation, rounded, className, style, ...prop
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Faction, { children: card.faction })
     ] })
   ] });
-};
+});
 var attachment_default = Attachment;
 
 // src/cardtypes/event.tsx
+var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Event = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Event = (0, import_react6.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
@@ -652,12 +691,13 @@ var Event = ({ card, scale, orientation, rounded, className, style, ...props })
       ] })
     ] })
   ] });
-};
+});
 var event_default = Event;
 
 // src/cardtypes/plot.tsx
+var import_react7 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Plot = (0, import_react7.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { scale, card, orientation, rounded, className, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", height: px(40) }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: px(4), width: px(110) }, children: [
@@ -687,12 +727,13 @@ var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) =
       ] })
     ] })
   ] });
-};
+});
 var plot_default = Plot;
 
 // src/cardtypes/agenda.tsx
+var import_react8 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Agenda = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Agenda = (0, import_react8.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Name, { children: card.name }),
@@ -710,14 +751,14 @@ var Agenda = ({ card, scale, orientation, rounded, className, style, ...props })
       ] })
     ] })
   ] });
-};
+});
 var agenda_default = Agenda;
 
 // src/index.tsx
-var import_react3 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var CardPreview = ({ card, scale, orientation, rounded, className, style, ...props }) => {
-  const CardComponent = (0, import_react3.useMemo)(() => {
+var CardPreview = (0, import_react9.memo)(({ card, scale, orientation, rounded, className, style, ...props }) => {
+  const CardComponent = (0, import_react9.useMemo)(() => {
     switch (card.type) {
       case "character":
         return character_default;
@@ -736,5 +777,10 @@ var CardPreview = ({ card, scale, orientation, rounded, className, style, ...pro
     }
   }, [card.type]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardComponent, { card, scale, orientation, rounded, className, style, ...props });
-};
-var index_default = CardPreview;
+});
+var CardBlank = CardWrapper;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardBlank,
+  CardPreview
+});

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/cardComponents.tsx
-import classNames2 from "classnames";
+import classNames from "classnames";
 
 // ../common/models/cards.ts
 var challengeIcons = ["military", "intrigue", "power"];
@@ -19,6 +19,14 @@ import { useEffect, useRef } from "react";
 // src/utils.ts
 var px = (value) => `${value}px`;
 var em = (value) => `${value}em`;
+var BASE_WIDTH = 240;
+var BASE_HEIGHT = 333;
+var gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+var divisor = gcd(BASE_WIDTH, BASE_HEIGHT);
+var ASPECT_RATIO = {
+  width: BASE_WIDTH / divisor,
+  height: BASE_HEIGHT / divisor
+};
 
 // src/components/autoSize.tsx
 import { jsx } from "react/jsx-runtime";
@@ -64,10 +72,7 @@ var AutoSize = ({ children, className, style, height, rate = 0.01, minimum = 0.4
 var autoSize_default = AutoSize;
 
 // src/components/cardComponents.tsx
-import { memo, useMemo } from "react";
-
-// ../client/src/components/thronesIcon.tsx
-import classNames from "classnames";
+import { memo, useLayoutEffect, useMemo, useRef as useRef2, useState } from "react";
 
 // ../common/utils.ts
 var thronesColors = {
@@ -110,63 +115,92 @@ var thronesIcons = {
   agenda: "\uE611"
 };
 
-// ../client/src/components/thronesIcon.tsx
+// src/components/thronesIcon.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ThronesIcon = ({ name, className, style, visible = true }) => {
-  return /* @__PURE__ */ jsx2("span", { className: classNames("font-thronesdb leading-none", { invisible: !visible, "leading-relaxed": name === "unique" }, className), style, children: thronesIcons[name] });
+  return /* @__PURE__ */ jsx2("span", { className, style: {
+    fontFamily: "thronesdb",
+    ...!visible && { visibility: "hidden" },
+    lineHeight: name === "unique" ? 1.625 : 1,
+    ...style
+  }, children: thronesIcons[name] });
 };
 var thronesIcon_default = ThronesIcon;
 
 // src/components/cardComponents.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CardWrapper = memo(({ children, scale = 1, orientation = "vertical", rounded = false, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
+  const wrapperRef = useRef2(null);
+  const [renderedWidth, setRenderedWidth] = useState(BASE_WIDTH * scale);
+  useLayoutEffect(() => {
+    const element = wrapperRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        if (width > 0) {
+          setRenderedWidth(width * scale);
+        }
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [scale]);
+  const dynamicScale = useMemo(() => {
+    const baseWidth = orientation === "horizontal" ? BASE_HEIGHT : BASE_WIDTH;
+    return renderedWidth / baseWidth;
+  }, [orientation, renderedWidth]);
+  const aspectRatio = useMemo(() => orientation === "horizontal" ? `${ASPECT_RATIO.height}/${ASPECT_RATIO.width}` : `${ASPECT_RATIO.width}/${ASPECT_RATIO.height}`, [orientation]);
+  const wrapperStyle = useMemo(() => ({
+    overflow: "hidden",
+    position: "relative",
+    aspectRatio,
+    width: "100%",
+    height: "100%",
+    ...rounded && { borderRadius: px(12 * dynamicScale) },
+    ...style,
+    ...styleGroups?.wrapper
+  }), [aspectRatio, dynamicScale, rounded, style, styleGroups?.wrapper]);
+  const innerStyle = useMemo(() => ({
+    width: px(BASE_WIDTH),
+    height: px(BASE_HEIGHT),
+    transform: `scale(${dynamicScale})`,
+    transformOrigin: "top left",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    ...styleGroups?.inner
+  }), [dynamicScale, styleGroups?.inner]);
+  return /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: classNames(className, classGroups?.wrapper), style: wrapperStyle, ...props, children: /* @__PURE__ */ jsx3("div", { className: classGroups?.inner, style: innerStyle, children }) });
+});
 var defaultOrientation = (type) => type === "plot" ? "horizontal" : "vertical";
-var Card = memo(({ children, card, orientation = defaultOrientation(card.type), scale = 1, rounded = true, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
-  const width = 240;
-  const height = 333;
-  const wrapperWidth = orientation === "horizontal" ? height : width;
-  const wrapperHeight = orientation === "horizontal" ? width : height;
-  const innerWidth = card.type === "plot" ? height : width;
-  const innerHeight = card.type === "plot" ? width : height;
-  const rotate = orientation !== defaultOrientation(card.type);
-  const innerStyle = useMemo(() => {
-    const style2 = {
-      borderColor: card.faction ? thronesColors[card.faction] : "white",
-      background: "white",
-      color: "black",
-      fontFamily: "Open Sans, sans-serif",
-      ...scale !== 1 && { scale },
-      ...(scale !== 1 || rotate) && { transformOrigin: "top left" },
-      ...rotate && { position: "relative", rotate: "270deg", top: "100%" },
-      ...styleGroups?.inner
-    };
-    return style2;
-  }, [card.faction, rotate, scale, styleGroups?.inner]);
+var Card = memo(({ children, card, orientation = defaultOrientation(card.type), rounded = true, scale = 1, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
+  const innerWidth = card.type === "plot" ? BASE_HEIGHT : BASE_WIDTH;
+  const innerHeight = card.type === "plot" ? BASE_WIDTH : BASE_HEIGHT;
+  const rotated = orientation !== defaultOrientation(card.type);
+  const innerStyle = useMemo(() => ({
+    width: px(innerWidth),
+    height: px(innerHeight),
+    borderWidth: px(12),
+    borderColor: card.faction ? thronesColors[card.faction] : "white",
+    background: "white",
+    color: "black",
+    fontFamily: "Open Sans, sans-serif",
+    ...rotated && { rotate: "270deg", top: "100%" },
+    ...styleGroups?.inner
+  }), [card.faction, innerHeight, innerWidth, rotated, styleGroups?.inner]);
   return /* @__PURE__ */ jsx3(
-    "div",
+    CardWrapper,
     {
-      className: classNames2(className, classGroups?.wrapper),
-      style: {
-        overflow: "hidden",
-        width: px(wrapperWidth * scale),
-        height: px(wrapperHeight * scale),
-        ...rounded && { borderRadius: px(12) },
-        ...style,
-        ...styleGroups?.wrapper
-      },
+      className,
+      style,
+      classNames: classGroups,
+      styles: { wrapper: styleGroups?.wrapper, inner: innerStyle },
+      rounded,
+      scale,
+      orientation,
       ...props,
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: classGroups?.inner,
-          style: {
-            width: px(innerWidth),
-            height: px(innerHeight),
-            borderWidth: px(12),
-            ...innerStyle
-          },
-          children
-        }
-      )
+      children
     }
   );
 });
@@ -468,8 +502,9 @@ var Watermark = memo(({ children: watermark, className, style }) => {
 });
 
 // src/cardtypes/character.tsx
+import { memo as memo2 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Character = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Character = memo2(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs2(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ jsxs2("div", { style: { display: "flex", position: "relative", flexDirection: "column", width: px(35) }, children: [
@@ -508,12 +543,13 @@ var Character = ({ card, scale, orientation, rounded, className, style, ...props
       ] })
     ] })
   ] });
-};
+});
 var character_default = Character;
 
 // src/cardtypes/location.tsx
+import { memo as memo3 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var Location = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Location = memo3(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs3(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "row" } }, style, ...props, children: [
     /* @__PURE__ */ jsxs3("div", { style: { position: "relative", display: "flex", flexDirection: "column", width: px(35) }, children: [
       /* @__PURE__ */ jsx5(Cost, { children: card.cost }),
@@ -547,12 +583,13 @@ var Location = ({ card, scale, orientation, rounded, className, style, ...props
       ] })
     ] })
   ] });
-};
+});
 var location_default = Location;
 
 // src/cardtypes/attachment.tsx
+import { memo as memo4 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var Attachment = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Attachment = memo4(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs4(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
@@ -582,12 +619,13 @@ var Attachment = ({ card, scale, orientation, rounded, className, style, ...prop
       /* @__PURE__ */ jsx6(Faction, { children: card.faction })
     ] })
   ] });
-};
+});
 var attachment_default = Attachment;
 
 // src/cardtypes/event.tsx
+import { memo as memo5 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var Event = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Event = memo5(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs5(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexGrow: 1 }, children: [
       /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
@@ -616,12 +654,13 @@ var Event = ({ card, scale, orientation, rounded, className, style, ...props })
       ] })
     ] })
   ] });
-};
+});
 var event_default = Event;
 
 // src/cardtypes/plot.tsx
+import { memo as memo6 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Plot = memo6(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs6(Card, { scale, card, orientation, rounded, className, style, ...props, children: [
     /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", height: px(40) }, children: [
       /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: px(4), width: px(110) }, children: [
@@ -651,12 +690,13 @@ var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) =
       ] })
     ] })
   ] });
-};
+});
 var plot_default = Plot;
 
 // src/cardtypes/agenda.tsx
+import { memo as memo7 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var Agenda = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var Agenda = memo7(({ card, scale, orientation, rounded, className, style, ...props }) => {
   return /* @__PURE__ */ jsxs7(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
     /* @__PURE__ */ jsxs7("div", { children: [
       /* @__PURE__ */ jsx9(Name, { children: card.name }),
@@ -674,13 +714,13 @@ var Agenda = ({ card, scale, orientation, rounded, className, style, ...props })
       ] })
     ] })
   ] });
-};
+});
 var agenda_default = Agenda;
 
 // src/index.tsx
-import { useMemo as useMemo2 } from "react";
+import { memo as memo8, useMemo as useMemo2 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var CardPreview = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+var CardPreview = memo8(({ card, scale, orientation, rounded, className, style, ...props }) => {
   const CardComponent = useMemo2(() => {
     switch (card.type) {
       case "character":
@@ -700,8 +740,9 @@ var CardPreview = ({ card, scale, orientation, rounded, className, style, ...pro
     }
   }, [card.type]);
   return /* @__PURE__ */ jsx10(CardComponent, { card, scale, orientation, rounded, className, style, ...props });
-};
-var index_default = CardPreview;
+});
+var CardBlank = CardWrapper;
 export {
-  index_default as default
+  CardBlank,
+  CardPreview
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agot/card-preview",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Stephen Patane",
   "license": "ISC",
   "description": "A React component library for rendering \"A Game of Thrones LCG 2nd Edition\" cards.",
@@ -13,6 +13,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsup src/index.tsx --format esm,cjs --dts --out-dir dist --clean",
+    "watch": "tsup src/index.tsx --format esm,cjs --dts --out-dir dist --clean --watch",
     "prepublishOnly": "npm run build"
   },
   "keywords": [],