hpo-react-visualizer 0.0.1

package/src/__tests__/renderOrder.test.tsx

@@ -0,0 +1,146 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { HpoVisualizer } from "../HpoVisualizer";
+import type { OrganId } from "../types";
+
+describe("HpoVisualizer rendering order", () => {
+  /**
+   * Helper function to get rendered organ IDs in DOM order.
+   * OrganSvg elements are now <svg> elements with aria-label attribute.
+   * Only includes visible organs (opacity !== 0).
+   */
+  const getRenderedOrganOrder = (container: HTMLElement): string[] => {
+    // Find all OrganSvg elements (they are nested svg elements with aria-label)
+    // Exclude the root svg which has aria-label="Human organ visualizer"
+    const organElements = container.querySelectorAll(
+      "svg[aria-label]:not([aria-label='Human organ visualizer'])",
+    );
+    return Array.from(organElements)
+      .filter((el) => {
+        // Filter out hidden organs (opacity: 0)
+        // OrganSvg sets opacity as an attribute, not a style property
+        const opacity = el.getAttribute("opacity");
+        return opacity !== "0";
+      })
+      .map((el) => el.getAttribute("aria-label") || "");
+  };
+
+  /**
+   * Helper function to get z-index of an organ element
+   */
+  const getOrganZIndex = (container: HTMLElement, organId: string): number => {
+    const organElement = container.querySelector(`svg[aria-label="${organId}"]`) as HTMLElement;
+    if (!organElement) return -1;
+    const style = organElement.style.zIndex;
+    return style ? parseInt(style, 10) : 0;
+  };
+
+  it("should render organs in ORGAN_POSITIONS key order regardless of organs array order", () => {
+    // Provide organs in reverse alphabetical order
+    const organs: { id: OrganId }[] = [
+      { id: "voice" },
+      { id: "thoracicCavity" },
+      { id: "lung" },
+      { id: "heart" },
+      { id: "head" },
+      { id: "eye" },
+      { id: "ear" },
+    ];
+
+    const { container } = render(<HpoVisualizer organs={organs} />);
+
+    const renderedOrder = getRenderedOrganOrder(container);
+
+    // ORGAN_RENDER_ORDER starts with thoracicCavity -> lung -> ... -> head -> eye -> ear -> voice
+    // Expected order should follow ORGAN_RENDER_ORDER for the given organs
+    expect(renderedOrder).toEqual([
+      "thoracicCavity",
+      "lung",
+      "heart",
+      "head",
+      "eye",
+      "ear",
+      "voice",
+    ]);
+  });
+
+  it("should give selectedOrgan higher z-index to appear on top", () => {
+    const organs: { id: OrganId }[] = [
+      { id: "head" },
+      { id: "eye" },
+      { id: "ear" },
+      { id: "lung" },
+      { id: "heart" },
+    ];
+
+    // Select 'head'
+    const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="head" />);
+
+    // 'head' should have higher z-index since it's selected
+    expect(getOrganZIndex(container, "head")).toBe(1);
+    // Other organs should have z-index 0
+    expect(getOrganZIndex(container, "lung")).toBe(0);
+    expect(getOrganZIndex(container, "heart")).toBe(0);
+    expect(getOrganZIndex(container, "eye")).toBe(0);
+    expect(getOrganZIndex(container, "ear")).toBe(0);
+  });
+
+  it("should give selectedOrgan higher z-index even when it would normally be in the middle", () => {
+    const organs: { id: OrganId }[] = [
+      { id: "head" },
+      { id: "lung" },
+      { id: "heart" },
+      { id: "digestive" },
+      { id: "kidney" },
+    ];
+
+    // Select 'heart' which is in the middle of ORGAN_POSITIONS order
+    const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="heart" />);
+
+    // 'heart' should have higher z-index
+    expect(getOrganZIndex(container, "heart")).toBe(1);
+    // Other organs should have z-index 0
+    expect(getOrganZIndex(container, "lung")).toBe(0);
+    expect(getOrganZIndex(container, "digestive")).toBe(0);
+    expect(getOrganZIndex(container, "kidney")).toBe(0);
+    expect(getOrganZIndex(container, "head")).toBe(0);
+  });
+
+  it("should render all organs in ORGAN_RENDER_ORDER (no reordering for selection)", () => {
+    const organs: { id: OrganId }[] = [{ id: "head" }, { id: "eye" }, { id: "ear" }];
+
+    const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="eye" />);
+
+    const renderedOrder = getRenderedOrganOrder(container);
+
+    // All organs should be rendered in ORGAN_RENDER_ORDER, not reordered
+    expect(renderedOrder).toEqual(["head", "eye", "ear"]);
+    // 'eye' has higher z-index because it's selected
+    expect(getOrganZIndex(container, "eye")).toBe(1);
+  });
+
+  it("should not render selectedOrgan if it is not in organs array", () => {
+    const organs: { id: OrganId }[] = [{ id: "head" }, { id: "eye" }];
+
+    // Select 'heart' which is not in the organs array
+    const { container } = render(<HpoVisualizer organs={organs} selectedOrgan="heart" />);
+
+    const renderedOrder = getRenderedOrganOrder(container);
+
+    // 'heart' should not be rendered since it's not in the organs array
+    expect(renderedOrder).toEqual(["head", "eye"]);
+    expect(renderedOrder).not.toContain("heart");
+  });
+
+  it("should maintain correct order with visibleOrgans prop", () => {
+    // Using visibleOrgans instead of organs
+    const visibleOrgans: OrganId[] = ["kidney", "heart", "lung", "head"];
+
+    const { container } = render(<HpoVisualizer visibleOrgans={visibleOrgans} />);
+
+    const renderedOrder = getRenderedOrganOrder(container);
+
+    // Should follow ORGAN_RENDER_ORDER: lung, heart, kidney, head
+    expect(renderedOrder).toEqual(["lung", "heart", "kidney", "head"]);
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/src/constants.ts

@@ -0,0 +1,158 @@
+import type { ColorName, OrganId, StrictColorPalette } from "./types";
+
+/**
+ * All supported organ IDs
+ */
+export const ORGAN_IDS: readonly OrganId[] = [
+  "digestive",
+  "lung",
+  "thoracicCavity",
+  "breast",
+  "heart",
+  "head",
+  "eye",
+  "ear",
+  "voice",
+  "kidney",
+  "integument",
+  "constitutional",
+  "limbs",
+  "nervous",
+  "metabolism",
+  "cell",
+  "endocrine",
+  "neoplasm",
+  "immune",
+  "muscle",
+  "growth",
+  "prenatal",
+  "blood",
+] as const;
+
+/**
+ * Display names for organs (English)
+ */
+export const ORGAN_NAMES_EN: Record<OrganId, string> = {
+  head: "Head",
+  eye: "Eye",
+  ear: "Ear",
+  heart: "Heart",
+  lung: "Lung",
+  digestive: "Digestive",
+  kidney: "Kidney",
+  integument: "Integument",
+  constitutional: "Constitutional",
+  limbs: "Limbs",
+  nervous: "Nervous",
+  breast: "Breast",
+  thoracicCavity: "Thoracic Cavity",
+  voice: "Voice",
+  metabolism: "Metabolism",
+  cell: "Cell",
+  endocrine: "Endocrine",
+  neoplasm: "Neoplasm",
+  immune: "Immune",
+  muscle: "Muscle",
+  growth: "Growth",
+  prenatal: "Prenatal",
+  blood: "Blood",
+};
+
+/**
+ * Display names for organs (Korean)
+ */
+export const ORGAN_NAMES_KO: Record<OrganId, string> = {
+  head: "머리",
+  eye: "눈",
+  ear: "귀",
+  heart: "심장",
+  lung: "폐",
+  digestive: "소화기",
+  kidney: "신장",
+  integument: "외피",
+  constitutional: "전신",
+  limbs: "팔다리",
+  nervous: "신경계",
+  breast: "유방",
+  thoracicCavity: "흉강",
+  voice: "음성",
+  metabolism: "대사",
+  cell: "세포",
+  endocrine: "내분비",
+  neoplasm: "신생물",
+  immune: "면역",
+  muscle: "근육",
+  growth: "성장",
+  prenatal: "태아",
+  blood: "혈액",
+};
+
+/**
+ * Color palettes for each color scheme.
+ * Based on Tailwind CSS color palette.
+ */
+export const DEFAULT_COLOR_PALETTE: StrictColorPalette = {
+  blue: {
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    alpha: {
+      100: "#1A7EFF26",
+      200: "#0975FB42",
+      300: "#0478fa6e",
+    },
+  },
+  yellow: {
+    100: "#FFF3D4",
+    200: "#FFECBA",
+    300: "#FFCF54",
+    alpha: {
+      100: "#FFE50D30",
+      200: "#FCDB025C",
+      300: "#F2C90575",
+    },
+  },
+  gray: {
+    100: "#F0F2F5",
+    200: "#E4E6EB",
+    300: "#BEC2CC",
+    alpha: {
+      100: "#0000000D",
+      200: "#101A231A",
+      300: "#020F1C26",
+    },
+  },
+};
+
+/**
+ * Default color scheme used when no colorScheme is specified
+ */
+export const DEFAULT_COLOR_NAME: ColorName = "blue";
+
+/**
+ * Default stroke color
+ */
+export const DEFAULT_STROKE_COLOR = "#ff142d";
+
+/**
+ * Default stroke width;
+ */
+export const DEFAULT_STROKE_WIDTH = 0.5;
+
+/**
+ * Animation duration in milliseconds
+ */
+export const ANIMATION_DURATION_MS = 150;
+
+/**
+ * CSS transition string for smooth style changes
+ */
+export const TRANSITION_STYLE = `all ${ANIMATION_DURATION_MS}ms ease-out`;
+
+/**
+ * Body SVG viewBox dimensions
+ */
+export const BODY_VIEWBOX = {
+  width: 122,
+  height: 358,
+};

package/src/index.ts

@@ -0,0 +1,34 @@
+// Main component
+
+// Constants
+export {
+  ANIMATION_DURATION_MS,
+  DEFAULT_COLOR_PALETTE,
+  ORGAN_IDS,
+  ORGAN_NAMES_EN,
+  ORGAN_NAMES_KO,
+} from "./constants";
+export { HpoVisualizer } from "./HpoVisualizer";
+export type { OrganSvgWrapperProps } from "./OrganSvg";
+// OrganSvg wrapper for custom compositions
+export { OrganSvg } from "./OrganSvg";
+// Organ SVG components for advanced usage
+export { ORGAN_COMPONENTS } from "./svg/index";
+// Types
+export type {
+  ColorName as ColorScheme,
+  ColorScale as ColorPalette,
+  HpoVisualizerProps,
+  OrganConfig,
+  OrganId,
+  OrganInteractionHandlers,
+  OrganInteractionState,
+  OrganStyle,
+  OrganSvgProps,
+} from "./types";
+export type {
+  UseOrganInteractionOptions,
+  UseOrganInteractionResult,
+} from "./useOrganInteraction";
+// Hook for custom implementations
+export { useOrganInteraction } from "./useOrganInteraction";

package/src/lib/createStrictColorPalette.ts

@@ -0,0 +1,57 @@
+import { DEFAULT_COLOR_PALETTE } from "../constants";
+import type {
+  ColorName,
+  ColorPalette,
+  ColorScale,
+  ColorStep,
+  SolidColorScale,
+  StrictColorPalette,
+} from "../types";
+
+const COLOR_NAMES: ColorName[] = ["blue", "yellow", "gray"];
+const COLOR_STEPS: ColorStep[] = [100, 200, 300];
+
+/**
+ * Generate alpha colors from solid colors using CSS color-mix.
+ * The generated colors are 50% transparent.
+ */
+function generateAlphaColors(solidColors: SolidColorScale): SolidColorScale {
+  return COLOR_STEPS.reduce((acc, step) => {
+    acc[step] = `color-mix(in srgb, ${solidColors[step]} 50%, transparent)`;
+    return acc;
+  }, {} as SolidColorScale);
+}
+
+/**
+ * Create a StrictColorPalette from a partial ColorPalette.
+ *
+ * - Missing ColorNames are filled from DEFAULT_COLOR_PALETTE.
+ * - Missing alpha values are generated using CSS color-mix.
+ *
+ * @param palette - A partial ColorPalette to convert
+ * @returns A StrictColorPalette with all colors and alpha values filled
+ */
+export function createStrictColorPalette(palette?: Partial<ColorPalette>): StrictColorPalette {
+  return COLOR_NAMES.reduce((result, colorName) => {
+    // Get the color scale from input palette, fallback to default
+    const inputScale: ColorScale | undefined = palette?.[colorName];
+    const defaultScale: ColorScale = DEFAULT_COLOR_PALETTE[colorName];
+
+    // Merge solid colors: use input if provided, otherwise use default
+    const solidColors: SolidColorScale = {
+      100: inputScale?.[100] ?? defaultScale[100],
+      200: inputScale?.[200] ?? defaultScale[200],
+      300: inputScale?.[300] ?? defaultScale[300],
+    };
+
+    // For alpha: use input alpha if provided, otherwise generate using color-mix
+    const alphaColors: SolidColorScale = inputScale?.alpha ?? generateAlphaColors(solidColors);
+
+    result[colorName] = {
+      ...solidColors,
+      alpha: alphaColors,
+    };
+
+    return result;
+  }, {} as StrictColorPalette);
+}

package/src/lib/index.ts

@@ -0,0 +1 @@
+export { createStrictColorPalette } from "./createStrictColorPalette";

package/src/svg/Blood.tsx

@@ -0,0 +1,23 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Blood({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[200];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="blood">
+      <path
+        d={BLOOD_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const BLOOD_PATH =
+  "M6 6.51934C6 8.44383 4.65873 10 3 10C1.34127 10 0 8.44383 0 6.51934C0 4 3 0 3 0C3 0 6 4 6 6.51934Z";

package/src/svg/Body.tsx

@@ -0,0 +1,24 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Body({ style, className }: OrganSvgProps) {
+  const fill = style?.fill ?? "none";
+
+  return (
+    <g className={className} data-organ="body">
+      <defs>
+        <path id="hpo-body-image" d={BODY_PATH} style={{ transition: TRANSITION_STYLE }} />
+      </defs>
+      <use
+        href="#hpo-body-image"
+        d={BODY_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+      />
+    </g>
+  );
+}
+
+const BODY_PATH =
+  "M61.4512 0.5C67.0266 0.5 70.5742 1.80208 73.3867 3.44141V3.44238C80.0658 7.33983 84.1767 13.2667 84.1768 20.3652V28.9541L84.8936 28.6074H84.8945C84.8959 28.6068 84.8987 28.6052 84.9023 28.6035C84.9102 28.5999 84.9233 28.5944 84.9404 28.5869C84.9751 28.5718 85.028 28.5496 85.0947 28.5244C85.2293 28.4736 85.4175 28.411 85.6318 28.3633C86.0811 28.2632 86.5514 28.2494 86.9014 28.4297C89.4653 29.7518 90.3704 33.5368 88.6943 37.1162L88.5244 37.4619C87.4804 39.4869 85.8308 40.9054 84.123 41.5166L83.8701 41.6064L83.8057 41.8672C82.5437 46.9691 78.975 53.2855 73.3271 57.418L72.7744 57.8105C72.1554 58.2358 71.7578 58.937 71.7578 59.71V64.0176C71.7578 64.9512 71.8821 65.8528 72.1055 66.7148L72.1064 66.7178C72.9621 69.9436 75.6339 72.4909 79.0898 73.1367C84.4858 74.1479 90.3636 75.3253 95.4502 77.4551C100.534 79.5836 104.761 82.6365 106.938 87.3594C110.541 95.182 112.618 108.493 113.991 120.607C114.676 126.652 115.184 132.374 115.621 136.938C115.839 139.217 116.04 141.211 116.237 142.808C116.433 144.393 116.628 145.622 116.841 146.354C117.624 149.045 118.554 155.824 119.035 163.83C119.515 171.824 119.544 180.978 118.545 188.407L118.469 188.974H118.477C118.107 192.204 119.19 195.616 120.135 198.868C121.152 202.367 122.014 205.692 121.144 208.736C120.183 210.643 119.518 212.261 118.927 213.573C118.324 214.912 117.8 215.923 117.11 216.706C115.855 218.131 113.952 218.898 109.567 219.122L108.656 219.159L108.644 219.16C107.736 219.212 107.186 219.013 106.902 218.774C106.641 218.555 106.55 218.259 106.636 217.912C106.819 217.166 107.89 216.106 110.124 215.842L110.352 215.815L110.48 215.625C112.404 212.769 112.932 209.269 110.838 206.244L110.837 206.241L110.767 206.149C110.019 205.229 108.481 205.412 108.074 206.604V206.605C107.597 208.022 107.637 209.433 107.521 210.605C107.403 211.784 107.133 212.873 106.123 213.97C105.848 214.131 105.635 214.151 105.473 214.112C105.294 214.069 105.091 213.934 104.894 213.646C104.49 213.057 104.212 211.958 104.275 210.473V210.472C104.36 208.42 104.688 205.945 104.993 203.827C105.145 202.775 105.292 201.803 105.398 201.033C105.503 200.28 105.577 199.659 105.568 199.328L105.567 199.291L105.561 199.255C105.246 197.443 105.701 196.177 106.342 194.85C106.941 193.607 107.741 192.258 108.085 190.436L108.147 190.064C108.71 186.289 107.761 181.818 106.445 176.914C105.12 171.975 103.413 166.567 102.359 160.79V160.789L102.21 159.929C101.876 157.891 101.637 155.663 101.445 153.631C101.228 151.324 101.069 149.244 100.904 148.031V148.03C100.27 143.404 99.2463 138.906 98.2344 134.416C97.221 129.919 96.2185 125.429 95.6113 120.783L94.623 120.763C90.1407 146.857 91.0932 161.186 95.6191 176.598V176.599C98.1952 187.276 99.4995 208.275 99.3574 219.291C99.1144 238.354 98.1907 259.581 97.959 269.391C97.9168 271.12 98.0249 272.84 98.2471 274.551H98.248C99.5678 284.662 98.2406 296.152 97.5918 306.975C97.2505 312.716 96.1878 317.677 95.1934 322.59C94.2003 327.495 93.276 332.351 93.2461 337.82C93.2038 345.504 96.6429 352.149 102.017 358.143L102.023 358.15C102.71 358.884 103.566 359.604 104.443 360.321C105.329 361.045 106.238 361.767 107.07 362.528C108.751 364.065 109.985 365.644 110.046 367.46C110.081 368.506 109.485 369.476 108.532 369.968H108.531C106.915 370.803 104.54 371.27 101.993 371.435C99.4574 371.598 96.8071 371.459 94.6777 371.121H94.6787C92.9357 370.842 91.3275 370.009 90.0586 368.769H90.0596C88.0439 366.795 85.4237 363.963 84.5781 362.886L84.542 362.841L84.4971 362.805C83.5915 362.079 82.2688 361.343 81.0879 360.58C79.8665 359.791 78.7442 358.946 78.0518 357.94H78.0527C76.8179 356.143 77.0022 354.136 77.668 352.427L77.6826 352.389L77.6904 352.35C79.2145 345.265 79.4248 341.103 79.2051 337.924C79.0955 336.339 78.8795 335.007 78.6748 333.705C78.4954 332.564 78.325 331.443 78.2334 330.17L78.1992 329.614C78.1202 328.037 77.7906 326.066 77.3555 323.69C76.9184 321.304 76.3713 318.492 75.8438 315.195C74.7898 308.609 73.817 300.103 73.9854 289.349C74.0273 286.622 73.6175 281.152 73.0508 275.772C72.5197 270.731 71.8445 265.712 71.2588 263.057L71.1426 262.558C67.7629 248.839 65.7514 228.99 65.2158 219.585L65.1289 217.849C65.1022 217.03 65.0379 215.975 64.7236 215.082C64.4028 214.171 63.7812 213.332 62.6084 213.162L62.5723 213.156H59.4297L59.3936 213.162C58.2205 213.333 57.6011 214.171 57.2812 215.082C56.9676 215.976 56.9036 217.031 56.874 217.849C56.5302 226.057 54.5908 246.588 51.1924 261.166L50.8594 262.558C50.2484 265.043 49.5176 270.395 48.9512 275.772C48.3844 281.152 47.9756 286.622 48.0176 289.349C48.186 300.106 47.2134 308.614 46.1602 315.2C45.6331 318.496 45.0867 321.308 44.6494 323.693C44.214 326.069 43.8832 328.039 43.8027 329.614C43.7256 331.123 43.5322 332.4 43.3271 333.704C43.1225 335.006 42.9064 336.338 42.7969 337.922C42.5772 341.1 42.7875 345.262 44.3115 352.35L44.3203 352.389L44.335 352.427C45.0006 354.136 45.184 356.143 43.9492 357.94V357.941C43.2598 358.949 42.1381 359.796 40.916 360.585C39.7353 361.347 38.4108 362.082 37.5059 362.804L37.4609 362.84L37.4248 362.885C36.5723 363.963 33.9581 366.796 31.9434 368.769C30.6744 370.009 29.0663 370.842 27.3232 371.121C25.1943 371.459 22.5452 371.597 20.0098 371.433C17.4625 371.268 15.086 370.801 13.4697 369.968H13.4707C12.5215 369.475 11.9214 368.504 11.9561 367.46C12.017 365.641 13.2513 364.062 14.9316 362.526C15.7642 361.766 16.6728 361.044 17.5586 360.32C18.3259 359.693 19.0772 359.064 19.7129 358.425L19.9785 358.15L19.9854 358.143C25.3591 352.149 28.7981 345.504 28.7559 337.82C28.7289 332.351 27.8065 327.495 26.8135 322.59C25.8811 317.984 24.8867 313.336 24.4824 308.042L24.4102 306.975C23.7554 296.152 22.4294 284.657 23.7549 274.552V274.551C23.977 272.84 24.0851 271.12 24.043 269.391C23.8113 259.581 22.8876 238.354 22.6445 219.291C22.5084 208.274 23.8057 187.275 26.3818 176.598C30.9079 161.192 31.8623 146.863 27.3799 120.763L26.3906 120.783C25.7835 125.429 24.781 129.921 23.7676 134.419C22.8189 138.629 21.8608 142.845 21.2217 147.165L21.0977 148.03C20.9297 149.244 20.7715 151.325 20.5547 153.631C20.3363 155.953 20.0563 158.531 19.6426 160.789V160.79C18.5894 166.564 16.8821 171.971 15.5566 176.91C14.2406 181.814 13.2919 186.287 13.8545 190.064C14.1533 192.074 15.0207 193.521 15.6602 194.846C16.3006 196.173 16.7564 197.44 16.4414 199.256L16.4355 199.29L16.4346 199.325C16.4241 199.657 16.4972 200.279 16.6006 201.032C16.7064 201.803 16.8531 202.774 17.0049 203.827C17.2721 205.681 17.5568 207.807 17.6826 209.685L17.7266 210.473C17.7895 211.958 17.5117 213.057 17.1084 213.646C16.9114 213.935 16.7084 214.069 16.5293 214.112C16.3668 214.151 16.1536 214.131 15.8779 213.969C14.8719 212.869 14.6015 211.78 14.4834 210.603C14.3658 209.43 14.4052 208.022 13.9277 206.605L13.8848 206.492C13.407 205.358 11.8528 205.251 11.165 206.243C9.06384 209.263 9.59991 212.77 11.5225 215.625L11.6504 215.815L11.8779 215.842C14.1119 216.106 15.1825 217.166 15.3662 217.912C15.4515 218.259 15.361 218.555 15.0996 218.774C14.8155 219.013 14.2665 219.212 13.3584 219.16L13.3457 219.159C8.30652 218.997 6.23107 218.227 4.8916 216.708C4.20187 215.926 3.6784 214.915 3.0752 213.576C2.48355 212.263 1.81799 210.645 0.857422 208.736C-0.0127993 205.692 0.850371 202.367 1.86719 198.868C2.83803 195.527 3.95427 192.017 3.49219 188.709L3.44336 188.39C2.44713 180.964 2.47547 171.818 2.95508 163.83C3.43582 155.824 4.36614 149.045 5.14941 146.354C5.36227 145.622 5.55753 144.393 5.75293 142.808C5.94977 141.211 6.15078 139.217 6.36914 136.938C6.80626 132.374 7.31392 126.652 7.99902 120.607C9.3291 108.872 11.3194 96.0125 14.7188 88.1084L15.0527 87.3594C17.2289 82.6335 21.4566 79.5787 26.54 77.4502C31.6266 75.3204 37.5045 74.1449 42.9004 73.1367C46.3571 72.4908 49.0223 69.9424 49.8838 66.7178L49.8848 66.7148C50.1082 65.8526 50.2324 64.9451 50.2324 64.0176V59.71C50.2324 58.9367 49.8342 58.2357 49.2148 57.8105H49.2158C43.2479 53.6939 39.4872 47.1335 38.1846 41.8672L38.1201 41.6055L37.8662 41.5156L37.5469 41.3926C36.0634 40.7746 34.6524 39.5409 33.6699 37.834L33.4658 37.4609C31.5635 33.7829 32.4425 29.7943 35.0889 28.4297C35.4327 28.2525 35.9027 28.2654 36.3555 28.3652C36.5711 28.4128 36.7607 28.4757 36.8965 28.5264C36.964 28.5515 37.0176 28.5728 37.0527 28.5879C37.0702 28.5954 37.0829 28.6019 37.0908 28.6055C37.0944 28.6071 37.0972 28.6077 37.0986 28.6084V28.6094L37.8135 28.9482V20.3652C37.8136 13.2673 41.9228 7.34495 48.6016 3.44141L48.6025 3.44238C51.4152 1.80285 54.9631 0.5 60.5391 0.5C60.6102 0.500004 60.6807 0.501438 60.7568 0.50293C60.8317 0.504396 60.9124 0.505859 60.9951 0.505859H61.0146C61.1574 0.500377 61.2959 0.5 61.4512 0.5Z";

package/src/svg/Breast.tsx

@@ -0,0 +1,42 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+const BREAST_PATH =
+  "M69.8438 2C70.6451 10.8345 68.3715 18.6386 60.9102 21.7764C50.8924 25.9885 42.3578 23.3784 39.5127 20.8213C37.9582 19.4101 36.5048 16.0566 35.001 16.0566C33.4974 16.0572 32.0447 19.4208 30.4903 20.8213C27.6555 23.3784 19.1209 25.9885 9.09282 21.7764C1.63155 18.6387 -0.650501 10.8344 0.152386 2H69.8438Z";
+const LEFT_PATH =
+  "M12.9172 15.7864C14.2966 16.5464 14.1514 17.7592 13.4736 18.4718C12.7959 19.1845 11.2841 19.5035 10.1041 18.9497C8.88656 18.3783 8.65291 17.457 8.99608 16.5829C9.44575 15.4374 11.1824 14.8305 12.9172 15.7864Z";
+const RIGHT_PATH =
+  "M56.1746 15.7864C54.7952 16.5464 54.9404 17.7592 55.6182 18.4718C56.2959 19.1845 57.8077 19.5035 58.9877 18.9497C60.2052 18.3783 60.4389 17.457 60.0957 16.5829C59.646 15.4374 57.9094 14.8305 56.1746 15.7864Z";
+
+export function Breast({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[300];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+
+  return (
+    <g className={className} data-organ="breast">
+      <path
+        d={BREAST_PATH}
+        fill="url(#paint_breast)"
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path d={LEFT_PATH} fill={fill} style={{ transition: TRANSITION_STYLE }} />
+      <path d={RIGHT_PATH} fill={fill} style={{ transition: TRANSITION_STYLE }} />
+      <defs>
+        <linearGradient
+          id="paint_breast"
+          x1="36"
+          y1="2"
+          x2="36"
+          y2="22"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" stopOpacity="0" />
+          <stop offset="1" stopColor={fill} style={{ transition: TRANSITION_STYLE }} />
+        </linearGradient>
+      </defs>
+    </g>
+  );
+}

package/src/svg/Cell.tsx

@@ -0,0 +1,79 @@
+import { TRANSITION_STYLE } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Cell({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
+  const highlightFill = colorScale.alpha[200];
+
+  return (
+    <g className={className} data-organ="cell">
+      <path
+        d={CELL_A_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_A_HIGHLIGHT_PATH}
+        fill={highlightFill}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_B_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_B_HIGHLIGHT_PATH}
+        fill={highlightFill}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_C_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_C_HIGHLIGHT_PATH}
+        fill={highlightFill}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_D_PATH}
+        fill={fill}
+        stroke={style?.stroke}
+        strokeWidth={style?.strokeWidth}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+      <path
+        d={CELL_D_HIGHLIGHT_PATH}
+        fill={highlightFill}
+        style={{ transition: TRANSITION_STYLE }}
+      />
+    </g>
+  );
+}
+
+const CELL_A_PATH =
+  "M1.55326 11.38C-0.381257 10.7111 -0.556186 7.81929 1.29601 6.4029C2.93212 5.14388 5.02099 5.95044 5.24737 7.94716C5.49433 10.0914 3.40546 12.0193 1.55326 11.38Z";
+const CELL_A_HIGHLIGHT_PATH =
+  "M3.05597 10.1119C2.52089 9.89551 2.46944 8.94141 2.98394 8.47912C3.4367 8.066 4.01294 8.33158 4.07468 8.98076C4.14671 9.67912 3.57047 10.3185 3.05597 10.1119Z";
+const CELL_B_PATH =
+  "M9.66139 5.60695C11.1534 6.20695 11.2872 8.48891 10.6081 9.77744C9.39385 12.0594 6.72874 11.0561 6.8728 8.26269C6.95512 6.69875 8.16934 5.00695 9.66139 5.61678V5.60695Z";
+const CELL_B_HIGHLIGHT_PATH =
+  "M9.16759 6.37354C9.72325 6.61945 9.72325 7.426 9.43513 7.85879C8.93092 8.626 7.93279 8.21289 8.04598 7.22928C8.10772 6.6883 8.61193 6.11781 9.1573 6.37354H9.16759Z";
+const CELL_C_PATH =
+  "M1.32755 12.9643C1.67741 12.6397 2.0993 12.3938 2.60351 12.4233C3.29294 12.4626 3.97208 13.0233 3.68396 14.4987C3.39584 15.9741 4.40426 17.0659 2.97395 17.8331C2.39771 18.1479 1.47161 18.02 1.00856 17.5577C-0.113045 16.4266 0.216235 14.0069 1.31726 12.9741L1.32755 12.9643Z";
+const CELL_C_HIGHLIGHT_PATH =
+  "M1.87342 14.9118C1.54414 14.8921 1.24573 15.3249 1.19428 15.8954C1.15312 16.456 1.3795 16.938 1.70878 16.9577C2.03806 16.9774 2.33647 16.5446 2.38792 15.9741C2.42908 15.4134 2.2027 14.9314 1.87342 14.9118Z";
+const CELL_D_PATH =
+  "M7.93389 4.55365C7.16214 5.39955 5.90676 6.0389 5.03211 5.79299C4.57935 5.66512 4.18833 5.45857 3.94137 5.06512C3.00498 3.57988 4.87776 0.50119 6.60648 0.048731C7.32678 -0.138154 8.20143 0.206108 8.56158 0.845452C9.18927 1.9766 8.69535 3.70775 7.93389 4.55365Z";
+const CELL_D_HIGHLIGHT_PATH =
+  "M5.96831 1.60318C5.72135 1.43597 5.27888 1.64253 4.99076 2.04581C4.70264 2.45892 4.67177 2.92122 4.92902 3.07859C5.17598 3.24581 5.61845 3.03925 5.90657 2.63597C6.19469 2.23269 6.22556 1.76056 5.96831 1.60318Z";

package/src/svg/Constitutional.tsx

@@ -0,0 +1,29 @@
+import { DEFAULT_STROKE_WIDTH } from "../constants";
+import type { OrganSvgProps } from "../types";
+
+export function Constitutional({ style, colorScale, isActive = false, className }: OrganSvgProps) {
+  const fill = style?.fill ?? "none";
+  const defaultColor = colorScale[100];
+  const activeColor = colorScale[200];
+  const defaultStroke = isActive ? activeColor : defaultColor;
+  const stroke = style?.strokeWidth ? style.stroke : defaultStroke;
+
+  return (
+    <g className={className} data-organ="constitutional">
+      {/* Invisible outline for interaction  */}
+      <use
+        href="#hpo-body-image"
+        fill="none"
+        stroke="transparent"
+        strokeWidth={Math.max(style?.strokeWidth || DEFAULT_STROKE_WIDTH, 8)}
+      />
+      {/* Skin path */}
+      <use
+        href="#hpo-body-image"
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={style?.strokeWidth || DEFAULT_STROKE_WIDTH}
+      />
+    </g>
+  );
+}