Core Types マニュアル (types.ts)

src/core/types.ts では、Lism UI-Vue の根幹をなすプロパティの型定義を行っています。LismCSS（本家）の型と、Vue 向けの独自の型がどのように組み合わされているかを以下で解説します。

1. コアスタイル・レイアウトプロパティの型

本家の lism-css から、カラーやマージンなどのスタイル関連プロパティの定義をインポートし、基底型としてまとめています。

`LismCoreBaseProps`

export type LismCoreBaseProps = Partial<PropValueTypes & StateProps & LayoutProps>

説明: LismCSS 本家の「純粋なCSSとレイアウト関連のプロパティ」のみを集めた型です。
特徴: これには as や tag などの HTML 描画に関する指定は含まれていません。

2. Vue コンポーネント用の基底型

上記のスタイルプロパティに、Vueのコンポーネントとして出力するための仕組み（タグ名の指定など）を加えた型です。

`LismBaseProps`

export type LismBaseProps = LismCoreProps & {
  tag?: keyof HTMLElementTagNameMap | (string & {})
  as?: keyof HTMLElementTagNameMap | (string & {}) | Component
  variant?: string
  lismClass?: string
  exProps?: Record<string, unknown>
}

説明: プロジェクト内のほぼ全てのコンポーネント（LismBoxやLismCenterなど）で Props のベースとして使用される重要な型です。
特徴:
- tag や as には、keyof HTMLElementTagNameMap（標準HTMLタグ名）が入っており、自動的に型サジェストが有効になります。
- また (string & {}) や Component を付与することで、サジェストを保ったままカスタムタグやVueコンポーネントによる上書きも可能にしています。

`LismProps`

export type LismProps = LismBaseProps & {
  [key: string]: unknown
}

説明: LismBaseProps を拡張して、任意の属性（class, style, data-* など）を許可するためのインデックスシグネチャを持たせています。

3. セマンティックラッパーごとの厳格な型定義

Text や Inline などのセマンティックな意味を持つコンポーネントには、さらなる型制限・拡張を行うための専用 Props 型を用意しています。

`TextProps` / `GroupProps` / `InlineProps` 等

本家 LismCSS からインポートした TextAllowedTag（例: 'p' | 'div' | ...）などを as 型に上書き拡張しています。

// lism-css 公式のルールに則り、使用可能なタグを限定
export type TextProps = LismBaseProps & { as?: TextAllowedTag }

これにより、例えば <LismText as=" と打ち込んだときに、p や div といった限定的なサジェストがエディタ上で優先して表示されます。

独自のプロパティを持つ型（例: `HeadingProps`）

export type HeadingProps = LismBaseProps & {
  lv?: 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'
}
export type LinkProps = LismBaseProps & {
  href?: string
  target?: string
}
// etc...

説明: LismHeading の lv や LismLink の href など、特定のコンポーネントにのみ必須・頻出となるプロパティを事前に定義し、こちらも同時にサジェストされるようにしています。

Core Types マニュアル (types.ts)

1. コアスタイル・レイアウトプロパティの型

LismCoreBaseProps

2. Vue コンポーネント用の基底型

LismBaseProps

LismProps