@ux7suit/create-ux7-app 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# create-ux7-app
+
+UX7 Suit platformu için Module Federation tabanlı bir demo/app scaffold aracı.
+
+```
+npm create ux7-app@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Bu, [UX7 Suit](https://ux7suit.com) shell'i içine bağımsız BSP olarak deploy edilecek,
+CONTRACT.md sözleşmesine uygun CRUD + Module Federation remote yapısına sahip minimal
+bir uygulama iskeleti üretir — `quickdemo` pilot uygulamasından türetilmiştir (create/read/
+update/delete, optimistic locking, validation, sayfalama).
+
+Üretilen projenin kendi `README.md`'si, backend (ABAP) tarafında ne yazman gerektiğini ve
+`fiori deploy` ile nasıl deploy edeceğini anlatır.
+
+Bu paket `@ux7suit/react`, `@ux7suit/sdk`, `@ux7suit/workspace` paketlerini peer olarak
+kullanır; sürüm uyumu için UX7 Suit shell'inin güncel "Shell API compatibility matrix"ine
+bakın (platform yönetim panelinizde veya UX7 Suit ekibinden).

package/bin.mjs

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+// create-ux7-app — UX7 Suit platformu için Module Federation demo/app şablonu scaffold eder.
+// Kullanım: npm create ux7-app@latest my-app [-- --title "Görünen ad"]
+//
+// scripts/create-app.mjs'in (UX7 monorepo içi, kendi ekip için) genel/dış geliştirici
+// karşılığıdır. Aradaki fark: bu paket monorepo DIŞINDA, herhangi bir müşteri/3. parti
+// projesinde çalışacak şekilde kendi kendine yeterli — ../../scripts/federation gibi
+// monorepo'ya özel relative import'lar burada yok, template kendi başına ayakta durur.
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const HERE = path.dirname(fileURLToPath(import.meta.url))
+const TEMPLATE_DIR = path.join(HERE, 'template')
+
+function usage() {
+  console.log(`Kullanım: npm create ux7-app@latest <klasör-adı> [-- --title "Görünen Ad"]
+
+Örnek:
+  npm create ux7-app@latest stok-sayim -- --title "Stok Sayım"
+
+<klasör-adı> aynı zamanda uygulama kimliği (app id) olarak kullanılır:
+  - Endpoint kökü: /<app-id>/records
+  - Module Federation remote adı: ux7_<app-id altçizgili>
+  - BSP adı önerisi: ZUX7_<APP-ID BÜYÜK, altçizgili>
+
+App id kuralı: 2-31 karakter, küçük harf/rakam/tire, harfle başlamalı (örn. "stok-sayim").`)
+}
+
+function toAppId(raw) {
+  return String(raw).trim().toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
+}
+
+function toTitle(appId) {
+  return appId.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join(' ')
+}
+
+function copyTemplate(srcDir, destDir, replacements) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const entry of fs.readdirSync(srcDir, { withFileTypes: true })) {
+    const srcPath = path.join(srcDir, entry.name)
+    const destName = entry.name.replace(/__APP_ID__/g, replacements.APP_ID)
+    const destPath = path.join(destDir, destName)
+    if (entry.isDirectory()) {
+      copyTemplate(srcPath, destPath, replacements)
+      continue
+    }
+    const raw = fs.readFileSync(srcPath, 'utf8')
+    const content = raw
+      .replaceAll('__APP_ID_SNAKE__', replacements.APP_ID_SNAKE)
+      .replaceAll('__APP_ID_UPPER__', replacements.APP_ID_UPPER)
+      .replaceAll('__APP_ID__', replacements.APP_ID)
+      .replaceAll('__APP_TITLE__', replacements.APP_TITLE)
+    fs.writeFileSync(destPath, content)
+  }
+}
+
+function main() {
+  const argv = process.argv.slice(2)
+  if (!argv.length || argv.includes('-h') || argv.includes('--help')) return usage(), process.exit(argv.length ? 0 : 1)
+
+  const titleIndex = argv.indexOf('--title')
+  const titleArg = titleIndex >= 0 ? argv[titleIndex + 1] : undefined
+  const positional = argv.filter((value, index) => index !== titleIndex && index !== titleIndex + 1)
+  const targetArg = positional[0]
+  if (!targetArg) return usage(), process.exit(1)
+
+  const appId = toAppId(targetArg)
+  if (!/^[a-z][a-z0-9-]{1,30}$/.test(appId)) {
+    console.error(`Geçersiz app id türetildi: "${appId}". 2-31 küçük harf/rakam/tire, harfle başlamalı.`)
+    process.exit(1)
+  }
+
+  const targetDir = path.resolve(process.cwd(), targetArg)
+  if (fs.existsSync(targetDir) && fs.readdirSync(targetDir).length > 0) {
+    console.error(`"${targetArg}" boş değil. Farklı/boş bir klasör adı verin.`)
+    process.exit(1)
+  }
+
+  const replacements = {
+    APP_ID: appId,
+    APP_ID_SNAKE: appId.replaceAll('-', '_'),
+    APP_ID_UPPER: appId.replaceAll('-', '_').toUpperCase(),
+    APP_TITLE: titleArg || toTitle(appId),
+  }
+
+  copyTemplate(TEMPLATE_DIR, targetDir, replacements)
+
+  console.log(`\n"${targetArg}" oluşturuldu (app id: ${replacements.APP_ID}).\n`)
+  console.log(`Sıradaki adımlar:
+  cd ${targetArg}
+  npm install
+  npm run dev            # standalone dev sunucusu (UX7 Suit shell olmadan, izole test için)
+
+Devam etmeden önce README.md'yi oku — şunları senin dolduracağın: backend ABAP handler'ı
+(zcl_ux7_handler'dan REDEFINITION), deploy/ui5-deploy.dev.yaml'daki SAP sistem/paket/transport
+bilgileri, ve vite.config.ts'teki paylaşılan paket sürümlerinin UX7 Suit shell'inle uyuşması
+(strictVersion) — bu üçü olmadan uygulama shell içinde çalışmaz.`)
+}
+
+main()

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@ux7suit/create-ux7-app",
+  "version": "0.1.0",
+  "description": "UX7 Suit platformu için Module Federation tabanlı demo/app scaffold aracı. `npm create ux7-app@latest my-app` ile çalışır.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "bin": {
+    "create-ux7-app": "./bin.mjs"
+  },
+  "files": [
+    "bin.mjs",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/README.md

@@ -0,0 +1,63 @@
+# __APP_TITLE__
+
+`create-ux7-app` ile üretildi. UX7 Suit shell'ine Module Federation remote olarak
+bağımsız bir BSP şeklinde deploy edilecek bir CRUD uygulaması iskeleti.
+
+## Bu şablonda ne var
+
+- `src/api.ts` — `__APP_ID__/records` entity'si için list/read/create/update/delete;
+  optimistic locking (`version`), envelope/hata sözleşmesi (`data`, `messages`, 409 conflict).
+- `src/RecordList.tsx`, `src/RecordEditor.tsx`, `src/RecordFields.tsx` — liste, filtre,
+  sayfalama, kayıt formu, sil/güncelle/versiyon-çakışması akışı.
+- `src/App.tsx` — route'lar + `QueryClientProvider`; Module Federation `exposes`'i
+  (`vite.config.ts`) bu dosyayı dışa veriyor.
+
+Bu, kasıtlı olarak budanmış bir örnek: toplu işlem (batch create/update/delete) ve
+value-help gibi ileri desenler yok. Onları görmek isterseniz UX7 Suit ekibindeki
+`quickdemo`/`bankint` pilot uygulamalarına ve `docs/BANKINT-DEEP-UYGULAMA.md`'ye bakın
+(atomik çoklu-kayıt `actions/{action}` deseni — "deep post" — orada).
+
+## Kendi entity'nize uyarlama
+
+1. `src/api.ts`'te `RecordInput`/`RecordItem`'ı gerçek alanlarınızla değiştirin,
+   `validate()`/`payload()`'ı buna göre güncelleyin.
+2. `src/RecordFields.tsx` ve `src/RecordList.tsx`'teki kolonları eşleyin.
+3. `ENDPOINT` sabiti `/__APP_ID__/records` — backend'inizin gerçek entity adıyla eşleşsin.
+
+## Backend (ABAP) — sizin yazmanız gereken kısım
+
+Bu CLI backend kodu üretmez. `docs/CONTRACT.md`'ye göre, `zcl_ux7_handler` soyut
+sınıfından türeyen bir ABAP handler yazmanız gerekiyor (örn. `ZCL_UX7___APP_ID_UPPER__`),
+şu metodları `REDEFINITION` ile dolduran: `list`, `read`, `create`, `update`,
+`delete_rec`, `action`, `valuehelp`, `check_authority`. Menüde görünürlük ile yetki
+kontrolü ayrı şeylerdir — `check_authority` her zaman kendi başına çalışmalı.
+
+## Dev / build / deploy
+
+```
+npm install
+npm run dev        # standalone dev sunucusu — shell OLMADAN izole test için
+npm run build       # Module Federation remote build (remoteEntry.js dahil)
+npm run deploy:dev  # fiori deploy ile Dev'e BSP olarak deploy
+```
+
+`npm run dev` shell'in sağladığı singleton'lar (React, `@ux7suit/react`, `@ux7suit/sdk`)
+olmadan çalışır — component'leri izole görmek için yeterli, ama gerçek entegrasyon testi
+uygulamayı shell içine (Module Federation remote olarak) yükleyip görmektir.
+
+Deploy'dan önce `deploy/ui5-deploy.dev.yaml`'daki `TODO` alanlarını (Dev sistem URL'i,
+ABAP paketi, transport request) doldurun. QA/Prod'a geçiş, standart Fiori transport
+zinciriyle (STMS release + import) ilerler — bu CLI/proje QA/Prod'a yeniden deploy etmez.
+
+## Sürüm uyumu (önemli)
+
+`vite.config.ts`'teki `SHARED_VERSIONS` UX7 Suit shell'inin kendi paylaşılan bağımlılık
+sürümleriyle birebir eşleşmeli (Module Federation `strictVersion: true`). Uyuşmazlık
+build zamanında değil, kullanıcı bu app'i shell içinde açtığında ortaya çıkar. Shell
+güncellendiğinde bu app'in de yeniden build/deploy edilmesi gerekebilir — güncel
+sürümleri UX7 Suit platform yöneticinizden alın.
+
+## Şablonu shell'in katalogunda görünür kılma
+
+Bu uygulamayı deploy etmek onu otomatik olarak shell'in katalogunda görünür yapmaz —
+katalog/registry kaydı ayrı bir adım, shell'i yöneten ekiple koordine edilmeli.

package/template/deploy/ui5-deploy.dev.yaml

@@ -0,0 +1,20 @@
+specVersion: "3.1"
+metadata:
+  name: com.ux7.__APP_ID_SNAKE__
+type: application
+builder:
+  customTasks:
+    - name: deploy-to-abap
+      afterTask: generateCachebusterInfo
+      configuration:
+        target:
+          # TODO: Dev sisteminizin ICF URL'i (örn. http://<host>:<port>)
+          url: ""
+          client: "100"
+        app:
+          name: ZUX7___APP_ID_UPPER__
+          description: __APP_TITLE__
+          # TODO: uygulamanın gideceği ABAP paketi
+          package: ""
+          # TODO: Dev transport request'iniz
+          transport: ""

package/template/index.html

@@ -0,0 +1,3 @@
+<!doctype html>
+<html lang="tr"><head><meta charset="UTF-8"><title>__APP_TITLE__</title></head>
+<body><p>Bu uygulamayı UX7 Suit shell içindeki "__APP_TITLE__" kutucuğundan açın.</p></body></html>

package/template/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "__APP_ID__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "deploy:dev": "npm run build && fiori deploy --config deploy/ui5-deploy.dev.yaml --yes && rimraf archive.zip"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.62.7",
+    "@ux7suit/react": "^0.2.0",
+    "@ux7suit/sdk": "^0.1.0",
+    "@ux7suit/workspace": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.1"
+  },
+  "devDependencies": {
+    "@module-federation/vite": "^1.22.1",
+    "@sap/ux-ui5-tooling": "^1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "rimraf": "^6",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.5"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import { Route, Routes } from 'react-router'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { isApiError } from '@ux7suit/sdk'
+import { StatusScreen } from '@ux7suit/workspace'
+import { RecordList } from './RecordList'
+import { RecordEditor } from './RecordEditor'
+import '@ux7suit/workspace/styles.css'
+
+export default function App() {
+  const [client] = useState(() => new QueryClient({ defaultOptions: {
+    queries: { staleTime: 30_000, gcTime: 60_000, refetchOnWindowFocus: false, retry: (count, error) => count < 1 && isApiError(error) && error.kind === 'network' },
+    mutations: { retry: false },
+  } }))
+  return <QueryClientProvider client={client}><div style={{ maxWidth: 1400, margin: '0 auto', padding: 'var(--ux7-sp-4)' }}>
+    <Routes>
+      <Route index element={<RecordList />} />
+      <Route path="new" element={<RecordEditor creating />} />
+      <Route path=":id" element={<RecordEditor />} />
+      <Route path="*" element={<StatusScreen title="__APP_TITLE__ sayfası bulunamadı" />} />
+    </Routes>
+  </div></QueryClientProvider>
+}

package/template/src/RecordEditor.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { useNavigate, useParams } from 'react-router'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Button, ConfirmDialog, Page, Toolbar } from '@ux7suit/react'
+import { isApiError } from '@ux7suit/sdk'
+import { UnsavedChanges, useUnsavedChanges } from '@ux7suit/workspace'
+import { recordApi, errorText, validate, type RecordInput, type RecordItem } from './api'
+import { EMPTY, RecordFields } from './RecordFields'
+
+export function RecordEditor({ creating = false }: { creating?: boolean }) {
+  const { id = '' } = useParams()
+  const query = useQuery({ queryKey: ['__APP_ID__', 'record', id], queryFn: ({ signal }) => recordApi.read(id, signal), enabled: !creating, refetchOnWindowFocus: false })
+  if (!creating && query.isPending) return <p role="status">Kayıt yükleniyor…</p>
+  if (!creating && query.isError) return <div role="alert">{errorText(query.error)} <Button onClick={() => void query.refetch()}>Tekrar dene</Button></div>
+  return <Editor key={`${creating ? 'new' : id}:${query.data?.version ?? ''}`} initial={query.data} creating={creating} refresh={() => void query.refetch()} />
+}
+
+function Editor({ initial, creating, refresh }: { initial: RecordItem | undefined; creating: boolean; refresh: () => void }) {
+  const navigate = useNavigate()
+  const client = useQueryClient()
+  const [value, setValue] = useState<RecordInput>(initial ?? EMPTY)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [error, setError] = useState('')
+  const [conflict, setConflict] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [reload, setReload] = useState(false)
+  const dirty = JSON.stringify(value) !== JSON.stringify(initial ?? EMPTY)
+  const guard = useUnsavedChanges(dirty || busy)
+  async function save() {
+    const nextErrors = validate(value); setErrors(nextErrors); setError(''); setConflict(false)
+    if (Object.keys(nextErrors).length || busy) return
+    setBusy(true)
+    try {
+      const saved = creating ? await recordApi.create(value) : await recordApi.update(initial!, value)
+      client.setQueryData(['__APP_ID__', 'record', saved.id], saved)
+      await client.invalidateQueries({ queryKey: ['__APP_ID__', 'list'] })
+      guard.allowNavigation(); navigate('..')
+    } catch (cause) {
+      setError(errorText(cause)); setConflict(isApiError(cause) && cause.kind === 'conflict')
+      if (isApiError(cause)) setErrors(Object.fromEntries(cause.messages.filter(message => message.field).map(message => [message.field!, message.text])))
+    } finally { setBusy(false) }
+  }
+  async function remove() {
+    if (!initial || busy) return
+    setBusy(true)
+    try { await recordApi.remove(initial); client.removeQueries({ queryKey: ['__APP_ID__', 'record', initial.id], exact: true }); await client.invalidateQueries({ queryKey: ['__APP_ID__', 'list'] }); guard.allowNavigation(); navigate('..') }
+    catch (cause) { setError(errorText(cause)); setDeleting(false) }
+    finally { setBusy(false) }
+  }
+  return <Page title={creating ? 'Yeni kayıt' : `Kayıt ${initial!.id}`}>
+    <UnsavedChanges dirty={dirty || busy} guard={guard} />
+    {error && <div role="alert"><p>{error}</p>{conflict && <Button onClick={() => setReload(true)}>Güncel kaydı yükle</Button>}</div>}
+    <form onSubmit={event => { event.preventDefault(); void save() }}>
+      <fieldset disabled={busy} className="ux7-work-fieldset"><RecordFields value={value} onChange={setValue} errors={errors} creating={creating} /></fieldset>
+      {initial && <p>Son değiştiren: {initial.changedBy || '—'} · Sürüm: {initial.version || 'Yok'} · Oluşturan: {initial.createdBy || '—'}</p>}
+      <Toolbar>
+        <Button type="submit" variant="primary" disabled={busy || (!creating && !initial?.version)}>{busy ? 'İşleniyor…' : 'Kaydet'}</Button>
+        {!creating && <Button type="button" disabled={busy || !initial?.version} onClick={() => setDeleting(true)}>Sil</Button>}
+        <Button type="button" disabled={busy} onClick={() => navigate('..')}>Listeye dön</Button>
+      </Toolbar>
+    </form>
+    <ConfirmDialog open={deleting} title="Kaydı sil" confirmLabel="Sil" busy={busy} onCancel={() => setDeleting(false)} onConfirm={() => void remove()}>Yalnızca {initial?.id} kaydı silinecek. Bu işlem geri alınamaz.</ConfirmDialog>
+    <ConfirmDialog open={reload} title="Güncel kaydı yükle" confirmLabel="Taslağı bırak ve yenile" onCancel={() => setReload(false)} onConfirm={() => { setReload(false); refresh() }}>Girdiğiniz değişiklikler bırakılıp sunucudaki kayıt yüklenecek.</ConfirmDialog>
+  </Page>
+}

package/template/src/RecordFields.tsx

@@ -0,0 +1,14 @@
+import { Checkbox, Field, FormLayout, TextInput } from '@ux7suit/react'
+import type { RecordInput } from './api'
+
+export const EMPTY: RecordInput = { name: '', city: '', amount: '0.00', currency: 'TRY', active: true }
+
+export function RecordFields({ value, onChange, errors, creating = false }: { value: RecordInput; onChange: (value: RecordInput) => void; errors: Record<string, string>; creating?: boolean }) {
+  const fields = [...(creating ? [['id', 'ID (boşsa sunucu üretir)', 10] as const] : []), ['name', 'Ad', 60], ['city', 'Şehir', 100], ['amount', 'Tutar', 14], ['currency', 'Para birimi', 5]] as const
+  return <FormLayout>
+    {fields.map(([key, label, max]) => <Field key={key} name={key} label={label} required={key === 'name' || key === 'amount' || key === 'currency'} messages={errors[key] ? [{ type: 'E', text: errors[key]!, code: key }] : []}>
+      <TextInput value={String(value[key as keyof RecordInput] ?? '')} maxLength={max} onChange={event => onChange({ ...value, [key]: key === 'currency' || key === 'id' ? event.target.value.toUpperCase() : event.target.value })} />
+    </Field>)}
+    <Checkbox checked={value.active} onCheckedChange={active => onChange({ ...value, active })}>Aktif</Checkbox>
+  </FormLayout>
+}

package/template/src/RecordList.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Button, Page, TextInput, Toolbar, textColumn } from '@ux7suit/react'
+import { DEFAULT_LIST, WorkspaceTable, useListWorkspace } from '@ux7suit/workspace'
+import { recordApi, errorText, type RecordItem } from './api'
+
+const columns = [
+  textColumn<RecordItem>({ id: 'id', header: 'ID', accessor: row => row.id, width: 140 }),
+  textColumn<RecordItem>({ id: 'name', header: 'Ad', accessor: row => row.name, width: 240 }),
+  textColumn<RecordItem>({ id: 'city', header: 'Şehir', accessor: row => row.city, width: 160 }),
+  textColumn<RecordItem>({ id: 'amount', header: 'Tutar', accessor: row => String(row.amount), width: 130 }),
+  textColumn<RecordItem>({ id: 'currency', header: 'Para birimi', accessor: row => row.currency, width: 110 }),
+  textColumn<RecordItem>({ id: 'active', header: 'Aktif', accessor: row => row.active ? 'Evet' : 'Hayır', width: 90 }),
+]
+const csvColumns = columns.map(column => ({ id: column.id!, label: String(column.header), value: (row: RecordItem) => row[column.id as keyof RecordItem] }))
+
+export function RecordList() {
+  const navigate = useNavigate()
+  const workspace = useListWorkspace('__APP_ID__-records', DEFAULT_LIST)
+  const { state, change, setPage } = workspace
+  const [q, setQ] = useState(state.q)
+  const [active, setActive] = useState(state.filters.active ?? '')
+  const [jump, setJump] = useState('1')
+  const params = { page: state.page, size: state.size, q: state.q, active: state.filters.active ?? '' }
+  const query = useQuery({ queryKey: ['__APP_ID__', 'list', params], queryFn: ({ signal }) => recordApi.list(params, signal) })
+  const rows = query.data?.rows ?? []
+  const total = query.data?.total ?? 0
+  const pages = Math.max(1, Math.ceil(total / state.size))
+  useEffect(() => { if (query.data && state.page > pages) setPage(pages) }, [query.data, state.page, pages])
+  return <Page title="__APP_TITLE__" subtitle={`${total.toLocaleString('tr-TR')} kayıt`} actions={<Button onClick={() => navigate('new')}>Yeni kayıt</Button>}>
+    <form onSubmit={event => { event.preventDefault(); change({ q: q.trim(), filters: { active } }) }}>
+      <Toolbar>
+        <TextInput aria-label="Ada göre ara" placeholder="Ada göre ara" maxLength={60} value={q} onChange={event => setQ(event.target.value)} />
+        <select className="ux7-native-select" aria-label="Aktiflik filtresi" value={active} onChange={event => setActive(event.target.value)}><option value="">Tümü</option><option value="true">Aktif</option><option value="false">Pasif</option></select>
+        <Button type="submit" disabled={query.isFetching}>Filtrele</Button>
+        <Button type="button" onClick={() => { setQ(''); setActive(''); change({ q: '', filters: {} }) }}>Temizle</Button>
+        <Button type="button" disabled={query.isFetching} onClick={() => void query.refetch()}>Yenile</Button>
+      </Toolbar>
+    </form>
+    {query.isError && <p role="alert">{errorText(query.error)}</p>}
+    <WorkspaceTable id="__APP_ID__-records" columns={columns} csvColumns={csvColumns} rows={rows} rowId={row => row.id} workspace={workspace} total={total} loading={query.isPending} fetching={query.isFetching} sortable={false} onRowClick={row => navigate(encodeURIComponent(row.id))} />
+    <form onSubmit={event => { event.preventDefault(); const page = Number(jump); if (Number.isInteger(page) && page >= 1 && page <= pages) setPage(page) }}>
+      <Toolbar><TextInput type="number" aria-label="Gidilecek sayfa" min={1} max={pages} value={jump} onChange={event => setJump(event.target.value)} /><Button type="submit" disabled={query.isFetching}>Sayfaya git</Button><Button type="button" disabled={query.isFetching || state.page === pages} onClick={() => setPage(pages)}>Son sayfa</Button></Toolbar>
+    </form>
+  </Page>
+}

package/template/src/api.ts

@@ -0,0 +1,58 @@
+import { ApiError, http, isApiError, toCamelKeysDeep, type Envelope } from '@ux7suit/sdk'
+
+// Örnek entity: 5 alanlı bir kayıt (name/city/amount/currency/active). Kendi entity'nize
+// göre RecordInput/RecordItem'ı ve validate()/payload()'ı değiştirin — envelope, versiyon
+// ve hata sözleşmesi (bkz. CONTRACT.md) aynı kalmalı.
+export const ENDPOINT = '/__APP_ID__/records'
+export type RecordInput = { id?: string; name: string; city: string; amount: string | number; currency: string; active: boolean }
+export type RecordItem = RecordInput & { id: string; version: string; changedAt?: string; changedBy?: string; createdAt?: string; createdBy?: string }
+export type ListParams = { page: number; size: number; q: string; active: string }
+
+export function errorText(error: unknown): string {
+  if (isApiError(error) && error.messages.length) return error.messages.map(message => message.text).join('\n')
+  return error instanceof Error ? error.message : String(error)
+}
+
+function checked<T>(env: Envelope<T>): Envelope<T> {
+  const errors = env.messages.filter(message => message.type === 'E' || message.type === 'A')
+  if (errors.length) throw new ApiError({ kind: 'http', status: 422, method: 'WRITE', url: ENDPOINT, message: errors.map(message => message.text).join('\n'), messages: errors })
+  return env
+}
+
+function record(env: Envelope<RecordItem>): RecordItem {
+  const result = toCamelKeysDeep(checked(env).data) as RecordItem
+  if (!result?.id) throw new Error('Sunucu geçerli bir kayıt döndürmedi.')
+  return { ...result, version: env.version || result.version || '' }
+}
+
+export function validate(input: RecordInput): Record<string, string> {
+  const errors: Record<string, string> = {}
+  if (input.id && !/^[A-Za-z0-9_-]{1,10}$/.test(input.id)) errors.id = 'ID en fazla 10 harf, rakam, tire veya alt çizgi olmalı.'
+  if (!input.name.trim() || input.name.length > 60) errors.name = 'Ad zorunlu ve en fazla 60 karakter olmalı.'
+  if (input.city.length > 100) errors.city = 'Şehir en fazla 100 karakter olmalı.'
+  const amount = String(input.amount)
+  if (!/^\d{1,11}(\.\d{1,2})?$/.test(amount) || !Number.isFinite(Number(amount))) errors.amount = 'Tutar 0–99999999999.99 aralığında, en fazla iki ondalıklı olmalı.'
+  if (!/^[A-Z]{3,5}$/.test(input.currency)) errors.currency = 'Para birimi 3–5 büyük harf olmalı (örn. TRY).'
+  return errors
+}
+
+export function payload(input: RecordInput): RecordInput {
+  const errors = validate(input)
+  if (Object.keys(errors).length) throw new Error(Object.values(errors).join('\n'))
+  return { ...(input.id ? { id: input.id.toUpperCase() } : {}), name: input.name.trim(), city: input.city.trim(), amount: String(input.amount), currency: input.currency, active: input.active }
+}
+
+function path(id: string) { return `${ENDPOINT}/${encodeURIComponent(id)}` }
+function requireVersion(row: RecordItem) { if (!row.version) throw new Error(`${row.id}: sürüm bilgisi yok. Kaydı yenileyin.`) }
+
+export const recordApi = {
+  async list(params: ListParams, signal?: AbortSignal) {
+    const env = checked(await http.get<RecordItem[]>(ENDPOINT, { params, ...(signal ? { signal } : {}) }))
+    if (!Array.isArray(env.data) || !env.page || !Number.isSafeInteger(env.page.total) || env.page.total < 0) throw new Error('Sunucu sayfalama sözleşmesi geçersiz; data dizisi ve page.total bekleniyor.')
+    return { rows: env.data, total: env.page.total }
+  },
+  async read(id: string, signal?: AbortSignal) { return record(await http.get<RecordItem>(path(id), signal ? { signal } : undefined)) },
+  async create(input: RecordInput) { return record(await http.post<RecordItem>(ENDPOINT, payload(input))) },
+  async update(row: RecordItem, input: RecordInput) { requireVersion(row); return record(await http.patch<RecordItem>(path(row.id), payload(input), { version: row.version })) },
+  async remove(row: RecordItem) { requireVersion(row); checked(await http.del(path(row.id), { version: row.version })) },
+}

package/template/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { federation } from '@module-federation/vite'
+import { fileURLToPath } from 'node:url'
+
+// ÖNEMLİ: bu sürümler UX7 Suit shell'inin kendi "Shell API compatibility matrix"i
+// (shell'in scripts/federation.ts -> sharedDependencies()) ile BİREBİR aynı olmalı.
+// Uyuşmazlık npm install zamanında değil, kullanıcı bu app'i shell içinde açtığında,
+// Module Federation'ın strictVersion reddiyle ortaya çıkar. Güncel sürümleri UX7 Suit
+// platform yöneticinizden / shell dokümantasyonundan alın ve burada güncelleyin.
+const SHARED_VERSIONS: Record<string, string> = {
+  react: '^19.0.0', 'react/jsx-runtime': '^19.0.0',
+  'react-dom': '^19.0.0', 'react-dom/client': '^19.0.0',
+  'react-router': '^7.1.1', '@tanstack/react-query': '^5.62.7',
+  '@ux7suit/react': '0.2.0', '@ux7suit/sdk': '0.1.0',
+}
+const shared = Object.fromEntries(Object.entries(SHARED_VERSIONS).map(([name, requiredVersion]) => [name, {
+  singleton: true, strictVersion: true, requiredVersion, import: false as const,
+}]))
+
+export default defineConfig(({ command }) => ({
+  // TODO: deploy sonrası gerçek BSP path'iniz farklıysa güncelleyin.
+  base: command === 'serve' ? '/sap/bc/ui5_ui5/sap/zux7___APP_ID_SNAKE__/' : './',
+  plugins: [react(), federation({
+    name: 'ux7___APP_ID_SNAKE__', filename: 'remoteEntry.js',
+    exposes: { './App': fileURLToPath(new URL('./src/App.tsx', import.meta.url)) },
+    shared, dts: false, dev: false, bundleAllCSS: true,
+  })],
+  build: { target: 'esnext', outDir: 'dist', sourcemap: false },
+}))