# 変更履歴

[Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) にならい、新しい版を上に置きます。
バージョンは [Semantic Versioning](https://semver.org/lang/ja/) に従いますが、0.x の間は
マイナー更新に破壊的変更が入ることがあります。

## 0.3.3 — 2026-09-30

### 追加

- `package.json` に `homepage`（ドキュメントサイト）、`repository`、`bugs` を入れました。
  npm のページからドキュメントとリポジトリに行けます。

### 修正

- **パネルが開くときのフォーカスで、ページがスクロールしなくなりました。**
  ライブラリが出すフォーカスをすべて `preventScroll` つきにし、それを無視するブラウザ向けに
  スクロール位置の復元も入れています。ウィジェットは `position: fixed` ですが、祖先に
  `transform` / `filter` / `will-change` があると `fixed` がその箱を基準になるため、
  ウィジェットが文書のずっと下に置かれ、フォーカスした瞬間にページがそこまで飛んでいました。
  対象は開いたときの入力欄・パネル、閉じたときのランチャー、`focusInput()` のすべてです。

## 0.3.2 — 2026-09-20

### 追加

- **AI コーディング支援向けの説明書を同梱しました**（`skills/chit-ui/`）。Claude Code などに
  読ませると、`messages` の所有者が利用者側であること、`push` では描画されないこと、
  `text` と `html` の使い分けといった、このライブラリの癖を踏まえたコードになります。
  npm パッケージにも入っているので、`node_modules/@hidemikimura/chit-ui/skills/chit-ui/` から
  そのまま参照できます。
- **ドキュメントサイトを用意しました**（`site/`）。ビルド工程のない素の HTML/CSS/JS で、
  ページの上で本物のウィジェットが動きます。GitHub Pages へ上げるワークフローも
  同梱しています（npm パッケージには含めていません）。

## 0.3.1 — 2026-09-20

### 追加

- 公開している型をパッケージのルートからも読めるようにしました。
  `import type { Message, Theme } from '@hidemikimura/chit-ui'` のように書けます
  （これまでは `dist/types/` を直接指す必要がありました）。

### 修正

- **スマホで入力欄にフォーカスしても画面が拡大されなくなりました。** iOS Safari は
  16px 未満の入力欄にフォーカスするとページを拡大し、離れても元に戻しません。タッチ端末
  （`pointer: coarse`）では入力欄を 16px 以上にして、拡大そのものが起きないようにしました。
  ウィジェット全体の文字サイズは変わりません。テーマの文字が 16px より大きい場合はそちらが
  優先されます。
- **キーボードが出ている間、全画面のパネルが見えている範囲に収まるようになりました。**
  `visualViewport` を見て、パネルの上端と高さを実際に見えている箱に合わせます。入力欄と
  直前の発言がキーボードの下に隠れなくなり、送信したあともそのまま見えています。
  ピンチで拡大しているときは何もしません（拡大は読み手のものなので、勝手に組み直さない）。
- **パネルの上をなぞっても後ろのページが動かなくなりました。** 会話が画面に収まっていて
  発言一覧がスクロールしないとき、タイトルバーや入力欄をなぞったときに、指の動きがそのまま
  ページに渡っていました（iPhone で顕著）。`overscroll-behavior: contain` が効くのは
  スクロールできる箱を端まで引っぱったときだけで、そもそも箱になっていない場合は素通しに
  なるためです。パネルの中に進める入れ子があるかを見て、なければその指の動きを取り消します。
  ピンチ（2 本指）はそのままなので、拡大は変わりません。

## 0.3.0 — 2026-09-20

### 追加

- **応答待ちのローディング**。`loading` プロパティで、送信から返事までの間の表示を出せます。
  見た目は `open.loading.style`（`'spinner'`（既定）/ `'dots'` / `'text'`）と `text` で
  決められます。
  相手が機械のとき「入力中」は実態と違うため、スピナーや文言を選べるようにしました。
- `open.loading.auto` を `true` にすると、`chat-submit` から相手側の発言が届くまで自動で
  表示します。`timeout` を過ぎたら自分で引っ込みます。
- CSS パーツ `loading` `loading-text`、ラベル `loading`（ja / en）。`loading` は属性にも
  反映されるので、ページ側の CSS から `chit-ui[loading]` で拾えます。
- **ドラッグで動かせるようになりました**。`closed.draggable` でランチャーを、
  `open.draggable` でパネル（取っ手はタイトルバー）を動かせます。どちらも既定は無効です。
  矢印キー（Shift で大きく）でも動かせ、画面の外には出られません。
- 閉じた状態と開いた状態は一緒に動きます。ドラッグが動かすのは位置そのものではなく
  「テーマの位置からのずれ」で、これをウィジェット全体でひとつだけ持つためです。ランチャーを
  動かしてから開けばパネルも同じだけずれ、その逆も同じです。
- 動かすと `chat-move`（`detail: { target, position, offset, displacement }`）が出ます。
  ずれは `dragOffset` プロパティで読み書きでき、保存しておけば代入するだけで復元できます。
  `resetPosition()` でテーマの位置に戻ります。ラベル `move`（ja / en）。

### 変更

- `loading` と `typing` を排他にしました。片方を `true` にすると、もう片方が `false` に
  なります。どちらも会話の同じ「間」を指しているので、2 つ並べないためです。
- パネルの最大サイズをオフセットの 2 倍からの引き算ではなく、角から反対側の端までの余白で
  計算するようにしました。以前の式は左右（上下）の余白が等しい前提だったため、ドラッグで
  動かすとパネルが縮んでいきました。画面内に収める判定も、実測の大きさではなくテーマが
  指定した大きさで行うようにしています（実測だと、縮んだ分だけさらに押し込めてしまうため）。
- 入力中インジケーターの行の高さをフォント任せ（`normal`）ではなく `1.5` と明示しました。
  ローディングと同じ大きさに揃えるためで、環境によって 1〜2px 変わります。

## 0.2.0 — 2026-09-19

### 追加

- **吹き出しのしっぽ**。`open.bubble = { radius, tail }` で角丸としっぽ（`'none'` /
  `'top'` / `'bottom'`）を指定できます。しっぽは根元を吹き出しの内側に潜り込ませて描くので、
  角丸をいくつにしても継ぎ目が見えません。入力中インジケーターにも同じしっぽが付きます。
- **付属テーマ**。`@hidemikimura/chit-ui/themes.js` から `greenTheme` を読み込めます
  （緑系メッセンジャー風、しっぽ付き）。ただの `Theme` オブジェクトなので、スプレッドで
  好きに上書きできます。単一バンドルからは `window.ChitUI.greenTheme` です。
- **発言者の名前とアイコン**。`open.speaker.assistant` / `.user` に `name` と `avatar` を
  書くと、その側の発言すべてに出ます。発言ごとの `name` / `avatar` が優先され、発言に `null`
  を書くとテーマの指定を打ち消せます（続けての発言でアイコンを省く用途）。
- **タイトルバーのホームボタン**。`open.header.home: true` で閉じるボタンの手前に出ます。
  押すと `chat-home` を発火するだけで、会話の巻き戻しは利用者側で行います。`home()` から
  同じ合図を出せます。
- **タイトルバーの表示切り替え**。`open.header.visible: false` でタイトルバーごと消せます。
  LIFF のように外側がタイトルを持つ画面で、タイトルが二重になるのを避けるためのものです。
  `title` は表示されなくても `role="dialog"` の読み上げ名としては使われます。
- **添付ボタン**。`open.input.attach: true` で入力欄の左に出ます。`accept`（既定
  `image/*,video/*`）と `multiple` はファイル選択にそのまま渡ります。選ばれたファイルは
  `chat-attach` で受け取り、アップロードや表示は利用者側で行います。`openAttach()` から
  同じダイアログを開けます。
- CSS カスタムプロパティ `--chit-bubble-radius`。
- CSS パーツ `header-title` `home-button` `attach-button` `attach-input`。
- ラベル `home` / `attach`（ja / en）。

### 変更

- 発言者アイコンの位置を行の下揃えから上揃えに変えました。名前の行（名前がなければ吹き出しの
  1 行目）に並びます。下揃えだと時刻の横に来てしまい、何を示すアイコンか読み取りにくいためです。
- タイトルバーの画像と見出しを `[part~='header-title']` でひとまとめにしました。以前は
  `logo` を指定すると画像が左端、タイトルが中央に離れて表示されていました。
- 長いタイトルは省略記号で切り詰めます。閉じるボタンが押し出されなくなりました。

### 削除

- `open.header.avatar`。型にはありましたが何も描画していませんでした。タイトルバーの画像は
  `open.header.logo` ひとつです。

## 0.1.0 — 2026-09-18

最初の公開版。

- 3 つの状態（閉じた状態 / 開いた状態 / 非表示）と遷移アニメーション、`chat-*` イベント。
- 状態ごとのテーマ（色・画像・アニメーション・大きさ）。閉じた状態は PC とスマホで分けられます。
- 発言の中身は `text` / `html` / `template` / `element` / `component` の 5 形式。`component`
  では LitElement を継承したコンポーネントをそのまま渡せます。
- どんな HTML を入れてもレイアウトが崩れないための封じ込め CSS。
- 入力欄（IME 対応、自動伸縮、文字数カウンタ）、ストリーミング表示、入力中インジケーター、
  スクロール追従。
- npm パッケージ（ESM）と単一バンドル（ESM / IIFE）の両方。