@cavulsqa/create 0.1.0

package/templates/f7-app/src/modules/demo/composables/useReactiveDemo.ts

@@ -0,0 +1,168 @@
+import { Capacitor } from "@capacitor/core";
+import type { TableChangeEvent } from "@cavulsqa/reactive-db";
+import {
+  advanceOrderStatus,
+  clearAll,
+  deleteOrder,
+  ensureReferenceData,
+  loadDashboardStats,
+  saveOrder,
+  searchOrders,
+  seedSampleData,
+  setOrderStatus,
+  type DashboardStats,
+  type DraftLine,
+  type OrderRow,
+} from "@/domains/sales/sales.repository";
+import { changeBus, getDatabase, rdb } from "@/shared/database/database";
+import { uniqueQueryKey, useReactiveQuery } from "@/shared/database/queries";
+
+export interface BusEntry {
+  /** Monotonic, because a millisecond timestamp is not unique - several events share one. */
+  id: number;
+  at: number;
+  table: string;
+  type: string;
+}
+
+export interface PipelineResult {
+  parallelMs: number;
+  sequentialMs: number;
+  ratio: number;
+}
+
+const EVENT_LOG_LIMIT = 20;
+const READS_PER_RUN = 5;
+const EMPTY_STATS: DashboardStats = {
+  customers: 0,
+  products: 0,
+  orders: 0,
+  draft: 0,
+  confirmed: 0,
+  delivered: 0,
+  revenueCents: 0,
+  committedCents: 0,
+};
+
+/**
+ * Everything the Reactive screen shows, so the view stays presentational.
+ *
+ * Nothing here tells a query to refresh. Writes go through `rdb`, which announces the tables they
+ * touched, and both queries below watch those tables - which is why creating one order moves the
+ * revenue tile, the order count and the list at the same time.
+ */
+export function useReactiveDemo() {
+  const busy = ref(false);
+  const busLog = ref<BusEntry[]>([]);
+  const pipeline = ref<PipelineResult | null>(null);
+  const measuring = ref(false);
+
+  const statsQuery = useReactiveQuery(() => loadDashboardStats(getDatabase().db), {
+    // Four tables, because the tiles aggregate across all of them.
+    tables: ["customer", "product", "sales_order", "order_line"],
+    queryKey: uniqueQueryKey("demo:stats"),
+    debounce: 250,
+  });
+
+  const ordersQuery = useReactiveQuery(() => searchOrders(getDatabase().db, ""), {
+    tables: ["sales_order", "order_line", "customer"],
+    queryKey: uniqueQueryKey("demo:orders"),
+    debounce: 250,
+  });
+
+  let busSequence = 0;
+  const stopWatching = changeBus.on(["*"], (event: TableChangeEvent) => {
+    busSequence += 1;
+    busLog.value = [
+      { id: busSequence, at: Date.now(), table: event.table, type: event.type },
+      ...busLog.value,
+    ].slice(0, EVENT_LOG_LIMIT);
+  });
+  onUnmounted(stopWatching);
+
+  const stats = computed<DashboardStats>(() => statsQuery.data.value ?? EMPTY_STATS);
+  const orders = computed<OrderRow[]>(() => ordersQuery.data.value ?? []);
+
+  async function withBusy(work: () => Promise<void>): Promise<void> {
+    busy.value = true;
+    try {
+      await work();
+    } finally {
+      busy.value = false;
+    }
+  }
+
+  const seed = () => withBusy(() => seedSampleData(rdb));
+
+  const advance = (orderId: number) => withBusy(() => advanceOrderStatus(rdb, orderId));
+
+  const setStatus = (orderId: number, status: "draft" | "confirmed" | "delivered") =>
+    withBusy(() => setOrderStatus(rdb, orderId, status));
+
+  const remove = (orderId: number) => withBusy(() => deleteOrder(rdb, orderId));
+
+  const save = (input: { customerId: number; reference: string; lines: DraftLine[] }) =>
+    withBusy(() => saveOrder(rdb, input));
+  /**
+   * Wipe the demo data, then put the catalogue back. Deleting the products and customers too would
+   * leave the app in a state where no order can be written and the only way out is a restart.
+   */
+  const clear = () =>
+    withBusy(async () => {
+      await clearAll(rdb);
+      await ensureReferenceData(rdb);
+    });
+
+  /**
+   * Reads issued together against reads awaited one by one.
+   *
+   * On a device the ratio is the point: the native bridge pipelines concurrent calls and the dialect
+   * keeps reads out of the write lock, so a screen loading with `Promise.all` pays once rather than
+   * N times. In a browser it sits near 1x because sql.js in memory has no bridge to pipeline, and
+   * the screen says so rather than reporting a number that reads as a regression.
+   */
+  async function measurePipelining(): Promise<void> {
+    measuring.value = true;
+    try {
+      const db = getDatabase().db;
+      const read = () => db.selectFrom("sales_order").select("id").limit(5).execute();
+      await read();
+
+      const parallelStart = performance.now();
+      await Promise.all(Array.from({ length: READS_PER_RUN }, read));
+      const parallelMs = performance.now() - parallelStart;
+
+      const sequentialStart = performance.now();
+      for (let index = 0; index < READS_PER_RUN; index++) await read();
+      const sequentialMs = performance.now() - sequentialStart;
+
+      pipeline.value = {
+        parallelMs: Number(parallelMs.toFixed(1)),
+        sequentialMs: Number(sequentialMs.toFixed(1)),
+        ratio: Number((sequentialMs / Math.max(parallelMs, 0.01)).toFixed(2)),
+      };
+    } finally {
+      measuring.value = false;
+    }
+  }
+
+  return {
+    stats,
+    orders,
+    loading: ordersQuery.loading,
+    busy,
+    busLog,
+    pipeline,
+    measuring,
+    readsPerRun: READS_PER_RUN,
+    isNative: Capacitor.isNativePlatform(),
+    platform: Capacitor.getPlatform(),
+    seed,
+    advance,
+    setStatus,
+    remove,
+    save,
+    clear,
+    measurePipelining,
+  };
+}

package/templates/f7-app/src/modules/demo/router/routes/demo.routes.ts

@@ -0,0 +1,34 @@
+import type { Router } from "framework7/types";
+
+const demoRoutes: Router.RouteParameters[] = [
+  {
+    name: "demo",
+    path: "/demo/",
+    // `async` is Framework7's route hook, not an async function - resolve from the promise.
+    async({ resolve }) {
+      void import("@/modules/demo/views/DemoView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+  {
+    name: "demo-search",
+    path: "/demo/search/",
+    async({ resolve }) {
+      void import("@/modules/demo/views/OrderSearchView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+  {
+    name: "demo-order",
+    path: "/demo/order/:id/",
+    async({ resolve }) {
+      void import("@/modules/demo/views/OrderDetailView.vue").then((view) => {
+        resolve({ component: view.default });
+      });
+    },
+  },
+];
+
+export default demoRoutes;

package/templates/f7-app/src/modules/demo/views/DemoView.vue

@@ -0,0 +1,126 @@
+<template>
+  <F7Page :page-content="false">
+    <F7Navbar :title="t('demo.title')" :sliding="true">
+      <F7NavRight>
+        <F7Link icon-f7="search" href="/demo/search/" />
+        <F7Link icon-f7="chart_bar_alt_fill" panel-open="right" />
+      </F7NavRight>
+    </F7Navbar>
+
+    <!-- Real Framework7 tabs, so the panes swipe rather than switching on a v-if. -->
+    <F7Toolbar tabbar top>
+      <F7Link tab-link="#demo-tab-data" tab-link-active>{{ t("demo.data") }}</F7Link>
+      <F7Link tab-link="#demo-tab-diagnostics">{{ t("demo.diagnostics") }}</F7Link>
+    </F7Toolbar>
+
+    <F7Tabs swipeable>
+      <F7Tab id="demo-tab-data" class="page-content" tab-active>
+        <DemoStatCards :stats="stats" class="mt-3" />
+
+        <F7BlockTitle>
+          {{ t("demo.orders") }}
+          <span v-if="loading" class="ml-2 text-xs opacity-60">{{ t("demo.refetching") }}</span>
+        </F7BlockTitle>
+
+        <DemoOrderList
+          v-if="orders.length"
+          :orders="orders"
+          @open="openOrder"
+          @advance="advance"
+          @remove="remove"
+        />
+        <F7Block v-else strong inset class="rounded-2xl!">
+          <p class="m-0 text-sm opacity-70">{{ t("demo.empty") }}</p>
+        </F7Block>
+
+        <F7Block class="text-center">
+          <p class="m-0 text-xs opacity-45">{{ t("demo.swipeHint") }} {{ t("demo.tapHint") }}</p>
+        </F7Block>
+      </F7Tab>
+
+      <F7Tab id="demo-tab-diagnostics" class="page-content">
+        <DemoBusLog :entries="busLog" />
+        <DemoPipelineBenchmark
+          :result="pipeline"
+          :measuring="measuring"
+          :reads-per-run="readsPerRun"
+          :is-native="isNative"
+          :platform="platform"
+          @measure="measurePipelining"
+        />
+      </F7Tab>
+    </F7Tabs>
+
+    <!--
+      Buttons open upward: the app's tab bar sits at the bottom of the shell, so a downward or
+      morphed menu disappears behind it.
+    -->
+    <F7Fab slot="fixed" position="right-bottom">
+      <F7Icon f7="plus" />
+      <F7Icon f7="xmark" />
+      <F7FabButtons position="top">
+        <F7FabButton fab-close :label="t('demo.newOrder')" @click="createOpen = true">
+          <F7Icon f7="square_pencil_fill" size="20" />
+        </F7FabButton>
+        <F7FabButton fab-close :label="t('demo.seed')" @click="run(seed)">
+          <F7Icon f7="wand_stars" size="20" />
+        </F7FabButton>
+        <F7FabButton fab-close :label="t('demo.clear')" @click="run(clear)">
+          <F7Icon f7="trash" size="20" />
+        </F7FabButton>
+      </F7FabButtons>
+    </F7Fab>
+
+    <DemoCreateOrderSheet :opened="createOpen" @close="createOpen = false" @save="onSaveOrder" />
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import type { OrderRow } from "@/domains/sales/sales.repository";
+import DemoBusLog from "@/modules/demo/components/DemoBusLog.vue";
+import DemoCreateOrderSheet from "@/modules/demo/components/DemoCreateOrderSheet.vue";
+import DemoOrderList from "@/modules/demo/components/DemoOrderList.vue";
+import DemoPipelineBenchmark from "@/modules/demo/components/DemoPipelineBenchmark.vue";
+import DemoStatCards from "@/modules/demo/components/DemoStatCards.vue";
+import { useReactiveDemo } from "@/modules/demo/composables/useReactiveDemo";
+
+import type { Router } from "framework7/types";
+
+const { t } = useI18n();
+const props = defineProps<{ f7router: Router.Router }>();
+const createOpen = ref(false);
+
+const {
+  stats,
+  orders,
+  loading,
+  busy,
+  busLog,
+  pipeline,
+  measuring,
+  readsPerRun,
+  isNative,
+  platform,
+  seed,
+  advance,
+  remove,
+  save,
+  clear,
+  measurePipelining,
+} = useReactiveDemo();
+
+async function run(action: () => Promise<void>): Promise<void> {
+  if (busy.value) return;
+  await action();
+}
+
+/** Tapping a row opens the order; the actions live there, in a bar fixed to the bottom. */
+function openOrder(order: OrderRow) {
+  props.f7router.navigate(`/demo/order/${String(order.id)}/`);
+}
+
+async function onSaveOrder(payload: Parameters<typeof save>[0]): Promise<void> {
+  await save(payload);
+  createOpen.value = false;
+}
+</script>

package/templates/f7-app/src/modules/demo/views/OrderDetailView.vue

@@ -0,0 +1,131 @@
+<template>
+  <F7Page>
+    <F7Navbar
+      :title="order?.reference ?? t('demo.order')"
+      :subtitle="order?.customerName"
+      back-link
+    >
+      <F7NavRight>
+        <F7Link v-if="order" icon-f7="trash" @click="confirmDelete" />
+      </F7NavRight>
+    </F7Navbar>
+
+    <template v-if="order">
+      <F7Block strong inset class="rounded-2xl! mt-3!">
+        <div class="flex items-start justify-between">
+          <div>
+            <F7Chip :text="order.status" :color="statusColor" />
+            <div class="mt-1.5 text-[13px] opacity-60">{{ order.city }}</div>
+            <div v-if="order.tags.length" class="mt-2 flex flex-wrap gap-1.5">
+              <F7Chip v-for="tag in order.tags" :key="tag" :text="tag" outline />
+            </div>
+          </div>
+          <div class="text-right">
+            <div class="text-[11px] uppercase tracking-wide opacity-55">{{ t("demo.total") }}</div>
+            <div class="text-2xl font-semibold tabular-nums leading-tight">
+              {{ money(order.totalCents) }}
+            </div>
+          </div>
+        </div>
+      </F7Block>
+
+      <F7BlockTitle>{{ t("demo.lineItems") }}</F7BlockTitle>
+      <!--
+        media-list, not a plain list: Framework7 only renders `subtitle` in a media list, so the
+        quantity and unit price were being dropped silently.
+      -->
+      <F7List media-list strong inset dividers class="rounded-2xl!">
+        <F7ListItem
+          v-for="line in order.lines"
+          :key="line.id"
+          :title="line.productName"
+          :after="money(line.lineTotalCents)"
+        >
+          <template #subtitle>
+            <span class="text-[13px] tabular-nums opacity-60">
+              {{ line.quantity }} × {{ money(line.unitPriceCents) }}
+            </span>
+          </template>
+        </F7ListItem>
+      </F7List>
+    </template>
+
+    <F7Block v-else strong inset class="rounded-2xl! mt-3!">
+      <p class="m-0 text-sm opacity-70">{{ t("demo.orderGone") }}</p>
+    </F7Block>
+
+    <!--
+      A bottom toolbar rather than a hand-built bar: Framework7 spaces its links evenly and keeps
+      them clear of the safe area, which the previous stacked segmented control did neither of.
+      Delete moved to the navbar - it does not belong next to three statuses you pick between.
+    -->
+    <F7Toolbar v-if="order" bottom>
+      <F7Link
+        v-for="option in statuses"
+        :key="option"
+        :class="{ 'text-color-primary font-semibold': order.status === option }"
+        @click="apply(option)"
+      >
+        {{ t(`demo.status${option.charAt(0).toUpperCase()}${option.slice(1)}`) }}
+      </F7Link>
+    </F7Toolbar>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import {
+  deleteOrder,
+  loadOrderDetail,
+  setOrderStatus,
+  type OrderDetail,
+} from "@/domains/sales/sales.repository";
+import { useHiddenTabbar } from "@/shared/composables/useTabbarVisibility";
+import { getDatabase, rdb } from "@/shared/database/database";
+import { uniqueQueryKey, useReactiveQuery } from "@/shared/database/queries";
+
+const { t } = useI18n();
+
+// A pushed page owns the whole screen; the tab bar belongs to the tab roots.
+useHiddenTabbar();
+
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+
+const orderId = Number(props.f7route.params.id ?? 0);
+const statuses = ["draft", "confirmed", "delivered"] as const;
+
+/**
+ * Reads five tables, so any write in that set refreshes this page - including the status changes
+ * made from the toolbar below, which is why nothing here calls refetch by hand.
+ */
+const query = useReactiveQuery(() => loadOrderDetail(getDatabase().db, orderId), {
+  tables: ["sales_order", "order_line", "customer", "product", "customer_tag"],
+  queryKey: uniqueQueryKey(`demo:order-${String(orderId)}`),
+});
+
+const order = computed<OrderDetail | null>(() => query.data.value ?? null);
+
+const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const money = (cents: number) => formatter.format(cents / 100);
+
+const statusColor = computed(() =>
+  order.value?.status === "delivered"
+    ? "green"
+    : order.value?.status === "confirmed"
+      ? "orange"
+      : "gray",
+);
+
+async function apply(status: (typeof statuses)[number]) {
+  if (!order.value || order.value.status === status) return;
+  await setOrderStatus(rdb, orderId, status);
+}
+
+function confirmDelete() {
+  f7.dialog.confirm(t("demo.deleteConfirm"), t("demo.delete"), () => {
+    void deleteOrder(rdb, orderId).then(() => {
+      props.f7router.back();
+    });
+  });
+}
+</script>

package/templates/f7-app/src/modules/demo/views/OrderSearchView.vue

@@ -0,0 +1,106 @@
+<template>
+  <F7Page>
+    <!--
+      The shape from the Framework7 searchbar docs: an expandable searchbar inside the navbar, opened
+      by a `searchbar-enable` link that points at it. Two earlier attempts got this wrong - a bare
+      `expandable` bar with nothing to enable it renders nothing, and moving it to a subnavbar puts
+      it below the title instead of taking the navbar over.
+    -->
+    <F7Navbar :title="t('demo.searchTitle')" back-link>
+      <F7NavRight>
+        <F7Link
+          class="searchbar-enable"
+          data-searchbar=".searchbar-orders"
+          icon-ios="f7:search"
+          icon-md="material:search"
+        />
+      </F7NavRight>
+      <F7Searchbar
+        class="searchbar-orders"
+        expandable
+        :placeholder="t('demo.searchPlaceholder')"
+        :custom-search="true"
+        :clear-button="true"
+        @input="onInput"
+        @searchbar:clear="onClear"
+        @searchbar:disable="onClear"
+      />
+    </F7Navbar>
+
+    <F7BlockTitle>
+      {{ term ? t("demo.matches", { count: results.length }) : t("demo.allOrders") }}
+    </F7BlockTitle>
+
+    <F7List v-if="results.length" media-list strong inset dividers class="rounded-2xl!">
+      <F7ListItem
+        v-for="order in results"
+        :key="order.id"
+        :title="order.reference"
+        :after="money(order.totalCents)"
+        :link="`/demo/order/${String(order.id)}/`"
+      >
+        <template #media>
+          <F7Icon :f7="statusIcon(order.status)" :color="statusColor(order.status)" size="22" />
+        </template>
+        <template #subtitle>
+          <span class="text-[13px] opacity-60">{{ order.customerName }} · {{ order.city }}</span>
+        </template>
+      </F7ListItem>
+    </F7List>
+
+    <F7Block v-else strong inset class="rounded-2xl!">
+      <p class="m-0 text-sm opacity-60">
+        {{ term ? t("demo.noMatches") : t("demo.empty") }}
+      </p>
+    </F7Block>
+  </F7Page>
+</template>
+
+<script setup lang="ts">
+import { useHiddenTabbar } from "@/shared/composables/useTabbarVisibility";
+import { searchOrders, type OrderRow } from "@/domains/sales/sales.repository";
+import { getDatabase } from "@/shared/database/database";
+import { uniqueQueryKey, useReactiveQuery } from "@/shared/database/queries";
+
+const { t } = useI18n();
+
+// A pushed page owns the whole screen; the tab bar belongs to the tab roots.
+useHiddenTabbar();
+
+const term = ref("");
+
+/**
+ * The list is populated before anything is typed - an empty search screen gives no sense of what is
+ * searchable. An empty term returns the most recent orders, which is what the query already does.
+ */
+const query = useReactiveQuery(() => searchOrders(getDatabase().db, term.value), {
+  tables: ["sales_order", "order_line", "customer"],
+  queryKey: uniqueQueryKey("demo:search"),
+  debounce: 200,
+});
+
+const results = computed<OrderRow[]>(() => query.data.value ?? []);
+
+function onInput(event: Event) {
+  term.value = (event.target as HTMLInputElement).value;
+  void query.refetch();
+}
+
+function onClear() {
+  term.value = "";
+  void query.refetch();
+}
+
+const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
+const money = (cents: number) => formatter.format(cents / 100);
+
+const statusColor = (status: string) =>
+  status === "delivered" ? "green" : status === "confirmed" ? "orange" : "gray";
+
+const statusIcon = (status: string) =>
+  status === "delivered"
+    ? "checkmark_seal_fill"
+    : status === "confirmed"
+      ? "shippingbox_fill"
+      : "doc_plaintext";
+</script>

package/templates/f7-app/src/modules/home/composables/useHomeFeatures.ts

@@ -0,0 +1,133 @@
+/** Framework7 page transitions, one per detail route so each push looks different. */
+export type PageTransition =
+  | "f7-circle"
+  | "f7-cover"
+  | "f7-cover-v"
+  | "f7-dive"
+  | "f7-fade"
+  | "f7-flip"
+  | "f7-parallax"
+  | "f7-push";
+
+/** How the detail page's navbar is configured, to show the variants side by side. */
+export interface NavbarVariant {
+  large: boolean;
+  transparent: boolean;
+  hideOnScroll: boolean;
+  /** Adds a second row under the title, which stays put while the large title collapses. */
+  subnavbar: boolean;
+}
+
+export interface HomeFeature {
+  id: string;
+  icon: string;
+  /** Framework7 colour name - the palette the theme already ships. */
+  color: string;
+  titleKey: string;
+  subtitleKey: string;
+  textKey: string;
+  transition: PageTransition;
+  navbar: NavbarVariant;
+}
+
+const navbar = (
+  large: boolean,
+  transparent: boolean,
+  hideOnScroll: boolean,
+  subnavbar = false,
+): NavbarVariant => ({ large, transparent, hideOnScroll, subnavbar });
+
+/**
+ * Data rather than markup, so removing a layer means removing an entry and the screen cannot keep
+ * advertising something the generator left out.
+ *
+ * Each entry also drives a detail route inside the Home tab's own view. That is the point of the
+ * nesting: the push happens within the tab, so the tab bar stays put, the back gesture unwinds only
+ * this tab's history, and every other tab keeps the screen it was on.
+ */
+export const features: HomeFeature[] = [
+  {
+    id: "tabs",
+    icon: "square_grid_2x2_fill",
+    color: "blue",
+    titleKey: "features.tabs.title",
+    subtitleKey: "features.tabs.subtitle",
+    textKey: "features.tabs.text",
+    transition: "f7-parallax",
+    navbar: navbar(true, false, false),
+  },
+  {
+    id: "f7",
+    icon: "layers_alt_fill",
+    color: "pink",
+    titleKey: "features.f7.title",
+    subtitleKey: "features.f7.subtitle",
+    textKey: "features.f7.text",
+    transition: "f7-cover",
+    navbar: navbar(true, true, false),
+  },
+  {
+    id: "sqlite",
+    icon: "archivebox_fill",
+    color: "green",
+    titleKey: "features.sqlite.title",
+    subtitleKey: "features.sqlite.subtitle",
+    textKey: "features.sqlite.text",
+    transition: "f7-push",
+    navbar: navbar(false, false, true),
+  },
+  {
+    id: "reactive",
+    icon: "arrow_2_circlepath",
+    color: "teal",
+    titleKey: "features.reactive.title",
+    subtitleKey: "features.reactive.subtitle",
+    textKey: "features.reactive.text",
+    transition: "f7-dive",
+    navbar: navbar(true, false, false, true),
+  },
+  {
+    id: "back",
+    icon: "arrow_uturn_left_circle_fill",
+    color: "orange",
+    titleKey: "features.back.title",
+    subtitleKey: "features.back.subtitle",
+    textKey: "features.back.text",
+    transition: "f7-flip",
+    navbar: navbar(false, false, false),
+  },
+  {
+    id: "keyboard",
+    icon: "keyboard",
+    color: "purple",
+    titleKey: "features.keyboard.title",
+    subtitleKey: "features.keyboard.subtitle",
+    textKey: "features.keyboard.text",
+    transition: "f7-fade",
+    navbar: navbar(false, true, false),
+  },
+  {
+    id: "metrics",
+    icon: "chart_bar_alt_fill",
+    color: "red",
+    titleKey: "features.metrics.title",
+    subtitleKey: "features.metrics.subtitle",
+    textKey: "features.metrics.text",
+    transition: "f7-circle",
+    navbar: navbar(true, true, true),
+  },
+  {
+    id: "dx",
+    icon: "rocket_fill",
+    color: "yellow",
+    titleKey: "features.dx.title",
+    subtitleKey: "features.dx.subtitle",
+    textKey: "features.dx.text",
+    transition: "f7-cover-v",
+    navbar: navbar(true, false, false),
+  },
+];
+
+export function findFeature(id: string): HomeFeature | undefined {
+  return features.find((feature) => feature.id === id);
+}