@arcfoundry/core 0.1.2

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-summary.d.ts

@@ -0,0 +1 @@
+export declare const dashboardSummarySection = "        <div className=\"summary\" aria-label=\"Dashboard summary\">\n          <Metric label=\"Visitors\" value={numberFormatter.format(summary.visitors)} />\n          <Metric label=\"Trials\" value={numberFormatter.format(summary.trials)} />\n          <Metric label=\"Customers\" value={numberFormatter.format(summary.customers)} />\n          <Metric label=\"Revenue\" value={currencyFormatter.format(summary.revenue)} tone=\"revenue\" />\n        </div>";

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-summary.js

@@ -0,0 +1,7 @@
+export const dashboardSummarySection = `        <div className="summary" aria-label="Dashboard summary">
+          <Metric label="Visitors" value={numberFormatter.format(summary.visitors)} />
+          <Metric label="Trials" value={numberFormatter.format(summary.trials)} />
+          <Metric label="Customers" value={numberFormatter.format(summary.customers)} />
+          <Metric label="Revenue" value={currencyFormatter.format(summary.revenue)} tone="revenue" />
+        </div>`;
+//# sourceMappingURL=dashboard-summary.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-summary.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/dashboard-summary.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;eAKxB,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-table.d.ts

@@ -0,0 +1 @@
+export declare const dashboardTableSection = "        {isLoading ? (\n          <p className=\"loading\" role=\"status\">\n            Loading dashboard data...\n          </p>\n        ) : (\n          <div className=\"table-wrap\">\n            <table>\n              <caption>Campaign performance by acquisition channel</caption>\n              <thead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <tr key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      const sorted = header.column.getIsSorted();\n                      return (\n                        <th\n                          key={header.id}\n                          aria-sort={\n                            sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : \"none\"\n                          }\n                        >\n                          {header.column.getCanSort() ? (\n                            <button type=\"button\" onClick={header.column.getToggleSortingHandler()}>\n                              {flexRender(header.column.columnDef.header, header.getContext())}\n                              <span aria-hidden=\"true\">{sorted === \"asc\" ? \" ^\" : sorted === \"desc\" ? \" v\" : \"\"}</span>\n                            </button>\n                          ) : (\n                            flexRender(header.column.columnDef.header, header.getContext())\n                          )}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </thead>\n              <tbody>\n                {table.getRowModel().rows.length > 0 ? (\n                  table.getRowModel().rows.map((row) => (\n                    <tr key={row.id}>\n                      {row.getVisibleCells().map((cell) => (\n                        <td key={cell.id}>\n                          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </td>\n                      ))}\n                    </tr>\n                  ))\n                ) : (\n                  <tr>\n                    <td className=\"empty\" colSpan={columns.length}>\n                      No channels match this filter.\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}";

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-table.js

@@ -0,0 +1,57 @@
+export const dashboardTableSection = `        {isLoading ? (
+          <p className="loading" role="status">
+            Loading dashboard data...
+          </p>
+        ) : (
+          <div className="table-wrap">
+            <table>
+              <caption>Campaign performance by acquisition channel</caption>
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      const sorted = header.column.getIsSorted();
+                      return (
+                        <th
+                          key={header.id}
+                          aria-sort={
+                            sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none"
+                          }
+                        >
+                          {header.column.getCanSort() ? (
+                            <button type="button" onClick={header.column.getToggleSortingHandler()}>
+                              {flexRender(header.column.columnDef.header, header.getContext())}
+                              <span aria-hidden="true">{sorted === "asc" ? " ^" : sorted === "desc" ? " v" : ""}</span>
+                            </button>
+                          ) : (
+                            flexRender(header.column.columnDef.header, header.getContext())
+                          )}
+                        </th>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </thead>
+              <tbody>
+                {table.getRowModel().rows.length > 0 ? (
+                  table.getRowModel().rows.map((row) => (
+                    <tr key={row.id}>
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td className="empty" colSpan={columns.length}>
+                      No channels match this filter.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}`;
+//# sourceMappingURL=dashboard-table.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-table.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/dashboard-table.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAuD1B,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-toolbar.d.ts

@@ -0,0 +1 @@
+export declare const dashboardToolbarSection = "        <div className=\"toolbar\">\n          <label htmlFor=\"channel-filter\">Filter channels</label>\n          <input\n            id=\"channel-filter\"\n            name=\"channel-filter\"\n            placeholder=\"Search by channel\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value);\n              setExportStatus(\"\");\n            }}\n          />\n          <button type=\"button\" onClick={exportVisibleRows}>\n            Export CSV\n          </button>\n        </div>";

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-toolbar.js

@@ -0,0 +1,17 @@
+export const dashboardToolbarSection = `        <div className="toolbar">
+          <label htmlFor="channel-filter">Filter channels</label>
+          <input
+            id="channel-filter"
+            name="channel-filter"
+            placeholder="Search by channel"
+            value={query}
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setExportStatus("");
+            }}
+          />
+          <button type="button" onClick={exportVisibleRows}>
+            Export CSV
+          </button>
+        </div>`;
+//# sourceMappingURL=dashboard-toolbar.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/dashboard-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-toolbar.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/dashboard-toolbar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;eAexB,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/imports.d.ts

@@ -0,0 +1 @@
+export declare const importsSection = "import React, { useEffect, useMemo, useState } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport {\n  type AnalyticsRow,\n  analyticsRows,\n  conversionRate,\n  dashboardSummary,\n  filterRows,\n  rowsToCsv,\n} from \"./analytics-data\";\nimport \"./styles.css\";";

package/dist/demo-project/definitions/data-driven/templates/main-template/imports.js

@@ -0,0 +1,20 @@
+export const importsSection = `import React, { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import {
+  type AnalyticsRow,
+  analyticsRows,
+  conversionRate,
+  dashboardSummary,
+  filterRows,
+  rowsToCsv,
+} from "./analytics-data";
+import "./styles.css";`;
+//# sourceMappingURL=imports.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/imports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imports.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/imports.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;uBAkBP,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/metric.d.ts

@@ -0,0 +1 @@
+export declare const metricSection = "function Metric({ label, value, tone }: { label: string; value: string; tone?: \"revenue\" }) {\n  return (\n    <div className={\"metric \" + (tone === \"revenue\" ? \"metric--revenue\" : \"\")}>\n      <span>{label}</span>\n      <strong>{value}</strong>\n    </div>\n  );\n}";

package/dist/demo-project/definitions/data-driven/templates/main-template/metric.js

@@ -0,0 +1,9 @@
+export const metricSection = `function Metric({ label, value, tone }: { label: string; value: string; tone?: "revenue" }) {
+  return (
+    <div className={"metric " + (tone === "revenue" ? "metric--revenue" : "")}>
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}`;
+//# sourceMappingURL=metric.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/metric.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;EAO3B,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/render.d.ts

@@ -0,0 +1 @@
+export declare const renderSection = "createRoot(document.getElementById(\"root\")!).render(<App />);";

package/dist/demo-project/definitions/data-driven/templates/main-template/render.js

@@ -0,0 +1,2 @@
+export const renderSection = `createRoot(document.getElementById("root")!).render(<App />);`;
+//# sourceMappingURL=render.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/render.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,+DAA+D,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/main-template/table-setup.d.ts

@@ -0,0 +1 @@
+export declare const tableSetupSection = "const currencyFormatter = new Intl.NumberFormat(\"en-US\", {\n  currency: \"USD\",\n  maximumFractionDigits: 0,\n  style: \"currency\",\n});\nconst numberFormatter = new Intl.NumberFormat(\"en-US\");\nconst percentFormatter = new Intl.NumberFormat(\"en-US\", {\n  maximumFractionDigits: 1,\n  style: \"percent\",\n});\n\nconst columns: ColumnDef<AnalyticsRow>[] = [\n  {\n    accessorKey: \"channel\",\n    header: \"Channel\",\n    cell: ({ getValue }) => <strong>{getValue<string>()}</strong>,\n  },\n  {\n    accessorKey: \"visitors\",\n    header: \"Visitors\",\n    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),\n  },\n  {\n    accessorKey: \"trials\",\n    header: \"Trials\",\n    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),\n  },\n  {\n    accessorKey: \"customers\",\n    header: \"Customers\",\n    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),\n  },\n  {\n    accessorKey: \"revenue\",\n    header: \"Revenue\",\n    cell: ({ getValue }) => currencyFormatter.format(getValue<number>()),\n  },\n  {\n    accessorFn: conversionRate,\n    id: \"conversion\",\n    header: \"Conversion\",\n    cell: ({ getValue }) => percentFormatter.format(getValue<number>()),\n  },\n];";

package/dist/demo-project/definitions/data-driven/templates/main-template/table-setup.js

@@ -0,0 +1,45 @@
+export const tableSetupSection = `const currencyFormatter = new Intl.NumberFormat("en-US", {
+  currency: "USD",
+  maximumFractionDigits: 0,
+  style: "currency",
+});
+const numberFormatter = new Intl.NumberFormat("en-US");
+const percentFormatter = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 1,
+  style: "percent",
+});
+
+const columns: ColumnDef<AnalyticsRow>[] = [
+  {
+    accessorKey: "channel",
+    header: "Channel",
+    cell: ({ getValue }) => <strong>{getValue<string>()}</strong>,
+  },
+  {
+    accessorKey: "visitors",
+    header: "Visitors",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "trials",
+    header: "Trials",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "customers",
+    header: "Customers",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "revenue",
+    header: "Revenue",
+    cell: ({ getValue }) => currencyFormatter.format(getValue<number>()),
+  },
+  {
+    accessorFn: conversionRate,
+    id: "conversion",
+    header: "Conversion",
+    cell: ({ getValue }) => percentFormatter.format(getValue<number>()),
+  },
+];`;
+//# sourceMappingURL=table-setup.js.map

package/dist/demo-project/definitions/data-driven/templates/main-template/table-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-setup.js","sourceRoot":"","sources":["../../../../../../src/demo-project/definitions/data-driven/templates/main-template/table-setup.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C9B,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/playwright-config-ts.d.ts

@@ -0,0 +1 @@
+export declare const playwrightConfigContent = "import { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./e2e\",\n  use: {\n    acceptDownloads: true,\n    baseURL: \"http://127.0.0.1:4175\",\n    trace: \"retain-on-failure\",\n  },\n  webServer: {\n    command: \"pnpm --filter @arcfoundry/verification-data-driven build && pnpm --filter @arcfoundry/verification-data-driven exec vite preview --host 127.0.0.1 --port 4175\",\n    url: \"http://127.0.0.1:4175\",\n    reuseExistingServer: !process.env.CI,\n    timeout: 120000,\n  },\n  projects: [\n    { name: \"chromium\", use: { ...devices[\"Desktop Chrome\"] } },\n    { name: \"mobile\", use: { ...devices[\"Pixel 5\"] } },\n  ],\n});\n";

package/dist/demo-project/definitions/data-driven/templates/playwright-config-ts.js

@@ -0,0 +1,22 @@
+export const playwrightConfigContent = `import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  use: {
+    acceptDownloads: true,
+    baseURL: "http://127.0.0.1:4175",
+    trace: "retain-on-failure",
+  },
+  webServer: {
+    command: "pnpm --filter @arcfoundry/verification-data-driven build && pnpm --filter @arcfoundry/verification-data-driven exec vite preview --host 127.0.0.1 --port 4175",
+    url: "http://127.0.0.1:4175",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "mobile", use: { ...devices["Pixel 5"] } },
+  ],
+});
+`;
+//# sourceMappingURL=playwright-config-ts.js.map

package/dist/demo-project/definitions/data-driven/templates/playwright-config-ts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playwright-config-ts.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/playwright-config-ts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;CAoBtC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-analytics-data-ts.d.ts

@@ -0,0 +1 @@
+export declare const srcAnalyticsDataContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-analytics-data-ts.js

@@ -0,0 +1,7 @@
+import { sourceFile } from "../../../source-template.js";
+import { analyticsExportTemplate } from "./analytics-data-template/export.js";
+import { analyticsRowsTemplate } from "./analytics-data-template/rows.js";
+import { analyticsSummaryTemplate } from "./analytics-data-template/summary.js";
+import { analyticsTableTemplate } from "./analytics-data-template/table.js";
+export const srcAnalyticsDataContent = sourceFile(analyticsRowsTemplate, analyticsSummaryTemplate, analyticsTableTemplate, analyticsExportTemplate);
+//# sourceMappingURL=src-analytics-data-ts.js.map

package/dist/demo-project/definitions/data-driven/templates/src-analytics-data-ts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-analytics-data-ts.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-analytics-data-ts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAC/C,qBAAqB,EACrB,wBAAwB,EACxB,sBAAsB,EACtB,uBAAuB,CACxB,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-analytics-table-tsx.d.ts

@@ -0,0 +1 @@
+export declare const srcAnalyticsTableContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-analytics-table-tsx.js

@@ -0,0 +1,48 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcAnalyticsTableContent = sourceFile(`import { flexRender, type Table } from "@tanstack/react-table";
+import type { AnalyticsRow } from "./analytics-data";
+import { analyticsColumns } from "./columns";
+
+export function AnalyticsTable({ table }: { table: Table<AnalyticsRow> }) {
+  return (
+    <div className="table-wrap">
+      <table>
+        <caption>Campaign performance by acquisition channel</caption>
+        <thead>
+          {table.getHeaderGroups().map((group) => (
+            <tr key={group.id}>
+              {group.headers.map((header) => {
+                const sorted = header.column.getIsSorted();
+                const ariaSort = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
+                return (
+                  <th key={header.id} aria-sort={ariaSort}>
+                    {header.column.getCanSort() ? (
+                      <button type="button" onClick={header.column.getToggleSortingHandler()}>
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        <span aria-hidden="true">{sorted === "asc" ? " ^" : sorted === "desc" ? " v" : ""}</span>
+                      </button>
+                    ) : (
+                      flexRender(header.column.columnDef.header, header.getContext())
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+              ))}
+            </tr>
+          )) : (
+            <tr><td className="empty" colSpan={analyticsColumns.length}>No channels match this filter.</td></tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}`);
+//# sourceMappingURL=src-analytics-table-tsx.js.map

package/dist/demo-project/definitions/data-driven/templates/src-analytics-table-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-analytics-table-tsx.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-analytics-table-tsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,wBAAwB,GACnC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CX,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-app-tsx.d.ts

@@ -0,0 +1 @@
+export declare const srcAppContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-app-tsx.js

@@ -0,0 +1,63 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcAppContent = sourceFile(`import { useEffect, useMemo, useState } from "react";
+import { getCoreRowModel, getSortedRowModel, useReactTable, type SortingState } from "@tanstack/react-table";
+import { analyticsRows, dashboardSummary, filterRows } from "./analytics-data";
+import { AnalyticsTable } from "./analytics-table";
+import { analyticsColumns } from "./columns";
+import { exportVisibleRows } from "./export-visible-rows";
+import { currencyFormatter, numberFormatter } from "./formatters";
+import { Metric } from "./metric";
+
+export function App() {
+  const [query, setQuery] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [sorting, setSorting] = useState<SortingState>([{ id: "revenue", desc: true }]);
+  const [exportStatus, setExportStatus] = useState("");
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setIsLoading(false), 120);
+    return () => window.clearTimeout(timeout);
+  }, []);
+
+  const filteredRows = useMemo(() => filterRows(analyticsRows, query), [query]);
+  const summary = useMemo(() => dashboardSummary(filteredRows), [filteredRows]);
+  const table = useReactTable({
+    columns: analyticsColumns,
+    data: filteredRows,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+  });
+
+  function handleExport() {
+    const exportedRows = exportVisibleRows(table.getSortedRowModel());
+    setExportStatus("Exported " + exportedRows + " rows to analytics-export.csv");
+  }
+
+  return (
+    <main className="page">
+      <section className="dashboard" aria-labelledby="dashboard-title">
+        <div className="dashboard__header">
+          <p className="eyebrow">Data-driven verification</p>
+          <h1 id="dashboard-title">Channel performance dashboard</h1>
+          <p>Filter, sort, and export campaign performance evidence from a client-side dataset.</p>
+        </div>
+        <div className="summary" aria-label="Dashboard summary">
+          <Metric label="Visitors" value={numberFormatter.format(summary.visitors)} />
+          <Metric label="Trials" value={numberFormatter.format(summary.trials)} />
+          <Metric label="Customers" value={numberFormatter.format(summary.customers)} />
+          <Metric label="Revenue" value={currencyFormatter.format(summary.revenue)} tone="revenue" />
+        </div>
+        <div className="toolbar">
+          <label htmlFor="channel-filter">Filter channels</label>
+          <input id="channel-filter" name="channel-filter" placeholder="Search by channel" value={query} onChange={(event) => { setQuery(event.target.value); setExportStatus(""); }} />
+          <button type="button" onClick={handleExport}>Export CSV</button>
+        </div>
+        {isLoading ? <p className="loading" role="status">Loading dashboard data...</p> : <AnalyticsTable table={table} />}
+        <p className="export-status" role="status">{exportStatus}</p>
+      </section>
+    </main>
+  );
+}`);
+//# sourceMappingURL=src-app-tsx.js.map

package/dist/demo-project/definitions/data-driven/templates/src-app-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-app-tsx.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-app-tsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DtC,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-columns-tsx.d.ts

@@ -0,0 +1 @@
+export declare const srcColumnsContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-columns-tsx.js

@@ -0,0 +1,40 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcColumnsContent = sourceFile(`import type { ColumnDef } from "@tanstack/react-table";
+import type { AnalyticsRow } from "./analytics-data";
+import { conversionRate } from "./analytics-data";
+import { currencyFormatter, numberFormatter, percentFormatter } from "./formatters";
+
+export const analyticsColumns: ColumnDef<AnalyticsRow>[] = [
+  {
+    accessorKey: "channel",
+    header: "Channel",
+    cell: ({ getValue }) => <strong>{getValue<string>()}</strong>,
+  },
+  {
+    accessorKey: "visitors",
+    header: "Visitors",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "trials",
+    header: "Trials",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "customers",
+    header: "Customers",
+    cell: ({ getValue }) => numberFormatter.format(getValue<number>()),
+  },
+  {
+    accessorKey: "revenue",
+    header: "Revenue",
+    cell: ({ getValue }) => currencyFormatter.format(getValue<number>()),
+  },
+  {
+    accessorFn: conversionRate,
+    id: "conversion",
+    header: "Conversion",
+    cell: ({ getValue }) => percentFormatter.format(getValue<number>()),
+  },
+];`);
+//# sourceMappingURL=src-columns-tsx.js.map

package/dist/demo-project/definitions/data-driven/templates/src-columns-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-columns-tsx.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-columns-tsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCzC,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-export-visible-rows-ts.d.ts

@@ -0,0 +1 @@
+export declare const srcExportVisibleRowsContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-export-visible-rows-ts.js

@@ -0,0 +1,22 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcExportVisibleRowsContent = sourceFile(`import type { RowModel } from "@tanstack/react-table";
+import type { AnalyticsRow } from "./analytics-data";
+import { rowsToCsv } from "./analytics-data";
+
+export function exportVisibleRows(rowModel: RowModel<AnalyticsRow>): number {
+  const visibleRows = rowModel.rows.map((row) => row.original);
+  const csv = rowsToCsv(visibleRows);
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+
+  anchor.href = url;
+  anchor.download = "analytics-export.csv";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+
+  return visibleRows.length;
+}`);
+//# sourceMappingURL=src-export-visible-rows-ts.js.map

package/dist/demo-project/definitions/data-driven/templates/src-export-visible-rows-ts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-export-visible-rows-ts.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-export-visible-rows-ts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,2BAA2B,GACtC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;EAmBX,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-formatters-ts.d.ts

@@ -0,0 +1 @@
+export declare const srcFormattersContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-formatters-ts.js

@@ -0,0 +1,14 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcFormattersContent = sourceFile(`export const currencyFormatter = new Intl.NumberFormat("en-US", {
+  currency: "USD",
+  maximumFractionDigits: 0,
+  style: "currency",
+});
+
+export const numberFormatter = new Intl.NumberFormat("en-US");
+
+export const percentFormatter = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 1,
+  style: "percent",
+});`);
+//# sourceMappingURL=src-formatters-ts.js.map

package/dist/demo-project/definitions/data-driven/templates/src-formatters-ts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-formatters-ts.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-formatters-ts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,oBAAoB,GAC/B,UAAU,CAAC;;;;;;;;;;;IAWT,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-main-tsx.d.ts

@@ -0,0 +1 @@
+export declare const srcMainContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-main-tsx.js

@@ -0,0 +1,6 @@
+import { renderRootSection } from "../../../react-main-template.js";
+import { sourceFile } from "../../../source-template.js";
+export const srcMainContent = sourceFile(`import { createRoot } from "react-dom/client";
+import { App } from "./app";
+import "./styles.css";`, renderRootSection);
+//# sourceMappingURL=src-main-tsx.js.map

package/dist/demo-project/definitions/data-driven/templates/src-main-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-main-tsx.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-main-tsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC;;uBAEqB,EACrB,iBAAiB,CAClB,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-metric-tsx.d.ts

@@ -0,0 +1 @@
+export declare const srcMetricContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-metric-tsx.js

@@ -0,0 +1,18 @@
+import { sourceFile } from "../../../source-template.js";
+export const srcMetricContent = sourceFile(`export function Metric({
+  label,
+  tone,
+  value,
+}: {
+  label: string;
+  tone?: "revenue";
+  value: string;
+}) {
+  return (
+    <div className={"metric " + (tone === "revenue" ? "metric--revenue" : "")}>
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}`);
+//# sourceMappingURL=src-metric-tsx.js.map

package/dist/demo-project/definitions/data-driven/templates/src-metric-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-metric-tsx.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-metric-tsx.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;EAezC,CAAC,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/src-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const srcStylesContent: string;

package/dist/demo-project/definitions/data-driven/templates/src-styles-css.js

@@ -0,0 +1,17 @@
+import { appFoundationStyles, cssFile, eyebrowStyles, heroHeadingStyles, introCopyStyles, } from "../../../style-template.js";
+import { dashboardControlsStyles } from "./styles/dashboard-controls.js";
+import { dashboardFeedbackStyles } from "./styles/dashboard-feedback.js";
+import { dashboardLayoutStyles } from "./styles/dashboard-layout.js";
+import { dashboardMetricsStyles } from "./styles/dashboard-metrics.js";
+import { dashboardResponsiveStyles } from "./styles/dashboard-responsive.js";
+import { dashboardTableStyles } from "./styles/dashboard-table.js";
+export const srcStylesContent = cssFile(appFoundationStyles({
+    background: "#f5f7f8",
+    pagePadding: "clamp(20px, 4vw, 56px)",
+    controls: ["button", "input"],
+}), dashboardLayoutStyles, eyebrowStyles({ color: "#0b6b6f" }), heroHeadingStyles({ fontSize: "clamp(2rem, 4vw, 3.7rem)", margin: "0" }), introCopyStyles(".dashboard__header p:last-child", {
+    color: "#4b5961",
+    lineHeight: "1.55",
+    margin: "0",
+}), dashboardMetricsStyles, dashboardControlsStyles, dashboardTableStyles, dashboardFeedbackStyles, dashboardResponsiveStyles);
+//# sourceMappingURL=src-styles-css.js.map

package/dist/demo-project/definitions/data-driven/templates/src-styles-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-styles-css.js","sourceRoot":"","sources":["../../../../../src/demo-project/definitions/data-driven/templates/src-styles-css.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CACrC,mBAAmB,CAAC;IAClB,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,wBAAwB;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC9B,CAAC,EACF,qBAAqB,EACrB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACnC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EACxE,eAAe,CAAC,iCAAiC,EAAE;IACjD,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,GAAG;CACZ,CAAC,EACF,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,uBAAuB,EACvB,yBAAyB,CAC1B,CAAC"}

package/dist/demo-project/definitions/data-driven/templates/styles/dashboard-controls.d.ts

@@ -0,0 +1 @@
+export declare const dashboardControlsStyles = "\n.toolbar {\n  align-items: end;\n  display: grid;\n  gap: 10px;\n  grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) auto;\n  margin-bottom: 16px;\n}\n\n.toolbar label {\n  color: #304049;\n  font-weight: 800;\n}\n\ninput {\n  border: 1px solid #aebdc4;\n  border-radius: 8px;\n  min-height: 44px;\n  padding: 0 12px;\n}\n\nbutton {\n  background: #172026;\n  border: 0;\n  border-radius: 8px;\n  color: #ffffff;\n  cursor: pointer;\n  font-weight: 800;\n  min-height: 44px;\n  padding: 0 14px;\n}\n\nbutton:hover {\n  background: #0b6b6f;\n}\n\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 3px solid #f4a261;\n  outline-offset: 3px;\n}\n";