create-syncular-app 0.1.0

package/template/src/styles.css

@@ -0,0 +1,233 @@
+:root {
+  color: #17211f;
+  background: #eef2ef;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+.app-shell {
+  max-width: 640px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 32px 18px;
+}
+
+.topbar {
+  margin-bottom: 20px;
+}
+
+.eyebrow {
+  margin: 0 0 5px;
+  color: #65706d;
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+h1 {
+  font-size: clamp(1.8rem, 4vw, 2.6rem);
+  line-height: 1.05;
+}
+
+h2 {
+  font-size: 1.22rem;
+}
+
+.client-pane {
+  padding: 18px;
+  border: 1px solid #d2ddd8;
+  border-top: 5px solid #2f8f83;
+  border-radius: 8px;
+  background: #fbfdfb;
+  box-shadow: 0 18px 40px rgb(24 42 36 / 8%);
+}
+
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 88px;
+  justify-content: center;
+  padding: 7px 9px;
+  border-radius: 999px;
+  color: #21302c;
+  background: #ecf3ef;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #77837e;
+}
+
+.status-badge.ready .status-dot {
+  background: #2f8f83;
+}
+
+.status-badge.syncing .status-dot {
+  background: #c59724;
+}
+
+.status-badge.offline .status-dot {
+  background: #5f6f79;
+}
+
+.status-badge.attention .status-dot {
+  background: #b7791f;
+}
+
+.status-badge.error .status-dot {
+  background: #c54646;
+}
+
+.add-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 42px;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.add-row input {
+  min-width: 0;
+  height: 42px;
+  padding: 0 12px;
+  border: 1px solid #cbd6d1;
+  border-radius: 8px;
+  background: #fff;
+  color: #17211f;
+}
+
+.add-row input:focus {
+  border-color: #2f8f83;
+  outline: 3px solid rgb(47 143 131 / 18%);
+}
+
+.add-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 8px;
+  color: #fff;
+  background: #17211f;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.task-list {
+  display: grid;
+  gap: 8px;
+}
+
+.task-row {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 34px;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 6px;
+  border: 1px solid #dde5e1;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.task-row span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 0.95rem;
+}
+
+.task-row span.done {
+  color: #7b8581;
+  text-decoration: line-through;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  color: #1f3a35;
+  background: #e4efeb;
+  cursor: pointer;
+}
+
+.icon-button.muted {
+  color: #5d6763;
+  background: transparent;
+}
+
+.icon-button:hover,
+.add-row button:hover {
+  filter: brightness(0.94);
+}
+
+.empty-state,
+.error-line,
+.offline-line {
+  margin: 12px 0 0;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.empty-state {
+  color: #68736f;
+  background: #f2f6f4;
+}
+
+.error-line {
+  color: #8f2727;
+  background: #fff1f1;
+  overflow-wrap: anywhere;
+}
+
+.offline-line {
+  color: #45545b;
+  background: #eef4f6;
+  overflow-wrap: anywhere;
+}
+
+.pane-footnote {
+  margin: 14px 0 0;
+  color: #68736f;
+  font-size: 0.82rem;
+  font-weight: 600;
+}

package/template/syncular.app.ts

@@ -0,0 +1,23 @@
+import { defineSyncularClient, scope, syncedTable } from '@syncular/typegen';
+
+/**
+ * Syncular app contract.
+ *
+ * The schema lives in migrations/*.sql; this file describes how the synced
+ * tables map to subscriptions and scopes. After changing either, run
+ * `bun run codegen` (or `npx syncular generate`) to refresh the generated
+ * modules under src/generated/.
+ */
+export const app = defineSyncularClient({
+  typescriptOutputPath: 'src/generated/syncular.generated.ts',
+  typescriptServerOutputPath: 'src/generated/syncular.server.generated.ts',
+  tables: {
+    tasks: syncedTable({
+      table: 'tasks',
+      subscriptionId: 'sub-tasks',
+      scopes: [scope('user_id', { source: 'actorId', required: true })],
+      serverVersion: 'server_version',
+      sqliteWithoutRowid: true,
+    }),
+  },
+});

package/template/syncular.schema.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://syncular.dev/schemas/syncular.schema.v1.json",
+  "contractVersion": 1,
+  "appSchemaVersion": 1,
+  "clientSchemaSupport": {
+    "current": 1,
+    "minSupported": 1,
+    "supported": [
+      1
+    ]
+  },
+  "migrations": [
+    {
+      "version": "0001",
+      "schemaVersion": 1,
+      "name": "initial"
+    }
+  ],
+  "tables": [
+    {
+      "name": "tasks",
+      "primaryKeyColumn": "id",
+      "serverVersionColumn": "server_version",
+      "softDeleteColumn": null,
+      "columns": [
+        {
+          "name": "id",
+          "sqlType": "TEXT",
+          "typeFamily": "text",
+          "appType": "string",
+          "nullable": false,
+          "notnullRequired": false,
+          "primaryKey": true,
+          "hasDefault": false,
+          "defaultSql": null,
+          "serverVersion": false,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": null
+        },
+        {
+          "name": "title",
+          "sqlType": "TEXT",
+          "typeFamily": "text",
+          "appType": "string",
+          "nullable": false,
+          "notnullRequired": true,
+          "primaryKey": false,
+          "hasDefault": false,
+          "defaultSql": null,
+          "serverVersion": false,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": null
+        },
+        {
+          "name": "completed",
+          "sqlType": "INTEGER",
+          "typeFamily": "integer",
+          "appType": "integer",
+          "nullable": false,
+          "notnullRequired": true,
+          "primaryKey": false,
+          "hasDefault": true,
+          "defaultSql": "0",
+          "serverVersion": false,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": null
+        },
+        {
+          "name": "user_id",
+          "sqlType": "TEXT",
+          "typeFamily": "text",
+          "appType": "string",
+          "nullable": false,
+          "notnullRequired": true,
+          "primaryKey": false,
+          "hasDefault": false,
+          "defaultSql": null,
+          "serverVersion": false,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": "user_id"
+        },
+        {
+          "name": "created_at",
+          "sqlType": "BIGINT",
+          "typeFamily": "integer",
+          "appType": "integer",
+          "nullable": false,
+          "notnullRequired": true,
+          "primaryKey": false,
+          "hasDefault": true,
+          "defaultSql": "0",
+          "serverVersion": false,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": null
+        },
+        {
+          "name": "server_version",
+          "sqlType": "BIGINT",
+          "typeFamily": "integer",
+          "appType": "integer",
+          "nullable": false,
+          "notnullRequired": true,
+          "primaryKey": false,
+          "hasDefault": true,
+          "defaultSql": "0",
+          "serverVersion": true,
+          "softDelete": false,
+          "blobRef": false,
+          "scope": null
+        }
+      ],
+      "blobColumns": [],
+      "crdtYjsFields": [],
+      "encryptedFields": [],
+      "scopes": [
+        {
+          "name": "user_id",
+          "column": "user_id",
+          "source": "actorId",
+          "required": true
+        }
+      ],
+      "subscription": {
+        "id": "sub-tasks",
+        "params": {}
+      },
+      "sqliteWithoutRowid": true
+    }
+  ],
+  "localBaseSchema": {
+    "tableSetupSql": [
+      "CREATE TABLE IF NOT EXISTS \"tasks\" (\n  \"id\" TEXT PRIMARY KEY,\n  \"title\" TEXT NOT NULL,\n  \"completed\" INTEGER NOT NULL DEFAULT 0,\n  \"user_id\" TEXT NOT NULL,\n  \"created_at\" INTEGER NOT NULL DEFAULT 0,\n  \"server_version\" INTEGER NOT NULL DEFAULT 0\n) WITHOUT ROWID"
+    ]
+  },
+  "localDerivedSchema": {
+    "indexes": [],
+    "readModelSetupSql": [],
+    "readModelRebuildSql": []
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "types": ["bun", "vite/client"]
+  },
+  "include": ["src", "scripts", "syncular.app.ts", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    host: '127.0.0.1',
+    port: 5173,
+    strictPort: false,
+  },
+});