@openpawlabs/diy-guides-ui 1.0.0

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom/vitest";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/test/smoke.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=smoke.test.d.ts.map

package/dist/test/smoke.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smoke.test.d.ts","sourceRoot":"","sources":["../../src/test/smoke.test.ts"],"names":[],"mappings":""}

package/dist/types/callout.d.ts

@@ -0,0 +1,13 @@
+import { type GuideColor } from "./colors";
+/**
+ * Callout types express safety and informational tone for {@link Callout}.
+ * Each type maps to a {@link GuideColor} accent from the shared palette.
+ */
+export type CalloutType = "note" | "info" | "tip" | "caution" | "danger";
+/** Callout type → guide palette accent (drives border, background tint, and icon). */
+export declare const calloutTypeColor: Record<CalloutType, GuideColor>;
+/** Resolved hex accent for a callout type. */
+export declare function calloutTypeHex(type: CalloutType): string;
+/** Callout type → default human-readable title. */
+export declare const calloutTypeLabel: Record<CalloutType, string>;
+//# sourceMappingURL=callout.d.ts.map

package/dist/types/callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/types/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAEnD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAM5D,CAAC;AAEF,8CAA8C;AAC9C,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAExD;AAED,mDAAmD;AACnD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAMxD,CAAC"}

package/dist/types/callout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=callout.test.d.ts.map

package/dist/types/callout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.test.d.ts","sourceRoot":"","sources":["../../src/types/callout.test.ts"],"names":[],"mappings":""}

package/dist/types/colors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Fixed palette for visually linking step bullet dots to image annotation markers.
+ * Each name maps to a hex value applied directly via inline styles.
+ */
+export declare const COLORS: {
+    readonly GREY: "#7A8090";
+    readonly RED: "#E7320D";
+    readonly ORANGE: "#FF850A";
+    readonly YELLOW: "#F5E429";
+    readonly GREEN: "#14CC76";
+    readonly LIGHT_BLUE: "#20B3E9";
+    readonly BLUE: "#1738DE";
+    readonly MAGENTA: "#D945B1";
+};
+export type GuideColor = keyof typeof COLORS;
+/** Convert a `#rrggbb` hex string to `rgba(r, g, b, alpha)`. */
+export declare function hexToRgba(hex: string, alpha: number): string;
+/** Pick a readable foreground for a solid-color marker pin. */
+export declare function markerTextColor(hex: string): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/types/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/types/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,gEAAgE;AAChE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAM5D;AAED,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOnD"}

package/dist/types/colors.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=colors.test.d.ts.map

package/dist/types/colors.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.test.d.ts","sourceRoot":"","sources":["../../src/types/colors.test.ts"],"names":[],"mappings":""}

package/dist/utils/mediaCrop.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+/** Top-left and width of a 4:3 crop rect in intrinsic source pixels. Height is derived. */
+export interface MediaDisplayRegion {
+    /** Left edge in pixels from the source left. */
+    x: number;
+    /** Top edge in pixels from the source top. */
+    y: number;
+    /** Width in source pixels; height is computed as `round(width × 3 / 4)`. */
+    width: number;
+}
+export declare const DISPLAY_REGION_ASPECT: number;
+/** Height in source pixels for a 4:3 region with the given width. */
+export declare function displayRegionHeight(width: number): number;
+/**
+ * CSS styles to show a 4:3 source-pixel region scaled to fill a 4:3 frame.
+ * Returns `null` when the region is invalid for the given source dimensions.
+ */
+export declare function getDisplayRegionStyles(region: MediaDisplayRegion, sourceWidth: number, sourceHeight: number, frameWidth: number, frameHeight: number): CSSProperties | null;
+//# sourceMappingURL=mediaCrop.d.ts.map

package/dist/utils/mediaCrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaCrop.d.ts","sourceRoot":"","sources":["../../src/utils/mediaCrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,2FAA2F;AAC3F,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,CAAC,EAAE,MAAM,CAAC;IACV,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;IACV,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,qEAAqE;AACrE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAgBD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,aAAa,GAAG,IAAI,CAqBtB"}

package/dist/utils/mediaCrop.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mediaCrop.test.d.ts.map

package/dist/utils/mediaCrop.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaCrop.test.d.ts","sourceRoot":"","sources":["../../src/utils/mediaCrop.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@openpawlabs/diy-guides-ui",
+  "version": "1.0.0",
+  "description": "React UI library for building open-source, iFixit-style step-by-step diy guides",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/diy-guides-ui.cjs",
+  "module": "./dist/diy-guides-ui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/diy-guides-ui.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/diy-guides-ui.cjs"
+      }
+    },
+    "./styles": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "online-3d-viewer": "^0.18.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.28.0",
+    "@heroui/react": "^3.0.0",
+    "@heroui/styles": "^3.0.0",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/addon-links": "^9.1.20",
+    "@storybook/addon-themes": "^9.0.0",
+    "@storybook/react-vite": "^9.0.0",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.8",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.2",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.0.0",
+    "globals": "^16.2.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.0",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "online-3d-viewer": "^0.18.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && tsc -b tsconfig.app.json",
+    "build:storybook": "storybook build -o storybook-static",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -b --noEmit",
+    "lint": "eslint ."
+  }
+}