haru-cat 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+This file records notable changes to Haru Cat. It is maintained manually and
+organized by release.
+
+## 0.0.2 — 2026-07-26
+
+### Added
+
+- Add `offsetX` and `offsetY` props for independent horizontal and vertical
+  spacing.
+- Add a `responsive` prop for controlling automatic sizing on smaller screens.
+- Add controls to the development playground for checking size, offsets, and
+  responsive behavior.
+
+### Changed
+
+- Enable responsive sizing by default, including for existing usage. On smaller
+  screens, the image is limited to 30% of the viewport's shorter side. Set
+  `responsive={false}` to preserve the exact `size`.
+- Account for viewport safe-area insets when positioning Haru-kun.
+
+## 0.0.1 — 2026-07-23
+
+### Added
+
+- Publish the initial Haru Cat npm package.
+- Add the static `HaruCat` React component and Haru-kun artwork.
+- Support bottom placement, size, offset, z-index, and custom class names.
+- Include TypeScript types and ESM and CommonJS builds.

package/README.ja.md

@@ -2,8 +2,8 @@
 
 Haru Catは、小さなオリジナルキャラクター「ハルくん」をWebサイトの下部に表示するためのReactコンポーネントです。
 
-最初のリリースでは静止画像を表示します。
-アニメーションや新しい振る舞いは、今後のバージョンで追加する予定です。
+現在のHaru Catは静止画像を表示します。
+アニメーションはまだ含まれていません。
 
 [English](./README.md)
 
@@ -38,18 +38,33 @@ export default function App() {
 <HaruCat position="bottom-center" />
 ```
 
+横方向と縦方向で異なる余白を指定する場合は、`offsetX`と`offsetY`を使用します。
+
+```tsx
+<HaruCat offset={16} offsetX={32} offsetY={24} />
+```
+
+`offsetX`と`offsetY`は、それぞれの方向で`offset`より優先されます。
+`bottom-center`では、横方向の余白は適用されません。
+
 ## Props
 
 | Prop | 型 | 初期値 | 説明 |
 | --- | --- | --- | --- |
 | `position` | `'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | 画面下部での表示位置です。 |
-| `size` | `number` | `120` | 画像の幅と高さをピクセル単位で指定します。 |
+| `size` | `number` | `120` | 画像の基準となる幅と高さをピクセル単位で指定します。 |
 | `offset` | `number` | `16` | 画面下端、および左右配置の場合は画面の端からの距離をピクセル単位で指定します。 |
+| `offsetX` | `number` | `undefined` | 左端または右端からの距離です。横方向では`offset`より優先されます。 |
+| `offsetY` | `number` | `undefined` | 画面下端からの距離です。縦方向では`offset`より優先されます。 |
+| `responsive` | `boolean` | `true` | 小さい画面で、画像の大きさを画面の短い辺の30%以下に調整します。 |
 | `zIndex` | `number` | `9999` | コンポーネントのCSS `z-index`です。 |
 | `className` | `string` | `undefined` | 外側の要素に設定するクラス名です。 |
 
 コンポーネントには`position: fixed`と`pointer-events: none`が設定されています。
 そのため、ハルくんは画面下部に表示され続け、Webサイト上のボタンやリンク操作を妨げません。
+利用するWebサイトで`viewport-fit=cover`が設定されている場合、Haru Catはブラウザが提供するセーフエリアの余白を自動的に画面端からの余白へ加算します。
+
+小さい画面でも`size`を正確なピクセル値として使用したい場合は、`responsive={false}`を指定してください。
 
 ## TypeScript
 
@@ -74,6 +89,7 @@ npm run build
 npm pack --dry-run
 ```
 
+バージョンごとの変更内容は[CHANGELOG](./CHANGELOG.md)に記録しています。
 プロジェクトの方針と今後の計画は、[Design Notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)にまとめています。
 
 ## 制作者

package/README.md

@@ -3,8 +3,7 @@
 Haru Cat is a React component for placing Haru-kun, a small original cat
 character, at the bottom of your website.
 
-This first release displays a static image. Animations and additional behaviors
-are planned for future versions.
+Haru Cat currently displays a static image. Animation is not included yet.
 
 [日本語](./README.ja.md)
 
@@ -39,18 +38,36 @@ You can also place Haru-kun at the bottom-left or bottom-center of the viewport.
 <HaruCat position="bottom-center" />
 ```
 
+Use `offsetX` and `offsetY` when the horizontal and vertical spacing should be
+different.
+
+```tsx
+<HaruCat offset={16} offsetX={32} offsetY={24} />
+```
+
+`offsetX` and `offsetY` override `offset` on their respective axes. The
+horizontal offset does not apply to `bottom-center`.
+
 ## Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `position` | `'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | Position along the bottom of the viewport. |
-| `size` | `number` | `120` | Width and height of the image in pixels. |
+| `size` | `number` | `120` | Preferred width and height of the image in pixels. |
 | `offset` | `number` | `16` | Distance from the bottom and, when applicable, the left or right edge in pixels. |
+| `offsetX` | `number` | `undefined` | Left or right distance in pixels. Overrides `offset` on the horizontal axis. |
+| `offsetY` | `number` | `undefined` | Bottom distance in pixels. Overrides `offset` on the vertical axis. |
+| `responsive` | `boolean` | `true` | Limits the image to 30% of the viewport's shorter side on smaller screens. |
 | `zIndex` | `number` | `9999` | CSS `z-index` of the component. |
 | `className` | `string` | `undefined` | Class name applied to the wrapper element. |
 
 The component uses `position: fixed` and `pointer-events: none`, so Haru-kun
 stays at the bottom of the viewport without blocking buttons or links.
+When the host website uses `viewport-fit=cover`, Haru Cat automatically adds
+the safe-area insets provided by the browser to the configured edge offsets.
+
+Set `responsive={false}` when `size` must remain an exact pixel size on small
+screens.
 
 ## TypeScript
 
@@ -75,7 +92,8 @@ npm run build
 npm pack --dry-run
 ```
 
-See the [design notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)
+See the [changelog](./CHANGELOG.md) for version history and the
+[design notes](https://github.com/Colorful12/haru-cat/blob/main/docs/design-notes.md)
 for the project's principles and planned direction.
 
 ## Creators

package/dist/HaruCat.d.ts

@@ -3,7 +3,10 @@ export type HaruCatProps = {
     position?: HaruCatPosition;
     size?: number;
     offset?: number;
+    offsetX?: number;
+    offsetY?: number;
+    responsive?: boolean;
     zIndex?: number;
     className?: string;
 };
-export declare function HaruCat({ position, size, offset, zIndex, className, }: HaruCatProps): import("react").JSX.Element;
+export declare function HaruCat({ position, size, offset, offsetX, offsetY, responsive, zIndex, className, }: HaruCatProps): import("react").JSX.Element;