adjacent-cli 0.1.0

package/templates/starter/app/(app)/page.tsx

@@ -0,0 +1,75 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Divider,
+  List,
+  ListItem,
+  Page,
+  Text,
+} from "adjacent-ui";
+
+export default function Home() {
+  return (
+    <Page
+      options={{
+        headerVariant: "large",
+        subtitle: "A mobile-first progressive web app",
+        title: "{{appName}}",
+      }}
+    >
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>Start here</CardTitle>
+          <CardDescription>
+            Edit <code>app/(app)/page.tsx</code> and this page reloads as you save.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text variant="body-medium">
+            Every component reads the design tokens in{" "}
+            <code>app/globals.css</code>, so changing one there changes the whole
+            application.
+          </Text>
+        </CardContent>
+      </Card>
+
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>What is configured</CardTitle>
+        </CardHeader>
+        <List divided dividerInset="none" lastDivider={false}>
+          <ListItem
+            headline="Offline support"
+            supportingText="A service worker is served from /sw.js in production builds."
+          />
+          <ListItem
+            headline="Web app manifest"
+            supportingText="Generated from app.config.ts at /manifest.webmanifest."
+          />
+          <ListItem
+            headline="Install prompt"
+            supportingText="Installation state is reported on the Settings tab."
+          />
+        </List>
+      </Card>
+
+      <Divider />
+
+      <Text variant="label-large">Run it on a phone</Text>
+      <Text variant="body-small">
+        With a device connected over ADB, <code>adj dev --android</code> serves
+        this app over a trusted HTTPS tunnel and opens it fullscreen.
+      </Text>
+
+      <div>
+        <Button size="sm" variant="filled">
+          A filled button
+        </Button>
+      </div>
+    </Page>
+  );
+}

package/templates/starter/app/(app)/settings/page.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader, CardTitle, Page, Text } from "adjacent-ui";
+
+import { SettingsPanel } from "./settings-panel";
+
+export default function Settings() {
+  return (
+    <Page options={{ title: "Settings" }}>
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>Runtime</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Text variant="body-small">
+            Reported by <code>useAdjacent()</code> from{" "}
+            <code>adjacent-react</code>. The service worker registers in
+            production builds only, so it stays unavailable while developing.
+          </Text>
+        </CardContent>
+      </Card>
+
+      <SettingsPanel />
+    </Page>
+  );
+}

package/templates/starter/app/(app)/settings/settings-panel.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useAdjacent } from "adjacent-react";
+import { Button, List, ListItem, Text, useDisplayMode } from "adjacent-ui";
+
+const INSTALL_HINT: Readonly<Record<string, string>> = {
+  android: "Open the browser menu and choose Install app.",
+  browser: "This browser cannot install the app.",
+  ios: "Open the Share sheet and choose Add to Home Screen.",
+  macos: "Open the Share menu and choose Add to Dock.",
+};
+
+/**
+ * Adjacent reports installation and runtime state and renders no UI of its own,
+ * so what a prompt looks like is entirely this component's decision.
+ */
+export function SettingsPanel() {
+  const adjacent = useAdjacent();
+  const displayMode = useDisplayMode();
+
+  return (
+    <>
+      <List divided lastDivider={false}>
+        <ListItem headline="Connectivity" trailingSupportingText={adjacent.connectivity} />
+        <ListItem headline="Display mode" trailingSupportingText={displayMode} />
+        <ListItem
+          headline="Service worker"
+          trailingSupportingText={adjacent.serviceWorker.status}
+        />
+        <ListItem headline="Installation" trailingSupportingText={adjacent.state.status} />
+      </List>
+
+      {adjacent.state.status === "available" ? (
+        <div>
+          <Button onClick={() => void adjacent.install()} variant="filled">
+            Install app
+          </Button>
+        </div>
+      ) : null}
+
+      {adjacent.state.status === "manual" ? (
+        <Text variant="body-small">{INSTALL_HINT[adjacent.state.platform]}</Text>
+      ) : null}
+
+      {adjacent.serviceWorker.status === "update-available" ? (
+        <div>
+          <Button onClick={() => void adjacent.activateUpdate()} variant="tonal">
+            Update app
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}