@omit-design/preset-mobile 0.2.4 → 0.3.0

package/PATTERNS.md

@@ -1,134 +1,14 @@
-# omit-design preset-mobile — 设计模式目录
+# Patterns are project-local
 
-所有业务页面(`design/**/*.tsx`)必须从这里挑一个模式作为骨架,并在文件头标注 `// @pattern: <name>`。
+Starting in 0.3.x, **patterns no longer live in `@omit-design/preset-mobile`**. They live in your project's `patterns/` directory and are owned by you.
 
-新增模式 → 用 `.claude/skills/add-pattern`。
+The recommended creation flow is:
 
-每个 pattern 都有可复制的 **Template**。`new-design` skill 优先复制对应模板,再替换占位符。
+1. Write a PRD in the workspace's **Library → PRDs** tab
+2. Click "Copy Claude prompt" and paste into Claude Code
+3. The `new-design` skill picks an existing pattern, or — if nothing fits — calls `add-pattern` to create one and writes it into `<project>/patterns/<name>/`
+4. Review and tweak the new pattern in **Library → Patterns**
 
----
+Eight starter patterns ship with `omit-design init` (`list-view`, `detail-view`, `form-view`, `sheet-action`, `dialog-view`, `welcome-view`, `dashboard`, `tab-view`). Use `init --no-starters` to opt out.
 
-## list-view
-
-**用途**:一屏内展示同质条目的集合,每个条目可点击进详情。
-
-**骨架**:
-- `OmHeader` — 标题(含或不含返回)
-- 可选:`OmSearchBar` / tab 条 / 分类胶囊
-- `IonList` 或原生 `div` 包裹一组行(`OmListRow` / `OmCouponCard` / `OmSettingRow` / 自定义卡)
-- 列表空态:`OmEmptyState` 居中提示
-
-**Template**:[./templates/list-view.tmpl.tsx](./templates/list-view.tmpl.tsx)
-
-**何时不用**:条目数 ≤ 3 → 用 `dashboard` 或单独卡片
-
----
-
-## detail-view
-
-**用途**:从列表跳进的单条详情,通常带主操作按钮。
-
-**骨架**:
-- `OmHeader` + `IonBackButton`(返回上一级)
-- `OmCard`(基本信息)
-- 0~N 个 `OmCard` / 列表分块(关联信息分区)
-- 底部 1 个主操作 `OmButton expand="block"` 或「取消 / 确认」双按钮
-
-**Template**:[./templates/detail-view.tmpl.tsx](./templates/detail-view.tmpl.tsx)
-
-**何时不用**:编辑场景 → 用 `form-view`
-
----
-
-## form-view
-
-**用途**:新建或编辑一条记录。
-
-**骨架**:
-- `OmHeader` + `IonBackButton`(返回/取消)
-- 一组 `OmInput` / `OmSelect`,按业务分组
-- 内联错误态(红框 + 红色辅助文案)
-- 底部固定 `OmButton expand="block"` 提交
-- 可选:提交结果用 `OmDialog` 弹出
-
-**Template**:[./templates/form-view.tmpl.tsx](./templates/form-view.tmpl.tsx)
-
----
-
-## sheet-action
-
-**用途**:从底部弹起的操作菜单 / 详情抽屉,避免离开当前上下文。设计稿语境下不走 JS 回调,而是每个 sheet 一张独立稿(同 `dialog-view` 哲学)。
-
-**骨架**:
-- `OmPage padding="none"`
-- `OmSheet title="..." dismissHref="..."` 内部放:
-  - 一组按钮条(菜单形态)
-  - 或纯信息块(明细形态)
-- 关闭行为:点击 scrim / 右上 × / 菜单条任意一项跳转走
-
-**Template**:[./templates/sheet-action.tmpl.tsx](./templates/sheet-action.tmpl.tsx)
-
-**何时不用**:只展示一句提示 + 单按钮 → `dialog-view`;需要录入 → `form-view`
-
----
-
-## dialog-view
-
-**用途**:把一个"对话框状态"当成一张独立的设计稿。设计稿工具语境下,弹窗不是 JS 回调,而是一张可独立访问的稿 — 每个状态有 URL、侧边目录里可点。
-
-**骨架**:
-- `OmPage padding="none" header={<OmHeader .../>}`(通常复用来源页的 header)
-- 背景层:来源页的 frozen 快照(表单禁用,仅作视觉背景),或纯渐变背景
-- `OmDialog` — icon / title / subtitle + 一个主按钮;按钮通过 `confirmHref` 跳转到下一张稿
-
-**Template**:[./templates/dialog-view.tmpl.tsx](./templates/dialog-view.tmpl.tsx)
-
-**何时不用**:需要输入 / 选项 → 独立 `form-view`;纯操作菜单 → `sheet-action`
-
----
-
-## welcome-view
-
-**用途**:启动 / 欢迎 / 引导页。品牌 logo + 一句话欢迎语 + 单一主 CTA。不接任何表单。
-
-**骨架**:
-- `OmPage padding="none"` 自己控制留白
-- 品牌头区:LOGO + 品名(可含副标题)
-- 欢迎语:主标题 + 描述
-- 底部单一 `OmButton expand="block"` 主操作
-- 可选:最底部版本号
-
-**Template**:[./templates/welcome-view.tmpl.tsx](./templates/welcome-view.tmpl.tsx)
-
-**何时不用**:带输入 → `form-view`;功能介绍多屏滑动 → 需新增 `onboarding-carousel` 模式
-
----
-
-## dashboard
-
-**用途**:工作台 / 首页式聚合页 — 顶部状态指标(数字卡)+ 功能宫格入口。
-非 tab 导航、非列表、非表单,而是多入口聚合。
-
-**骨架**:
-- `OmHeader` + 返回
-- 若干 `OmStatCard`(指标区)
-- 3 列 `OmMenuCard` 宫格(主功能入口,可用 `disabled + badge="二期"` 标灰态)
-
-**Template**:[./templates/dashboard.tmpl.tsx](./templates/dashboard.tmpl.tsx)
-
-**何时不用**:单一主操作 → `welcome-view`;扁平列表 → `list-view`
-
----
-
-## tab-view
-
-**用途**:底部主导航 tab 之一 — 主品牌 header + 主体内容 + 底部 4 个 tab 切换。
-
-**骨架**:
-- `OmAppBar variant="brand"` 顶部品牌标题 + 右上角头像
-- 主体内容(表单 / 列表 / 卡片 / 空态)
-- 底部 `OmTabBar` 多个主 tab
-
-**Template**:[./templates/tab-view.tmpl.tsx](./templates/tab-view.tmpl.tsx)
-
-**何时不用**:无底部 tab 导航(如独立表单页)→ `form-view`
+For the description and skeleton of each starter, read its `README.md` under your project's `patterns/<name>/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omit-design/preset-mobile",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "description": "Mobile design preset for omit-design: Om* whitelist components, --om-* / --ion-* token map, Ionic 8 runtime.",
   "main": "./index.ts",
@@ -13,20 +13,16 @@
     "./components": "./components/index.ts",
     "./tokens": "./tokens/index.ts",
     "./preset.manifest": "./preset.manifest.ts",
-    "./theme/variables.css": "./theme/variables.css",
-    "./templates/*": "./templates/*",
-    "./PATTERNS.md": "./PATTERNS.md"
+    "./theme/variables.css": "./theme/variables.css"
   },
   "files": [
     "index.ts",
     "components",
     "tokens",
     "theme",
-    "templates",
     "preset.manifest.ts",
     "catalog.tsx",
     "PATTERNS.md",
-    "patterns.config.json",
     "README.md"
   ],
   "license": "MIT",
@@ -42,7 +38,7 @@
   },
   "peerDependencies": {
     "@ionic/react": "^8",
-    "@omit-design/engine": "^0.2.0",
+    "@omit-design/engine": "^0.3.0",
     "ionicons": "^7 || ^8",
     "react": "^19",
     "react-router-dom": "^6"

package/patterns.config.json

@@ -1,13 +0,0 @@
-{
-  "$schema": "./patterns.schema.json",
-  "patterns": {
-    "list-view": ["OmListRow", "OmCouponCard", "OmSettingRow", "OmProductCard", "OmMenuCard", "OmEmptyState"],
-    "detail-view": ["OmCard"],
-    "form-view": ["OmInput", "OmSelect", "OmNumpad"],
-    "sheet-action": ["OmSheet"],
-    "dialog-view": ["OmDialog"],
-    "welcome-view": ["OmButton"],
-    "dashboard": ["OmStatCard", "OmMenuCard"],
-    "tab-view": ["OmTabBar"]
-  }
-}

package/templates/dashboard.tmpl.tsx

@@ -1,90 +0,0 @@
-// @pattern: dashboard
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta + hero 文案
-//   2. STATS / TILES 换成真实 mock import
-//   3. 给 TILES 加合适 ionicons + href
-
-export const meta = {
-  name: "TODO Dashboard",
-  pattern: "dashboard",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { IonBackButton } from "@ionic/react";
-import {
-  appsOutline,
-  cashOutline,
-  receiptOutline,
-} from "ionicons/icons";
-import {
-  OmHeader,
-  OmMenuCard,
-  OmPage,
-  OmStatCard,
-} from "@omit-design/preset-mobile";
-
-interface Stat {
-  label: string;
-  value: string;
-  caption?: string;
-}
-
-interface Tile {
-  id: string;
-  icon: string;
-  label: string;
-  href?: string;
-  disabled?: boolean;
-  badge?: string;
-}
-
-// TODO: 替换为真实 mock import
-const STATS: Stat[] = [
-  { label: "Today's revenue", value: "$0.00", caption: "Includes settled amount" },
-  { label: "Order count", value: "0", caption: "orders" },
-];
-
-const TILES: Tile[] = [
-  { id: "pos", icon: cashOutline, label: "POS", href: "/designs/TODO" },
-  { id: "orders", icon: receiptOutline, label: "Orders", href: "/designs/TODO" },
-];
-
-export function TodoDashboardPage() {
-  return (
-    <OmPage
-      padding="lg"
-      header={
-        <OmHeader
-          title="TODO Dashboard"
-          start={<IonBackButton defaultHref="/designs/TODO-from" />}
-        />
-      }
-    >
-      <div>
-        {STATS.map((s) => (
-          <OmStatCard
-            key={s.label}
-            label={s.label}
-            value={s.value}
-            caption={s.caption}
-          />
-        ))}
-      </div>
-
-      <div>
-        {TILES.map((t) => (
-          <OmMenuCard
-            key={t.id}
-            icon={t.icon ?? appsOutline}
-            label={t.label}
-            href={t.href}
-            disabled={t.disabled}
-            badge={t.badge}
-          />
-        ))}
-      </div>
-    </OmPage>
-  );
-}
-export default TodoDashboardPage;

package/templates/detail-view.tmpl.tsx

@@ -1,60 +0,0 @@
-// @pattern: detail-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta + 字段
-//   2. 把 RECORD 换成真实 mock import
-//   3. 调整 IonBackButton 的 defaultHref
-//   4. 主操作改成业务跳转
-
-export const meta = {
-  name: "TODO Detail page",
-  pattern: "detail-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { IonBackButton } from "@ionic/react";
-import {
-  OmButton,
-  OmCard,
-  OmHeader,
-  OmPage,
-} from "@omit-design/preset-mobile";
-
-interface Record {
-  id: string;
-  title: string;
-  amount: number;
-  status: string;
-}
-
-// TODO: 替换为真实 mock import
-const RECORD: Record = {
-  id: "TODO",
-  title: "Sample title",
-  amount: 0,
-  status: "TODO status",
-};
-
-export function TodoDetailPage() {
-  return (
-    <OmPage
-      padding="lg"
-      header={
-        <OmHeader
-          title="TODO Detail"
-          start={<IonBackButton defaultHref="/designs/TODO" />}
-        />
-      }
-    >
-      <OmCard title={RECORD.title} subtitle={`#${RECORD.id}`}>
-        <p>Amount: ${RECORD.amount.toFixed(2)}</p>
-        <p>Status: {RECORD.status}</p>
-      </OmCard>
-
-      {/* TODO: 关联信息分块 —— 增加更多 OmCard */}
-
-      <OmButton expand="block">Primary action</OmButton>
-    </OmPage>
-  );
-}
-export default TodoDetailPage;

package/templates/dialog-view.tmpl.tsx

@@ -1,34 +0,0 @@
-// @pattern: dialog-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta
-//   2. icon 用合适的 ionicons
-//   3. cancelHref / confirmHref 指向真实路由
-//   4. iconColor / confirmColor 按场景设(danger / warning / success / primary)
-
-export const meta = {
-  name: "TODO Dialog",
-  pattern: "dialog-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { informationCircleOutline } from "ionicons/icons";
-import { OmDialog, OmPage } from "@omit-design/preset-mobile";
-
-export function TodoDialogPage() {
-  return (
-    <OmPage padding="none">
-      <OmDialog
-        icon={informationCircleOutline}
-        iconColor="primary"
-        title="TODO Title"
-        subtitle="TODO subtitle description."
-        cancelText="Cancel"
-        cancelHref="/designs/TODO-from"
-        confirmText="Confirm"
-        confirmHref="/designs/TODO-next"
-      />
-    </OmPage>
-  );
-}
-export default TodoDialogPage;

package/templates/form-view.tmpl.tsx

@@ -1,52 +0,0 @@
-// @pattern: form-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta + 字段
-//   2. 调整 useState 初始值与字段标签
-//   3. 提交按钮 navigate 到下一张稿
-//   4. IonBackButton defaultHref 改成上一级
-
-export const meta = {
-  name: "TODO Form page",
-  pattern: "form-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { IonBackButton } from "@ionic/react";
-import {
-  OmButton,
-  OmHeader,
-  OmInput,
-  OmPage,
-} from "@omit-design/preset-mobile";
-
-export function TodoFormPage() {
-  const navigate = useNavigate();
-  const [field1, setField1] = useState("");
-  const [field2, setField2] = useState("");
-
-  return (
-    <OmPage
-      padding="lg"
-      header={
-        <OmHeader
-          title="TODO Form"
-          start={<IonBackButton defaultHref="/designs/TODO" />}
-        />
-      }
-    >
-      <OmInput label="Field one" value={field1} onChange={setField1} />
-      <OmInput label="Field two" value={field2} onChange={setField2} />
-
-      <OmButton
-        expand="block"
-        onClick={() => navigate("/designs/TODO-next")}
-      >
-        Submit
-      </OmButton>
-    </OmPage>
-  );
-}
-export default TodoFormPage;

package/templates/list-view.tmpl.tsx

@@ -1,58 +0,0 @@
-// @pattern: list-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta.name / description
-//   2. 把 ITEMS 换成真实 mock import
-//   3. 替换 IonBackButton 的 defaultHref
-//   4. 调整空态文案
-
-export const meta = {
-  name: "TODO List page",
-  pattern: "list-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { IonBackButton, IonList } from "@ionic/react";
-import {
-  OmEmptyState,
-  OmHeader,
-  OmListRow,
-  OmPage,
-} from "@omit-design/preset-mobile";
-
-interface Item {
-  id: string;
-  title: string;
-  detail?: string;
-}
-
-// TODO: 替换为 import { items } from ""./mock/<group>" 相对路径";
-const ITEMS: Item[] = [
-  { id: "1", title: "Sample item 1", detail: "Subinfo" },
-  { id: "2", title: "Sample item 2" },
-];
-
-export function TodoListPage() {
-  return (
-    <OmPage
-      padding="none"
-      header={
-        <OmHeader
-          title="TODO Title"
-          start={<IonBackButton defaultHref="/designs/TODO" />}
-        />
-      }
-    >
-      {ITEMS.length === 0 ? (
-        <OmEmptyState title="No data" description="TODO empty-state description" />
-      ) : (
-        <IonList lines="none">
-          {ITEMS.map((it) => (
-            <OmListRow key={it.id} title={it.title} detail={it.detail} />
-          ))}
-        </IonList>
-      )}
-    </OmPage>
-  );
-}
-export default TodoListPage;

package/templates/sheet-action.tmpl.tsx

@@ -1,52 +0,0 @@
-// @pattern: sheet-action
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta
-//   2. 替换 ITEMS 为业务菜单项
-//   3. dismissHref 改成来源页路径
-
-export const meta = {
-  name: "TODO Action menu",
-  pattern: "sheet-action",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { useNavigate } from "react-router-dom";
-import { IonIcon } from "@ionic/react";
-import { ellipsisHorizontalOutline } from "ionicons/icons";
-import { OmPage, OmSheet } from "@omit-design/preset-mobile";
-
-interface MenuItem {
-  label: string;
-  icon: string;
-  href: string;
-  danger?: boolean;
-}
-
-const ITEMS: MenuItem[] = [
-  { label: "TODO Item one", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
-  { label: "TODO Item two", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
-];
-
-export function TodoSheetActionPage() {
-  const navigate = useNavigate();
-  return (
-    <OmPage padding="none">
-      <OmSheet title="TODO Title" dismissHref="/designs/TODO-from">
-        <div>
-          {ITEMS.map((it) => (
-            <button
-              key={it.label}
-              type="button"
-              onClick={() => navigate(it.href)}
-            >
-              <IonIcon icon={it.icon} />
-              {it.label}
-            </button>
-          ))}
-        </div>
-      </OmSheet>
-    </OmPage>
-  );
-}
-export default TodoSheetActionPage;

package/templates/tab-view.tmpl.tsx

@@ -1,51 +0,0 @@
-// @pattern: tab-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta + 品牌文案
-//   2. 主体内容替换为业务(列表/表单/空态)
-//   3. TABS 列表通常项目级常量 —— 抽到 shell 文件复用更好
-//
-// 注:tab-view 通常由 MemberShell 等 shell 文件统一管理 OmTabBar。
-// 本 template 展示扁平结构,首批落地后可重构为 shell。
-
-export const meta = {
-  name: "TODO Tab page",
-  pattern: "tab-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import {
-  cubeOutline,
-  peopleOutline,
-  receiptOutline,
-  settingsOutline,
-} from "ionicons/icons";
-import {
-  OmAppBar,
-  OmPage,
-  OmTabBar,
-  type OmTabItem,
-} from "@omit-design/preset-mobile";
-
-const TABS: OmTabItem[] = [
-  { tab: "stored", href: "/designs/TODO-stored", label: "Stored", icon: cubeOutline },
-  { tab: "orders", href: "/designs/TODO-orders", label: "Orders", icon: receiptOutline },
-  { tab: "member", href: "/designs/TODO-member", label: "Members", icon: peopleOutline },
-  { tab: "settings", href: "/designs/TODO-settings", label: "Settings", icon: settingsOutline },
-];
-
-export function TodoTabPage() {
-  return (
-    <OmPage
-      padding="lg"
-      header={<OmAppBar variant="brand" brandTitle="TODO Brand" />}
-    >
-      <div>
-        {/* TODO: 主体内容 —— 表单 / 列表 / 空态 */}
-        <h1>TODO Tab page body</h1>
-      </div>
-      <OmTabBar items={TABS} />
-    </OmPage>
-  );
-}
-export default TodoTabPage;

package/templates/welcome-view.tmpl.tsx

@@ -1,38 +0,0 @@
-// @pattern: welcome-view
-// TEMPLATE — 复制到 design/<filename>/<filename>.tsx 后:
-//   1. 替换 meta
-//   2. 接入真实品牌 logo 组件(可选)
-//   3. CTA navigate 到下一张稿
-//   4. tagline / version 走 mock 或常量
-
-export const meta = {
-  name: "TODO Welcome page",
-  pattern: "welcome-view",
-  description: "TODO one-line description",
-  source: "prd",
-} as const;
-
-import { useNavigate } from "react-router-dom";
-import { OmButton, OmPage } from "@omit-design/preset-mobile";
-
-export function TodoWelcomePage() {
-  const navigate = useNavigate();
-
-  return (
-    <OmPage padding="none">
-      {/* TODO: 替换为品牌 logo 组件 */}
-      <div>
-        <h1>Welcome</h1>
-        <p>TODO welcome message</p>
-      </div>
-
-      <OmButton
-        expand="block"
-        onClick={() => navigate("/designs/TODO-next")}
-      >
-        Get started
-      </OmButton>
-    </OmPage>
-  );
-}
-export default TodoWelcomePage;