@kitr/kit-mobile 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Platon Podkopov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,11 @@
-# Temporary Holding Version
+# @kitr/kit-mobile
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Mobile kit.** Start the app kit as an installable PWA and a Capacitor shell with native lifecycle hooks.
+
+```sh
+pnpm dlx kitr new my-app --kit mobile
+```
+
+Read the guide at https://kitr.dev/docs/cli.
+
+Part of [kitr](https://kitr.dev), the TypeScript framework where everything is an add-on. MIT licensed.

package/dist/kitr.d.ts

@@ -0,0 +1,27 @@
+import { AddContext } from "@kitr/core/package";
+/**
+ * `kitr new --kit mobile`: The app kit as an installable PWA and a Capacitor shell: online state, install prompt, native lifecycle hooks.
+ */
+declare const _default: {
+  readonly name: "mobile";
+  readonly kind: "kit";
+  readonly kit: {
+    readonly description: "The app kit as an installable PWA and a Capacitor shell: online state, install prompt, native lifecycle hooks.";
+    readonly platforms: {
+      readonly site: {
+        readonly type: "web";
+        readonly options: {
+          readonly mode: "spa";
+          readonly pwa: true;
+        };
+      };
+      readonly phone: {
+        readonly type: "mobile";
+      };
+    };
+    readonly packages: ["http", "forms", "table", "state", "tailwind", "theme", "toast", "auth", "storage", "mocks", "testing", "devtools", "platform"];
+    readonly components: ["icon", "button", "input", "label", "card", "form", "data-table", "page-header", "empty-state", "theme-toggle", "app-shell", "badge"];
+    readonly files: (ctx: AddContext, name: string) => void;
+  };
+};
+export { _default as default };

package/dist/kitr.js

@@ -0,0 +1,194 @@
+import { definePackage, displayName, writeTemplate } from "@kitr/core/package";
+// src/kitr.ts
+/** The Capacitor plugins the device packages (`native`, `notifications`, `files`, `secure-storage`, `updater`) drive on a phone. */
+const devicePlugins = [
+	"@capacitor/clipboard",
+	"@capacitor/share",
+	"@capacitor/haptics",
+	"@capacitor/geolocation",
+	"@capacitor/local-notifications",
+	"@capacitor/push-notifications",
+	"@capacitor/filesystem",
+	"@capawesome/capacitor-file-picker",
+	"@aparajita/capacitor-secure-storage",
+	"@capawesome/capacitor-app-update"
+];
+const files = (ctx, name) => {
+	const brand = displayName(name);
+	ctx.deps.add(...devicePlugins);
+	writeTemplate(ctx, "app/document.tsx", `import { HeadContent, Outlet, Scripts } from '@kitr/router'
+import { ThemeScript } from '@kitr/theme'
+import css from '#app/styles/app.css?url'
+import { PwaUpdate } from '#app/components/pwa-update'
+
+/** Head tags for every page: viewport for notched screens, the web app manifest. */
+export function head() {
+  return {
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+    ],
+    links: [{ rel: 'stylesheet', href: css }, { rel: 'manifest', href: '/manifest.webmanifest' }],
+  }
+}
+
+/** The HTML shell: one page for the browser, the installed PWA and the Capacitor WebView. */
+export function RootDocument() {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+        <HeadContent />
+      </head>
+      <body className="min-h-screen bg-background text-foreground antialiased">
+        <Outlet />
+        <PwaUpdate />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+`);
+	writeTemplate(ctx, "app/components/pwa-update.tsx", `import { useServiceWorker } from '@kitr/web/client'
+
+/** Registers the service worker and shows a one-line banner when a new version is waiting. */
+export function PwaUpdate() {
+  const sw = useServiceWorker()
+  if (!sw.needRefresh) return null
+  return (
+    <div role="status" className="fixed bottom-4 right-4 rounded-md bg-foreground px-3 py-2 text-sm text-background shadow">
+      A new version is available.{' '}
+      <button type="button" className="underline" onClick={() => sw.update()}>
+        Reload
+      </button>
+    </div>
+  )
+}
+`);
+	writeTemplate(ctx, "app/pages/home.tsx", `import { useAppState, useBackButton, useOnline, usePlatform } from '@kitr/platform/react'
+import { useInstallPrompt } from '@kitr/web/client'
+import { useCallback, useState } from 'react'
+import { Badge } from '#components/ui/badge'
+import { Button } from '#components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '#components/ui/card'
+import { PageHeader } from '#components/ui/page-header'
+
+/**
+ * One page, three homes: the browser, the installed PWA, and the Capacitor shell on iOS/Android.
+ * Everything below works in all three; \`@kitr/platform\` answers the same way everywhere.
+ */
+export default function HomePage() {
+  const platform = usePlatform()
+  const online = useOnline()
+  const install = useInstallPrompt()
+  const active = useAppState()
+  const [backPresses, setBackPresses] = useState(0)
+  useBackButton(useCallback(() => setBackPresses((n) => n + 1), []))
+
+  return (
+    <main className="mx-auto max-w-lg p-4 pb-[env(safe-area-inset-bottom)]">
+      <PageHeader
+        title="${brand}"
+        description="Platform-aware without user-agent sniffing."
+        actions={<Badge variant="secondary">{platform.type} · {platform.os}</Badge>}
+      />
+      <div className="grid gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Connectivity</CardTitle>
+            <CardDescription>\`useOnline()\` tracks the online and offline events.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Badge variant={online ? 'default' : 'destructive'}>{online ? 'Online' : 'Offline'}</Badge>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Install</CardTitle>
+            <CardDescription>
+              The manifest and service worker come from the web platform's pwa option in kitrrc.ts; \`useInstallPrompt()\` wraps the browser prompt.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center gap-3">
+            <Button disabled={!install.canInstall} onClick={() => install.install()}>
+              Add to home screen
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              {install.installed
+                ? 'Installed.'
+                : install.canInstall
+                  ? 'Ready to install.'
+                  : platform.native
+                    ? 'Running inside the native shell.'
+                    : 'Open in a browser that supports installation.'}
+            </span>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Native lifecycle</CardTitle>
+            <CardDescription>Only wired up inside Capacitor; harmless on the web.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-1 text-sm text-muted-foreground">
+            <p>App state: {active ? 'active' : 'background'}</p>
+            <p>Hardware back button presses: {backPresses}</p>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  )
+}
+`);
+};
+/**
+* `kitr new --kit mobile`: The app kit as an installable PWA and a Capacitor shell: online state, install prompt, native lifecycle hooks.
+*/
+var kitr_default = definePackage({
+	name: "mobile",
+	kind: "kit",
+	kit: {
+		description: "The app kit as an installable PWA and a Capacitor shell: online state, install prompt, native lifecycle hooks.",
+		platforms: {
+			site: {
+				type: "web",
+				options: {
+					mode: "spa",
+					pwa: true
+				}
+			},
+			phone: { type: "mobile" }
+		},
+		packages: [
+			"http",
+			"forms",
+			"table",
+			"state",
+			"tailwind",
+			"theme",
+			"toast",
+			"auth",
+			"storage",
+			"mocks",
+			"testing",
+			"devtools",
+			"platform"
+		],
+		components: [
+			"icon",
+			"button",
+			"input",
+			"label",
+			"card",
+			"form",
+			"data-table",
+			"page-header",
+			"empty-state",
+			"theme-toggle",
+			"app-shell",
+			"badge"
+		],
+		files
+	}
+});
+export { kitr_default as default };

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@kitr/kit-mobile",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.1",
+  "description": "kitr new --kit mobile: The app kit as an installable PWA and a Capacitor shell: online state, install prompt, native lifecycle hooks.",
+  "kitr": {
+    "name": "mobile",
+    "title": "Mobile kit",
+    "summary": "Start the app kit as an installable PWA and a Capacitor shell with native lifecycle hooks.",
+    "category": "kits",
+    "runsOn": "both",
+    "kind": "kit",
+    "setup": "./kitr"
+  },
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kitrjs/kitr.git",
+    "directory": "packages/kit-mobile"
+  },
+  "homepage": "https://kitr.dev/docs/cli",
+  "bugs": "https://github.com/kitrjs/kitr/issues",
+  "sideEffects": false,
+  "exports": {
+    "./kitr": {
+      "types": "./dist/kitr.d.ts",
+      "default": "./dist/kitr.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "kitr",
+    "kitr-package",
+    "kitr-kit"
+  ],
+  "dependencies": {
+    "@kitr/core": "0.2.1"
+  },
+  "devDependencies": {
+    "tsdown": "^0.23.7",
+    "typescript": "^5.9.3",
+    "@types/node": "^22.19.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json"
+  }
 }