@aiquants/contact-map 0.14.0 → 0.15.0

package/README.md

@@ -52,7 +52,7 @@ Peer dependencies:
     "@aiquants/directory-tree": "^4.1.1",
     "@aiquants/fuzzy-search": "^3.2.0",
     "@aiquants/resize-panels": "^2.2.0",
-    "@aiquants/select-box": "^0.18.0",
+    "@aiquants/select-box": "^0.19.0",
     "@aiquants/swipe-overlay": "^1.4.0",
     "@aiquants/virtualscroll": "^3.20.0",
     "drizzle-orm": ">=1.0.0-beta.4 <2.0.0",
@@ -219,14 +219,14 @@ function PrebuildContactMapTree() {
 
 The components are styled with Tailwind CSS v4 utility classes: the semantic colors of a shadcn/ui-style host (`bg-background`, `text-muted-foreground`, `border-border`, ...), read from the host's `--background`, `--foreground`, ... variables (HSL components), and the `dark:` variant of a `dark` class on an ancestor.
 
-- A host that builds with Tailwind CSS v4 generates the classes in its own build, with Tailwind CSS v4.1 or later (the package's classes use the `pointer-coarse:` variant of its 44 px touch targets and the `wrap-break-word` utility, both added in v4.1): it adds an `@source` for the package's files (`@source "<path to node_modules>/@aiquants/contact-map/dist";` for the published package), keeps the semantic colors in its `@theme`, and defines the `animate-progress-indeterminate` utility of the indeterminate progress bar (the definition below).
+- A host that builds with Tailwind CSS v4 generates the classes in its own build, with Tailwind CSS v4.1 or later (the package's classes use the `pointer-coarse:` variant of the 16 px text of the search field and the settings' selects on touch screens and the `wrap-break-word` utility, both added in v4.1): it adds an `@source` for the package's files (`@source "<path to node_modules>/@aiquants/contact-map/dist";` for the published package), keeps the semantic colors in its `@theme`, and defines the `animate-progress-indeterminate` utility of the indeterminate progress bar (the definition below).
   It does not import the standalone CSS as well, whose copy of the utilities would compete with its own.
 - A host without Tailwind CSS imports `@aiquants/contact-map/styles/contact-map.standalone.css`: the package's utilities, the semantic color mapping and the progress animation, compiled. It reads the host's `--background`, ... variables at run time.
 - Either way, the host imports the CSS of the embedded packages itself, which the standalone CSS leaves out so that an older copy baked into it never overrides the host's newer one: `@aiquants/virtualscroll/styles/virtualscroll.css`, `@aiquants/directory-tree/styles/directory-tree.css` and `@aiquants/resize-panels/styles/resize-panels.css`.
 
 コンポーネントは Tailwind CSS v4 のユーティリティクラスで装飾する: shadcn/ui 流のホストの意味の色 (`bg-background`・`text-muted-foreground`・`border-border` など。ホストの `--background`・`--foreground` などの変数 (HSL の成分) から読む) と、祖先の `dark` クラスによる `dark:` バリアント。
 
-- Tailwind CSS v4 でビルドするホストは、自分のビルドでクラスを生成する。Tailwind CSS は v4.1 以降が要る (パッケージのクラスは、44 px のタッチの的の `pointer-coarse:` バリアントと `wrap-break-word` ユーティリティを使い、どちらも v4.1 で加わった): パッケージのファイルへの `@source` を足し (公開版なら `@source "<node_modules への道>/@aiquants/contact-map/dist";`)、意味の色を自分の `@theme` に置き、不確定の進捗バーの `animate-progress-indeterminate` ユーティリティを定義する (定義は下)。スタンドアロンの CSS は併せて読み込まない (その写しのユーティリティが自分のものと競り合う)。
+- Tailwind CSS v4 でビルドするホストは、自分のビルドでクラスを生成する。Tailwind CSS は v4.1 以降が要る (パッケージのクラスは、タッチの画面での検索欄と設定のセレクトの 16 px の文字の `pointer-coarse:` バリアントと `wrap-break-word` ユーティリティを使い、どちらも v4.1 で加わった): パッケージのファイルへの `@source` を足し (公開版なら `@source "<node_modules への道>/@aiquants/contact-map/dist";`)、意味の色を自分の `@theme` に置き、不確定の進捗バーの `animate-progress-indeterminate` ユーティリティを定義する (定義は下)。スタンドアロンの CSS は併せて読み込まない (その写しのユーティリティが自分のものと競り合う)。
 - Tailwind CSS を使わないホストは `@aiquants/contact-map/styles/contact-map.standalone.css` を読み込む: パッケージのユーティリティ・意味の色の対応・進捗のアニメーションをコンパイルしたもの。ホストの `--background` などの変数は実行時に読む。
 - どちらの場合も、埋め込みのパッケージの CSS はホストが自分で読み込む (スタンドアロンの CSS は含めないので、焼き込んだ古い写しがホストの新しい CSS を上書きしない): `@aiquants/virtualscroll/styles/virtualscroll.css`・`@aiquants/directory-tree/styles/directory-tree.css`・`@aiquants/resize-panels/styles/resize-panels.css`。
 
@@ -277,6 +277,23 @@ The package reads these host CSS variables, each `0px` while the host leaves it
 | `--scrollbar-height` | 一覧ビューの高さ (ルート要素で読む) | 同じくビューポートの下端から差し引く (横のスクロールバーのために空ける高さ)。 |
 | `--aqcm-overlay-right` | 長押しのポップアップとスワイプのオーバーレイ | 右端の余白 (右端にピン留めしたメニューの幅など): `:root { --aqcm-overlay-right: var(--my-pinned-menu-width, 0px); }`。 |
 
+## Pointer Targets / ポインターの的
+
+Every control the package draws is a target of at least 44 × 44 CSS px under every pointer (a mouse, a pen, a finger), WCAG 2.2's enhanced target size (SC 2.5.5, AAA): the search band's and the settings and statistics tabs' below, the header annotation's retry button, and the detail panel's and the long-press popup's (see their sections).
+パッケージが描く操作部品は、どのポインター (マウス・ペン・指) でも 44 × 44 CSS px 以上の的で、WCAG 2.2 の拡張の的の大きさ (SC 2.5.5、AAA) を満たす。下の検索の帯と検索設定・検索統計のタブ、ヘッダーの注記の再試行のボタン、詳細パネルと長押しのポップアップ (それぞれの節を参照) のもの。
+
+- **The search band:** the tabs of the search page (fuzzy search, settings, statistics), the AND / OR switch, the search field and its clear button, the list / tree tabs, and the tree view's controls beside them (the whole-company switch, expand all, collapse all). The row of the list / tree tabs wraps, so on a narrow screen the tree view's controls take a line of their own instead of running past the screen's edge.
+- **The settings and statistics tabs:** their buttons (reset all, reset, rebuild index) and inner tabs are 44 × 44 px, and the selects 44 px high. A slider's box is 44 px high over its width, and a press anywhere on it moves the value; the thumb keeps the browser's drawing. A checkbox keeps its drawn 12 px box, and the label row around it, 44 px high over the panel's width, is its target: a press anywhere on the row toggles it.
+- **Touch screens:** under a coarse pointer the text of the search field and the settings' selects is 16 px, so iOS Safari does not zoom the page when one of them takes the focus.
+- **Names and states:** the clear button is named by `clearSearch` while it can clear (while a search runs, its visible `searching` text names it); the list / tree buttons report the shown view with `aria-pressed`; the statistics tabs are tabs of a tab list named by `statsTabsLabel`, as the settings tabs are of one named by `settingsTabsLabel`, the shown one selected.
+- **Their own sizes:** the resize handles between the list or the tree and the detail pane keep their thin band, and the keyboard resizes the panes (`@aiquants/resize-panels`); the scroll controls of the list and the tree (`@aiquants/virtualscroll`, pointer-only) and the tree's rows (`@aiquants/directory-tree`) follow those packages.
+
+- **検索の帯**: 検索ページのタブ (あいまい検索・検索設定・検索統計)・AND / OR の切り替え・検索欄とクリアのボタン・一覧 / ツリーのタブ・その横のツリーのビューの操作部品 (会社全体の表示の切り替え・全展開・全折りたたみ)。一覧 / ツリーのタブの行は折り返すので、狭い画面ではツリーのビューの操作部品は画面の端からはみ出さずに次の行へ移る。
+- **検索設定と検索統計のタブ**: ボタン (すべてリセット・リセット・インデックス再構築) と内側のタブは 44 × 44 px、セレクトは高さ 44 px。スライダーは幅いっぱいで高さ 44 px の箱を持ち、箱のどこを押しても値が動く (つまみの描き方はブラウザーのまま)。チェックボックスは描く箱を 12 px のまま保ち、それを囲むパネルの幅いっぱいで高さ 44 px のラベルの行が的になる (行のどこを押しても切り替わる)。
+- **タッチの画面**: 粗いポインターでは検索欄と設定のセレクトの文字を 16 px にし、フォーカスを受けても iOS の Safari が画面を拡大しない。
+- **名前と状態**: クリアのボタンは消せる間 `clearSearch` を名前に持つ (検索中は見えている `searching` の文字が名前)。一覧 / ツリーのボタンは見せているビューを `aria-pressed` で示す。検索統計の内側のタブは `statsTabsLabel` を名前に持つタブの並びのタブで (検索設定のタブが `settingsTabsLabel` の並びのタブであるのと同じ)、見せているものが選ばれている。
+- **自分の大きさを保つもの**: 一覧やツリーと詳細のペインの間のサイズ変更ハンドルは細い帯のままで、ペインの幅はキーボードでも変えられる (`@aiquants/resize-panels`)。一覧とツリーのスクロールの操作部品 (`@aiquants/virtualscroll`。ポインター専用) とツリーの行 (`@aiquants/directory-tree`) はそれぞれのパッケージに従う。
+
 ## Mobile Detail Overlay / モバイルの詳細オーバーレイ
 
 When the list or the tree view is a single column (narrower than its two-column threshold), choosing a contact opens its details in an overlay, `SwipeOverlay`: a panel at the right edge, which renders the platform's modal dialog through `@aiquants/swipe-overlay`'s `useSwipeOverlayDialog`.
@@ -288,7 +305,7 @@ When the list or the tree view is a single column (narrower than its two-column
   In the tree view a rebuild that moves the selected contact to another path keeps the open overlay mounted on the same contact, without opening it again or moving the focus.
 - **Touch:** the panel and the backdrop take `touch-action: pinch-zoom` (`SWIPE_OVERLAY_PANEL_TOUCH_ACTION`), so a pinch zooms the page, a horizontal move is the swipe and a vertical move on the header or the backdrop pulls nothing (no pull-to-refresh).
   Every vertical scroll area takes `SWIPE_OVERLAY_SCROLL_AREA_STYLE`: `touch-action: pan-y pinch-zoom`, and `overscroll-behavior-y: contain`, so its scroll never chains to the page behind. A scroll container resets the touch-action it inherits, so content placed in `SwipeOverlay` gives each of its own vertical scroll areas that style, as the detail panel's tab contents do; a swipe does not start on an element the browser pans sideways (one that scrolls horizontally and whose touch-action allows that).
-- **Targets and contrast:** the close button is at least 44 × 44 px, the detail panel's tabs, copy buttons and value links (an address, a number, a URL; each padded above and below by half of what its line box lacks of 44 px, `max(0px, (2.75rem - 1lh) / 2)`, and at least 44 px wide, so a short value is no narrower a target) are 44 px under a coarse pointer (WCAG 2.2 enhanced target size), value links and copy buttons show a 2 px focus ring under the keyboard, the four tabs share the width equally so they fit a phone, long values wrap instead of scrolling sideways,
+- **Targets and contrast:** the close button is at least 44 × 44 px, the detail panel's tabs, copy buttons and value links (an address, a number, a URL; each padded above and below by half of what its line box lacks of 44 px, `max(0px, (2.75rem - 1lh) / 2)`, and at least 44 px wide, so a short value is no narrower a target) are 44 px under every pointer (WCAG 2.2 enhanced target size), value links and copy buttons show a 2 px focus ring under the keyboard, the four tabs share the width equally so they fit a phone, long values wrap instead of scrolling sideways,
   and every text keeps 7:1 against its ground in the light and the dark scheme.
 - **Requirements:** the platform's `<dialog>` with `showModal()` (Chromium 37, Firefox 98, Safari 15.4) and `inert` (Chromium 102, Firefox 112, Safari 15.5). The overlay's right edge follows `--aqcm-overlay-right` (see Styling).
 
@@ -296,7 +313,7 @@ When the list or the tree view is a single column (narrower than its two-column
 - **閉じる** のは、面のどこからでも始まる右へのスワイプ (120 px を超える引き、またははじき)、暗くした背景のタップ (タップの click で閉じるので、背景の下のものは押さない)、閉じるボタン、Escape (IME の変換を取り消すものを除く)、プラットフォームの閉じる要求 (Android の戻る)。どれも同じ閉じる経路を通る。
 - **去る** ときは、指を離した所から右へ滑り出し、背景は薄れる。閉じてから `SWIPE_OVERLAY_EXIT_MS` (300 ms) 後にアンマウントする。`prefers-reduced-motion: reduce` では遷移なしで去る。どちらのビューでもオーバーレイの開いた状態はオーバーレイとともに終わる。開いたままアンマウントしたもの (連絡先が一覧かツリーを出たか、配置が 1 カラムを出た) は自分から開いて戻らず、2 カラムのタップも後でオーバーレイを開かない。ツリービューでは、選んだ連絡先を別のパスへ動かす作り直しでも、開いたオーバーレイは同じ連絡先のまま付いていて、開き直しもフォーカスの移動もしない。
 - **タッチ**: 面と背景は `touch-action: pinch-zoom` (`SWIPE_OVERLAY_PANEL_TOUCH_ACTION`) を取るため、ピンチはページを拡大し、横の動きはスワイプになり、ヘッダーや背景の上の縦の動きは何も引っ張らない (引いて再読み込みにならない)。縦のスクロール領域はどれも `SWIPE_OVERLAY_SCROLL_AREA_STYLE` (`touch-action: pan-y pinch-zoom` と `overscroll-behavior-y: contain`) を取り、そのスクロールは背後のページへつながらない。スクロールの容器は受け継いだ touch-action を解くので、`SwipeOverlay` に置く内容は、詳細パネルのタブの中身と同じく、自分の縦のスクロール領域それぞれにそのスタイルを与える。ブラウザーが横にパンする要素 (横にスクロールし、touch-action がそれを許すもの) からはスワイプが始まらない。
-- **的とコントラスト**: 閉じるボタンは少なくとも 44 × 44 px、詳細パネルのタブ・コピーのボタン・値のリンク (アドレス・番号・URL。行の箱が 44 px に足りない分の半分 `max(0px, (2.75rem - 1lh) / 2)` を上下に足し、幅は少なくとも 44 px なので、短い値も細い的にならない) は粗いポインターで 44 px (WCAG 2.2 の拡張の的の大きさ)。
+- **的とコントラスト**: 閉じるボタンは少なくとも 44 × 44 px、詳細パネルのタブ・コピーのボタン・値のリンク (アドレス・番号・URL。行の箱が 44 px に足りない分の半分 `max(0px, (2.75rem - 1lh) / 2)` を上下に足し、幅は少なくとも 44 px なので、短い値も細い的にならない) はどのポインターでも 44 px (WCAG 2.2 の拡張の的の大きさ)。
   値のリンクとコピーのボタンはキーボードのフォーカスで 2 px の輪を描く。4 つのタブは幅を等分してスマートフォンにも収まり、長い値は横にスクロールさせずに折り返し、どの文字も明暗どちらの配色でも地に対して 7:1 を保つ。
 - **前提**: プラットフォームの `<dialog>` の `showModal()` (Chromium 37・Firefox 98・Safari 15.4) と `inert` (Chromium 102・Firefox 112・Safari 15.5)。オーバーレイの右端は `--aqcm-overlay-right` に従う (スタイルの節を参照)。
 
@@ -311,7 +328,7 @@ A long press on a contact in the list or the tree view (held for 600 ms without
 - **The release:** a browser may turn the release of the long press into mouse events at the release point, where the backdrop now lies (Chromium hit-tests it again). `useLongPressPopup` consumes the release's `mousedown`, `mouseup` and `click` on the window's capture phase, wherever they land, so no other listener on the page receives them and the popup neither loses its focus nor closes; the click ends the wait, and so does the next press or key (a browser that sends no click).
 - **Layout:** the card is centred in the content area, 16 px from its sides and 24 px from its top and bottom, at most 28rem wide, and scrolls inside when it is taller than the screen. The backdrop dims the page with slate-900 at 50 %, as the detail overlay's does, and the popup's right edge follows `--aqcm-overlay-right` (see Styling).
 - **Gmail:** while `openEmailsWithGmail` is on, a double click on an email address, or two taps within 350 ms, opens Gmail's compose window, as the `popupGmailHint` label says.
-- **Targets:** its links, copy buttons and close button are 44 px targets under a coarse pointer and show the package's 2 px focus ring under the keyboard.
+- **Targets:** its links, copy buttons and close button are 44 px targets under every pointer and show the package's 2 px focus ring under the keyboard.
 - **Requirements:** the same as the detail overlay's, the platform's `<dialog>` with `showModal()` and `inert`.
 
 - **開いている間** は最前面の層 (top layer) にあってホストのどの `z-index` よりも上に描かれ、ページのほか (内容の領域の外にピン留めしたサイドメニューを含む) は不活性になる。フォーカスはダイアログの名前になる見出し (連絡先の名前) から始まり、閉じると開く前の所へ戻る。Tab はポップアップの中を移り、背後のページへは行かない。ポップアップの中のイベントは、開いた行やツリーの React の処理へ届かず、body の文字の選択は止まる。ポップアップはそれらのイベントをダイアログで React を通して止め、ネイティブの伝播もポータルの容器の `document.body` で終わる。窓と文書の捕獲段の受け口と body 自身の受け口はイベントを見るが、文書と窓のバブリング段の受け口は見ない。
@@ -319,7 +336,7 @@ A long press on a contact in the list or the tree view (held for 600 ms without
 - **離したとき**: 長押しを離すと、その点 (いまは背景がある) にマウスのイベントを出すブラウザーがある (Chromium は当たり判定し直す)。`useLongPressPopup` は、離したときの `mousedown`・`mouseup`・`click` を、どこに届くものでも窓の捕獲段で飲むので、ページのほかの受け口はそれらを受けず、ポップアップはフォーカスを失わず閉じもしない。待ちは click で終わり、次の押下かキーでも終わる (click を出さないブラウザー)。
 - **配置**: カードは内容の領域の中央に、左右から 16 px、上下から 24 px 離して置き、幅は最大 28rem。画面より高ければ中でスクロールする。背景は詳細のオーバーレイと同じく半分の不透明度の slate-900 でページを暗くし、ポップアップの右端は `--aqcm-overlay-right` に従う (スタイルの節を参照)。
 - **Gmail**: `openEmailsWithGmail` が有効な間は、メールアドレスのダブルクリックか 350 ms 以内の 2 度のタップで Gmail の作成画面を開く (`popupGmailHint` のラベルが告げるとおり)。
-- **的**: リンク・コピーのボタン・閉じるボタンは粗いポインターで 44 px の的で、キーボードのフォーカスではパッケージの 2 px の輪を描く。
+- **的**: リンク・コピーのボタン・閉じるボタンはどのポインターでも 44 px の的で、キーボードのフォーカスではパッケージの 2 px の輪を描く。
 - **前提**: 詳細のオーバーレイと同じく、プラットフォームの `<dialog>` の `showModal()` と `inert`。
 
 ## List Keyboard / 一覧のキーボード
@@ -755,6 +772,7 @@ Function keys are shown with their arguments; the cells show sample output (`cou
 | `statsRebuilding` | `"Rebuilding..."` | `"再構築中..."` |
 | `statsRebuild` | `"Rebuild Index"` | `"インデックス再構築"` |
 | `statsResetTitle` | `"Reset statistics"` | `"統計をリセット"` |
+| `statsTabsLabel` | `"Statistics tabs"` | `"検索統計タブ"` |
 | `statsOverviewTab` | `"Overview"` | `"概要"` |
 | `statsIndexTab` | `"Index"` | `"Index"` |
 | `statsLevenshteinTab` | `"Levenshtein"` | `"Levenshtein"` |

package/dist/client.d.mts

@@ -306,6 +306,7 @@ type ContactMapOwnLabels = {
     readonly statsRebuilding: string;
     readonly statsRebuild: string;
     readonly statsResetTitle: string;
+    readonly statsTabsLabel: string;
     readonly statsOverviewTab: string;
     readonly statsIndexTab: string;
     readonly statsLevenshteinTab: string;

package/dist/client.d.ts

@@ -306,6 +306,7 @@ type ContactMapOwnLabels = {
     readonly statsRebuilding: string;
     readonly statsRebuild: string;
     readonly statsResetTitle: string;
+    readonly statsTabsLabel: string;
     readonly statsOverviewTab: string;
     readonly statsIndexTab: string;
     readonly statsLevenshteinTab: string;