## ルール

UIの抽象はコンポーネントです。zudo-reactの`.tsx`コンポーネントを、対応するzudo-windユーティリティとセマンティックトークンで構成します。バリアントはpropsで表します。コンパイラーが対応しない機能には`zd-`名の狭いスコープのCSSを記述し、authored classのカバレッジを登録します。独自のユーティリティ名がCSSを生成すると仮定しないでください。



## zudo-docでの使用

サーバーコンポーネントは`Child`/`Description`を返し、クライアントJavaScriptなしでHTMLを生成します。クライアントコンポーネントは`"use client"`を追加し、スコープが所有するシグナルを使用します。どちらも`class`とJSX source `@takazudo/zfb/zudo-react`を使用し、React/Preactのノード型は使用しません。



### サーバーレンダリングのコンポーネント

```tsx title="src/components/my-badge.tsx"
/** @jsxRuntime automatic */
/** @jsxImportSource @takazudo/zfb/zudo-react */
import type { Child } from "@takazudo/zfb/zudo-react";

export function MyBadge({ children }: { children?: Child }) {
  return (
    <span class="rounded-full bg-surface px-hsp-sm py-vsp-2xs text-caption text-fg">
      {children}
    </span>
  );
}
```



### クライアントでハイドレートするアイランド

固定ターゲットのサーバー境界とシリアライズ可能なpropsを使用します。スキャナー到達性と寿命は[Custom Components](https://zudo-doc.takazudomodular.com/ja/docs/guides/custom-components#%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%82%A4%E3%83%A9%E3%83%B3%E3%83%89%EF%BC%88%E5%AE%9F%E9%A8%93%E7%9A%84%EF%BC%89)を参照してください。

```tsx title="src/components/counter.tsx"
/** @jsxRuntime automatic */
/** @jsxImportSource @takazudo/zfb/zudo-react */
"use client";

import { computed, getScope, signal } from "@takazudo/zfb/zudo-react";

export default function Counter() {
  const scope = getScope();
  const count = signal(0);
  const label = computed(() => `Count: ${count.value}`);

  scope.onActivate(() => {
    // Browser-only setup belongs here. Return cleanup when needed.
  });

  return (
    <button
      type="button"
      class="rounded-full bg-surface px-hsp-sm py-vsp-2xs text-caption text-fg"
      on:click={() => { count.value += 1; }}
    >
      {label}
    </button>
  );
}
```



## Propsによるコンポーネントバリアント

バリアントに型を付けます。表示専用なら静的なクラスのlookupで十分です。シグナルに依存するバリアントは`computed`でセットアップ後の変更を反映します。



## コンポーネントの合成

小さいコンポーネントを合成します。変化するリストにはキー付き`For`を使い、固定されたサーバーコンテンツなら通常の配列mapを使えます。保持された`Show(true)`の子は、ほかの値が変わってもローカル状態をリセットしません。構造境界は制約されたtable親の外に置きます。



## zudo-docのデザイントークンを使う

`text-fg`、`bg-surface`、`p-hsp-md`、`text-small`を使用します。CSSカスタムプロパティは既存トークンの値を変更します。新しいユーティリティ名には`wind.tokens`の設定も必要です。[Design System](https://zudo-doc.takazudomodular.com/ja/docs/reference/design-system)と[Color](https://zudo-doc.takazudomodular.com/ja/docs/reference/color)を参照してください。





## カスタムCSSを使う場合

`.zd-content`のタイポグラフィ、リセット補正、コンポーネントシームはパッケージが所有します。プロジェクトはコピーせず公開CSSをインポートします。カスタムプロパティはインポート後の`:root`で上書きします。未対応のユーティリティや明示的なコンポーネントの細部にはスコープを限定したCSSを使い、カスケードを確認します。生成ユーティリティはレイヤー化されず手書きCSSの後に配置されるため、レイヤーだけでは上書きの順序を制御できません。グローバルな`!important`よりコンポーネントに限定したセレクターを優先します。



## ルール一覧

1. コンポーネントを合成し、型付きpropsでバリアントを表す。
2. 対応するユーティリティとセマンティックトークンを使う。
3. コンパイラーの契約に応じてスコープ付きCSSを記述する。
4. 状態とブラウザーのcleanupを所有スコープに所属させる。
5. カスタマイズ後は生成CSSと実際の操作を確認する。