### Install mj-tiles using npm or bun

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/packages/mj-tiles/README.md

This snippet shows how to install the mj-tiles library using either npm or bun package managers. It's the first step to start using the library in your project.

```bash
npm install mj-tiles
# or
bun add mj-tiles
```

--------------------------------

### Install mj-tiles Package

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Installs the mj-tiles package using npm or bun. This is the initial step to integrate the library into your project.

```bash
npm install mj-tiles
# または
bun add mj-tiles
```

--------------------------------

### Backward Compatibility Examples (TypeScript)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/comparison.md

Provides examples of existing tile notation that are guaranteed to continue working in future versions of mj-tiles. This ensures a smooth transition for users and maintains existing functionality.

```typescript
// これらは全て引き続き動作
<Tiles hand="123m456p789s" />
<Tiles hand="東南西北白發中" />
<Tiles hand="1234567z" />
<Tiles hand="0m0p0s" />
<Tiles hand="r5mr5pr5s" />
```

--------------------------------

### Development Commands for mj-tiles

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/README.md

This snippet outlines the essential commands for developing and building the mj-tiles library. It includes commands for installing dependencies, building the project, and running validation tests.

```bash
bun install      # 依存関係のインストール
bun run build    # ビルド
bun run validate # テスト実行
```

--------------------------------

### Display Mahjong Tiles in Astro

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/packages/mj-tiles/README.md

An example of integrating mj-tiles into an Astro project. It shows how to import the Astro component for `Tiles` and include the library's CSS for proper rendering.

```astro
---
import Tiles from 'mj-tiles/astro/Tiles.astro'
import 'mj-tiles/styles.css'
---

<Tiles hand="123m456p789s東南" />
```

--------------------------------

### Implementing Custom Tile Assets in React

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

This TypeScript example shows how to implement custom tile assets for mj-tiles. It provides two approaches: SVG-based assets using a 'getSvg' function, and URL-based assets using 'getSvg' and 'getUrl' functions. The custom assets are then passed to the TileProvider configuration.

```typescript
import { TileProvider } from "mj-tiles/react";
import type { TileAssets, TileCode } from "mj-tiles/core";

// SVGベースのカスタムアセット
const customSvgAssets: TileAssets = {
  getSvg: (code: TileCode | 'back') => {
    return myCustomSvgs[code] || null;
  }
};

// URLベースのカスタムアセット
const customUrlAssets: TileAssets = {
  getSvg: () => null,
  getUrl: (code: TileCode | 'back', isRotated?: boolean) => {
    const suffix = isRotated ? '_rotated' : '';
    return `/assets/tiles/${code}${suffix}.webp`;
  }
};

function App() {
  return (
    <TileProvider config={{
      assets: customUrlAssets,
      mode: "url"
    }}>
      <Tiles hand="123m456p789s" />
    </TileProvider>
  );
}
```

--------------------------------

### Inline Style Mode Styling with mj-tiles (React)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/styling.md

This example shows how to enable inline styling for mj-tiles components in React. This mode embeds styles directly into the HTML, which is beneficial for environments where CSS file delivery is challenging, such as server-side rendering or bundler-less setups.

```tsx
import { TileProvider, Tiles } from "mj-tiles/react";

<TileProvider config={{ styling: "inline" }}>
  <Tiles hand="123m456p789s" />
</TileProvider>
```

--------------------------------

### React + Viteアプリケーションのテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

React + Viteアプリケーションのテストを実行します。このテストはプロジェクトルートから直接実行可能です。

```bash
# React + Vite（rootから実行可能）
bun test ./apps/react/src/validate.test.tsx
```

--------------------------------

### Next.jsアプリケーションのテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

Next.jsアプリケーションのテストを実行します。テスト実行前に、アプリケーションディレクトリに移動し、ビルドを実行する必要があります。

```bash
# Next.js（ビルドが必要）
cd apps/next && bun run build && bun test app/validate.test.tsx
```

--------------------------------

### Build Process: Copying Static Assets

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/architecture.md

Copies static assets, such as CSS files, from the source directory to the distribution directory. This ensures that necessary styling is available in the final build output.

```bash
#!/bin/bash

# Copies the main CSS file to the distribution directory.
# This ensures that the default styling is included in the package.

cp src/styles.css dist/

# This command assumes:
# - `src/styles.css` exists and contains the necessary styles.
# - `dist/` is the output directory configured in tsconfig.json or by the build script.

```

--------------------------------

### Display Mahjong Tiles in React/Next.js

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/packages/mj-tiles/README.md

Example of using mj-tiles in a React or Next.js application. It demonstrates importing the Tiles and Tile components and the default CSS for styling. The `hand` prop accepts a string representing the tiles.

```tsx
import { Tiles, Tile } from "mj-tiles/react";
import "mj-tiles/styles.css";

function MyComponent() {
  return (
    <div>
      <Tiles hand="123m456p789s東南" />
      <p>単騎 <Tile tile="中" /> 待ち</p>
    </div>
  );
}
```

--------------------------------

### Integrating mj-tiles with Tailwind CSS

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/styling.md

This example demonstrates how to integrate mj-tiles with Tailwind CSS. By importing `mj-tiles/styles.css` and leveraging Tailwind's utility classes and theme customization, you can seamlessly style and override mj-tiles components.

```tsx
import { Tiles } from "mj-tiles/react";
import "mj-tiles/styles.css";  // Tailwindのスタイルと一緒にインポート

<Tiles hand="123m456p789s" />
```

```tsx
// 牌を大きく表示
<Tiles hand="123m" className="[&_.mj-tile]:h-8" />

// 間隔を広げる
<Tiles hand="123m" className="gap-2" />
```

```js
// tailwind.config.js
export default {
  theme: {
    extend: {
      height: {
        'tile': 'var(--mj-tile-height, 1.5em)',
        'tile-lg': '2em',
        'tile-xl': '2.5em',
      },
    },
  },
}

```

```tsx
<Tiles hand="123m" className="[&_.mj-tile]:h-tile-lg" />
```

```css
/* globals.css */
@layer base {
  :root {
    --mj-tile-height: 2em;
  }
}
```

--------------------------------

### Mahjong Notation Reference - Basic (TypeScript)

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Reference for basic Mahjong notation using MPSZ. Covers numbered tiles (m, p, s), honors (kanji and z-format), and red fives (0-format and r5-format).

```typescript
// 数牌
"123m"        // 一萬、二萬、三萬
"456p"        // 四筒、五筒、六筒
"789s"        // 七索、八索、九索

// 字牌（漢字形式）
"東南西北白發中"

// 字牌（z形式）
"1234567z"    // 東=1z, 南=2z, 西=3z, 北=4z, 白=5z, 發=6z, 中=7z

// 赤ドラ
"0m"          // 赤五萬（0形式）
"r5m"         // 赤五萬（r5形式）
"0p" "0s"     // 赤五筒、赤五索
```

--------------------------------

### Mahjong Tile Notation Examples

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/packages/mj-tiles/README.md

Illustrates the different ways to represent mahjong hands using the `hand` prop in mj-tiles. It covers standard number tiles, character tiles (kanji or 'z'), and red fives (0 or 'r5' format).

```tsx
// 数牌
<Tiles hand="123m456p789s" />

// 字牌（漢字 or z形式）
<Tiles hand="東南西北白發中" />
<Tiles hand="1234567z" />

// 赤ドラ
<Tiles hand="0m0p0s" />      // 0形式
<Tiles hand="r5mr5pr5s" />   // r5形式
```

--------------------------------

### Build Process: Generating TypeScript from Assets

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/architecture.md

Automates the generation of TypeScript code containing Base64 encoded image data for mahjong tiles. This step is crucial before the main TypeScript compilation and should be run via `bun run generate`.

```bash
#!/bin/bash

# This script is a placeholder for the actual generation command.
# The real command is likely executed via npm/bun scripts.

# Example: Assuming a 'generate' script exists in package.json
# bun run generate

# The 'generate' script would typically:
# 1. Read all WebP image files from src/assets/tiles-images/.
# 2. Convert each image to a Base64 encoded Data URI.
# 3. Create the `generated.ts` file with a Record mapping tile names to these Data URIs.

echo "Running asset generation..."
# Placeholder for actual generation logic
echo "// Auto-generated file. Do not edit."
echo "export const tileImageBase64Data: Record<string, string> = {\n  // ... generated data ...\n};" > src/assets/generated.ts
echo "Asset generation complete."

```

--------------------------------

### スナップショットの更新 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

モノレポ全体または個別のアプリケーションのスナップショットを更新します。更新するには `--update-snapshots` フラグを使用します。

```bash
# 全体のスナップショット更新
bun run validate --update-snapshots

# 個別アプリのスナップショット更新（例：hono）
cd apps/hono && bun test src/validate.test.ts --update-snapshots
```

--------------------------------

### コアライブラリのユニットテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

コアライブラリ（mj-tiles）のユニットテストのみを実行します。テスト実行前に、パッケージディレクトリに移動する必要があります。

```bash
# コアライブラリのユニットテストのみ実行
cd packages/mj-tiles && bun test
```

--------------------------------

### コアライブラリのテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

コアライブラリ（mj-tiles）のテストを実行します。パッケージディレクトリに移動して実行するか、ルートディレクトリから特定のファイルパスを指定して実行できます。

```bash
# パッケージディレクトリでテスト実行
cd packages/mj-tiles
bun test

# 特定のテストファイルのみ実行
bun test src/core/parser.test.ts
```

--------------------------------

### 麻雀牌表示コンポーネントの使用例 (React, Hono, Astro)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/01_first/spec.md

React (Next.js, Remix), HonoX, および Astro (MDX) 環境での麻雀牌表示コンポーネントの使用例を示します。各フレームワーク固有のインポートパスとコンポーネントの利用方法を解説します。

```tsx
// React / Next.js / Remix
import { Tiles } from 'mj-tiles/react'
<Tiles hand="123m456p789s東南" />
```

```tsx
// HonoX
import { Tiles } from 'mj-tiles/hono'
<Tiles hand="123m456p789s東南" />
```

```astro
---
import Tiles from 'mj-tiles/astro/Tiles.astro'
import Tile from 'mj-tiles/astro/Tile.astro'
---
<Tiles hand="123m456p789s東南" />
単騎 <Tile tile="中" /> 待ち
```

--------------------------------

### モノレポ全体のテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

モノレポ全体のビルドと、全アプリケーションのスナップショットテストを実行します。最初にビルドを実行することが推奨されます。

```bash
# モノレポ全体のビルド（推奨：最初に実行）
bun run build

# 全アプリケーションのスナップショットテストを実行
bun run validate
```

--------------------------------

### Honoアプリケーションのテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

Honoアプリケーションのテストを実行します。テスト実行前に、アプリケーションディレクトリに移動する必要があります。ルートディレクトリからの直接実行は推奨されません。

```bash
# Hono JSX
cd apps/hono && bun test src/validate.test.ts
```

--------------------------------

### Hono JSX: Server-Side Rendering with Tile Components

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Renders Mahjong tiles server-side using Hono JSX components (`TileProvider`, `Tiles`, `Tile`). The `createTileConfig` utility is used to set up the renderer, with 'inline' styling mode recommended. The `TileProvider` passes the renderer configuration down to the tile components.

```tsx
import { Hono } from "hono";
import { TileProvider, Tiles, Tile, createTileConfig } from "mj-tiles/hono";

const app = new Hono();

app.get("/", (c) => {
  const renderer = createTileConfig({ styling: "inline" });

  return c.html(
    <TileProvider value={renderer}>
      <html>
        <body>
          <h1>麻雀手牌</h1>
          <Tiles hand="123m456p789s東南" />
          <p>単騎 <Tile tile="中" /> 待ち</p>
        </body>
      </html>
    </TileProvider>
  );
});

export default app;
```

--------------------------------

### Create Renderer - Core Functionality (TypeScript)

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Generates a framework-agnostic renderer for creating custom renderers. It takes a configuration object including assets, mode, styling, and CSS class names. Outputs HTML for single tiles, hands, and extended hands.

```typescript
import { createRenderer, type RendererConfig, type TileAssets } from "mj-tiles/core";
import { defaultAssets } from "mj-tiles/assets";

// 基本的なレンダラー
const renderer = createRenderer({
  assets: defaultAssets,
  mode: "inline",      // "inline" | "url"
  styling: "class",    // "class" | "inline"
  class: {
    tile: "mj-tile",
    tiles: "mj-tiles",
    error: "mj-tile-error"
  }
});

// 単一牌をレンダリング
const tileHtml = renderer.tile("5m");
// => '<svg aria-label="5m" class="mj-tile">...</svg>'

// 手牌をレンダリング
const handHtml = renderer.hand("123m456p789s");
// => '<span class="mj-tiles">...</span>'

// 拡張記法（副露対応）
const extendedHtml = renderer.handExtended?.("123m 1-23p");
// => '<span class="mj-hand">...</span>'
```

--------------------------------

### React Implementation: Tile Components and Provider

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/architecture.md

Provides React components (`Tile`, `Tiles`) and a context provider (`TileProvider`) for rendering mahjong tiles. Uses `dangerouslySetInnerHTML` for rendering HTML output from the core renderer. Includes a hook for accessing the renderer.

```typescript
import React, { useContext, createContext, ReactNode } from 'react';
import { TileRenderer, RendererConfig } from '../core/renderer';

interface TileContextProps {
  renderer: TileRenderer;
}

const TileContext = createContext<TileContextProps | undefined>(undefined);

interface TileProviderProps {
  config: RendererConfig;
  children: ReactNode;
}

export function TileProvider({ config, children }: TileProviderProps) {
  // Assume createRenderer is imported and used here
  const renderer = createRenderer(config);
  return <TileContext.Provider value={{ renderer }}>{children}</TileContext.Provider>;
}

export function useTileRenderer(): TileRenderer {
  const context = useContext(TileContext);
  if (!context) {
    throw new Error('useTileRenderer must be used within a TileProvider');
  }
  return context.renderer;
}

interface TileProps {
  code: string; // e.g., "1m"
}

export function Tile({ code }: TileProps) {
  const { renderer } = useTileRenderer();
  const html = renderer.renderTile(code as any); // Type assertion might be needed
  return <span dangerouslySetInnerHTML={{ __html: html }} />;
}

interface TilesProps {
  hand: string; // e.g., "123m456p東南"
}

export function Tiles({ hand }: TilesProps) {
  const { renderer } = useTileRenderer();
  const html = renderer.renderHand(hand as any); // Type assertion might be needed
  return <span dangerouslySetInnerHTML={{ __html: html }} />;
}

```

--------------------------------

### Astro Implementation: Singleton Renderer Access

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/architecture.md

Provides direct access to a singleton mahjong tile renderer within Astro components. Exports `.astro` files and is excluded from TypeScript compilation, designed for server-side rendering.

```typescript
import type { TileRenderer, RendererConfig } from '../core/renderer';

// Assume createRenderer is available
// import { createRenderer } from '../core/renderer';

let rendererInstance: TileRenderer | null = null;

/**
 * Gets a singleton instance of the TileRenderer.
 * Configuration should ideally be set once globally or passed during the first call.
 * @param config Optional renderer configuration. If not provided, uses a default or previously set config.
 * @returns A singleton TileRenderer instance.
 */
export function getRenderer(config?: RendererConfig): TileRenderer {
  if (!rendererInstance) {
    // Use provided config or fallback to defaults
    const effectiveConfig = config || { mode: 'inline', styling: 'class' };
    rendererInstance = createRenderer(effectiveConfig);
  }
  // Optionally update config if a new one is provided and differs
  // This part depends on desired behavior for re-configuration
  return rendererInstance;
}

// Example usage within an Astro component (.astro file):
// --- 
// import { getRenderer } from 'mj-tiles/astro';
// const renderer = getRenderer();
// const tileHtml = renderer.renderTile('1m');
// ---
// <div set:html={tileHtml}></div>

```

--------------------------------

### React: Configure Tile Rendering with TileProvider

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Provides rendering configuration to child components in React using `TileProvider`. Allows customization of styling mode, asset loading, and CSS classes. Supports 'class' or 'inline' styling and 'inline' or 'url' modes.

```tsx
import { TileProvider, Tiles, Tile } from "mj-tiles/react";

function App() {
  return (
    <TileProvider config={{
      styling: "inline",  // "class" または "inline"
      mode: "inline",     // "inline" または "url"
      class: {
        tile: "my-tile",
        tiles: "my-tiles",
        error: "my-error"
      }
    }}>
      <Tiles hand="123m456p789s" />
      <p>待ち牌: <Tile tile="東" /></p>
    </TileProvider>
  );
}
```

--------------------------------

### Astroアプリケーションのテスト実行 (Bash)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/testing.md

Astroアプリケーションのテストを実行します。テスト実行前に、アプリケーションディレクトリに移動する必要があります。

```bash
# Astro（.astro + MDX + React/Preact/Solid islands）
cd apps/astro && bun test src/validate.test.ts
```

--------------------------------

### mj-tiles package.json 設定

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/01_first/spec.md

mj-tilesライブラリの`package.json`ファイルの設定を示します。サブパスエクスポート、サイドエフェクト、ファイルリスト、スクリプト、依存関係、および開発依存関係が含まれています。

```json
{
  "name": "mj-tiles",
  "version": "0.0.1",
  "type": "module",
  "sideEffects": false,
  "exports": {
    "./core": {
      "import": {
        "types": "./dist/core/index.d.ts",
        "default": "./dist/core/index.js"
      }
    },
    "./assets": {
      "import": {
        "types": "./dist/assets/index.d.ts",
        "default": "./dist/assets/index.js"
      }
    },
    "./react": {
      "import": {
        "types": "./dist/react/index.d.ts",
        "default": "./dist/react/index.js"
      }
    },
    "./hono": {
      "import": {
        "types": "./dist/hono/index.d.ts",
        "default": "./dist/hono/index.js"
      }
    },
    "./astro": {
      "import": {
        "types": "./dist/astro/index.d.ts",
        "default": "./dist/astro/index.js"
      }
    },
    "./astro/Tile.astro": "./src/astro/Tile.astro",
    "./astro/Tiles.astro": "./src/astro/Tiles.astro",
    "./styles.css": "./dist/styles.css"
  },
  "files": ["dist", "src/astro/*.astro", "README.md"],
  "scripts": {
    "generate": "bun run scripts/generate-assets.ts",
    "build": "bun run generate && bun run build:ts",
    "build:ts": "tsc && bun run build:copy",
    "build:copy": "cp src/styles.css dist/",
    "test": "bun test",
    "prepublishOnly": "bun run build"
  },
  "peerDependencies": {
    "react": ">=18",
    "hono": ">=4",
    "astro": ">=4"
  },
  "peerDependenciesMeta": {
    "react": { "optional": true },
    "hono": { "optional": true },
    "astro": { "optional": true }
  },
  "devDependencies": {
    "@types/bun": "latest",
    "@types/react": "^18",
    "typescript": "^5.0.0",
    "react": "^18",
    "hono": "^4",
    "astro": "^4",
    "svgo": "^3"
  },
  "license": "MIT"
}
```

--------------------------------

### Import Astro Components and CSS

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/apps/astro/src/pages/blog.mdx

Imports Astro components for displaying tiles and a Tiles hand, along with CSS styles for the mj-tiles library. These are used for rendering game state within an Astro application.

```astro
import Tile from 'mj-tiles/astro/Tile.astro'
import Tiles from 'mj-tiles/astro/Tiles.astro'
import 'mj-tiles/styles.css'
```

--------------------------------

### 新篠ゆう方式の記法例 (MPSZ拡張表記案)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/comparison.md

新篠ゆう方式（MPSZ拡張表記案）による副露（チー、ポン、カン）の表現例です。鳴きの方向性や加槓・暗槓の区別も詳細に表現可能です。kobalab準拠でプログラム実装しやすいのが特徴です。

```text
2-13m           // 二萬をチー（上家から）
55-5p           // 五筒をポン（対面から）
444-4s          // 四索を大明槓（下家から）
55=50p          // 五筒を加槓
1111+z          // 東を暗槓
3456s3s         // 三四五六索で三索をツモ
```

--------------------------------

### Hono JSX Implementation: Tile Components and Provider

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/architecture.md

Implements mahjong tile rendering for the Hono JSX ecosystem. It mirrors the React implementation with a Context API (`TileProvider`) and components (`Tile`, `Tiles`), optimized for environments without bundlers using `styling: 'inline'`.

```typescript
import { FC, createContext, useContext, html } from 'hono/jsx';
import type { TileRenderer, RendererConfig } from '../core/renderer';

// Assuming createRenderer is available
// import { createRenderer } from '../core/renderer';

interface TileContextProps {
  renderer: TileRenderer;
}

const TileContext = createContext<TileContextProps | undefined>(undefined);

interface TileProviderProps {
  config: RendererConfig;
  children: FC;
}

export function TileProvider({ config, children }: TileProviderProps) {
  const renderer = createRenderer(config);
  return <TileContext.Provider value={{ renderer }}>{children}</TileContext.Provider>;
}

export function useTileRenderer(): TileRenderer {
  const context = useContext(TileContext);
  if (!context) {
    throw new Error('useTileRenderer must be used within a TileProvider');
  }
  return context.renderer;
}

interface TileProps {
  code: string;
}

export const Tile: FC<TileProps> = ({ code }) => {
  const { renderer } = useTileRenderer();
  const renderedHtml = renderer.renderTile(code as any);
  return html`<span dangerouslySetInnerHTML={{ __html: "${renderedHtml}" }} />`;
};

interface TilesProps {
  hand: string;
}

export const Tiles: FC<TilesProps> = ({ hand }) => {
  const { renderer } = useTileRenderer();
  const renderedHtml = renderer.renderHand(hand as any);
  return html`<span dangerouslySetInnerHTML={{ __html: "${renderedHtml}" }} />`;
};

```

--------------------------------

### ハイブリッド記法：状態修飾子の採用例 (TypeScript)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/comparison.md

ハイブリッド記法において、牌画作成くん方式から選択的に採用した状態修飾子（y: 横向き、a: 赤ドラ、m/l: ツモ/ロン牌）の使用例です。ツモ牌の明示や立直宣言牌の表現を示します。

```typescript
// y: 横向き（副露・立直）
// a: 赤ドラ（0m記法の代替として）
// m/l: ツモ/ロン牌
<Tiles hand="123m 2-13p 5pm" />    // ツモ牌の明示
<Tiles hand="123m ya5p" />         // 赤5pで立直
```

--------------------------------

### カスタム麻雀牌アセットの作成と利用 (Core)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/01_first/spec.md

mj-tilesのコア機能を使用して、カスタムSVGアセットを定義し、麻雀牌レンダラーを作成する方法を示します。`createRenderer`関数と`TileAssets`インターフェースを使用して、独自の牌画像を提供します。

```typescript
import { createRenderer } from 'mj-tiles/core'
import type { TileAssets } from 'mj-tiles/core'

const customAssets: TileAssets = {
  getSvg: (code) => myCustomSvgs[code]
}
const renderer = createRenderer({ assets: customAssets })
```

--------------------------------

### Astro: Global Tile Configuration and Renderer Access

Source: https://context7.com/modernmahjongsociety/mj-tiles/llms.txt

Configures tile rendering globally in Astro using `configureTiles` and retrieves the renderer instance with `getRenderer`. This allows for consistent styling and custom rendering across the Astro application. The `Tiles.astro` component can then utilize these global settings.

```astro
---
import { configureTiles, getRenderer } from 'mj-tiles/astro'
import Tiles from 'mj-tiles/astro/Tiles.astro'

// グローバル設定を変更
configureTiles({
  styling: "inline",
  mode: "inline"
});

// カスタムレンダリング
const renderer = getRenderer();
const customHtml = renderer.hand("123m456p");
---

<html>
  <body>
    <Tiles hand="789s東南西北" />
    <div set:html={customHtml} />
  </body>
</html>
```

--------------------------------

### データ構造の拡張 (TypeScript)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/spec.md

mj-tilesライブラリのデータ構造を拡張するTypeScriptの例です。牌の状態（回転、伏せ、ツモ/ロン）や副露情報を保持できるように `TileState` と `MeldInfo` 型を定義しています。赤ドラは `code` で表現され、牌画作成くん方式の入力は内部表現に変換されます。

```typescript
// 現在: TileCode = "1m" | "2m" | ... | "7z" | "0m" | "0p" | "0s"

// 拡張後
type TileState = {
  code: TileCode;         // "1m" | "2m" | ... | "7z" | "0m" | "0p" | "0s"
  // 牌の状態（表示用）
  isRotated?: boolean;    // y: 横向き（副露牌・立直宣言牌）
  isFaceDown?: boolean;   // o: 伏せ牌（暗槓）
  isTsumo?: boolean;      // m: ツモ牌
  isRon?: boolean;        // l: ロン牌
  // 注: 赤ドラは code = "0m" | "0p" | "0s" で表現（isRed フラグは不要）
  // 注: 牌画作成くん方式の "a5m" は内部的に "0m" に変換される
};

type MeldInfo = {
  type: 'chii' | 'pon' | 'daiminkan' | 'kakan' | 'ankan';
  tiles: TileState[];
  // 鳴きの情報（mspz拡張方式ベース）
  from?: 'kamicha' | 'toimen' | 'shimocha'; // 鳴きの方向（暗槓は undefined）
  calledTileIndex?: number; // 鳴いた牌の位置（0始まり）
};

type Hand = {
  concealed: TileState[]; // 門前牌
  melds: MeldInfo[];      // 副露面子
};

// 設計の特徴:
// - 赤ドラは `code` で表現（"0m"", ""0p"", ""0s""）、専用フラグは不要
// - 方向情報は明示的に `from` フィールドで保持（推測不要）
// - 牌画作成くん方式の入力は正規化時に mspz 拡張方式に変換
```

--------------------------------

### ハイブリッド記法：基本的な副露 (TypeScript)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/comparison.md

新篠ゆう方式をベースに、牌画作成くん方式から選択的に採用した状態修飾子を組み合わせたハイブリッド記法の実装例です。基本的な副露（チー、ポン）を表現します。

```typescript
// 現行
<Tiles hand="123m456p789s" />

// 拡張後
<Tiles hand="123m 2-13p 55-5s" />  // チー + ポン
<Tiles hand="12m 444-4s 666=z" />  // 大明槓 + 加槓
<Tiles hand="12m 1111+z 55s" />    // 暗槓
```

--------------------------------

### ハイブリッド記法：高度な表現の採用例 (TypeScript)

Source: https://github.com/modernmahjongsociety/mj-tiles/blob/main/docs/spec/02_pattern/comparison.md

ハイブリッド記法において、牌画作成くん方式から選択的に採用した高度な表現（g: ツモ切り、o: 伏せ牌、d: ドラ、j: 捨て牌列）の使用例です。これらの機能はオプションとして実装される可能性があります。

```typescript
// g: ツモ切り
// o: 伏せ牌
// d: ドラ
// j: 捨て牌列
```