@datashow/super-visual-cli 0.0.0-stage → 0.1.0-rc.0

package/templates/blank/contracts/semantic-model.yaml

@@ -0,0 +1,39 @@
+contractVersion: 1
+name: {{PROJECT_TITLE}}
+culture: en-AU
+compatibilityLevel: 1702
+storageMode: import
+sourceParameters:
+  server: localhost
+  database: SuperVisualDemo
+tables:
+  - name: Sales
+    role: fact
+    grain: One row per example category.
+    description: Minimal self-contained sales data used by the Super Visual hello-world project.
+    source:
+      referencedTables: []
+      sql: |-
+        SELECT example.[Category], CAST(example.[Amount] AS decimal(19, 4)) AS [Amount]
+        FROM (VALUES (N'Bikes', 42000), (N'Clothing', 18000), (N'Accessories', 27000)) AS example([Category], [Amount])
+    columns:
+      - name: Category
+        sourceColumn: Category
+        dataType: String
+        hidden: false
+        summarizeBy: none
+        description: Example product category.
+      - name: Amount
+        sourceColumn: Amount
+        dataType: Decimal
+        hidden: true
+        summarizeBy: none
+        description: Example sales amount.
+    measures:
+      - name: Total Sales
+        expression: "SUM('Sales'[Amount])"
+        formatString: "$#,##0"
+        displayFolder: Measures
+        description: Total example sales in the current category context.
+    hierarchies: []
+relationships: []

package/templates/blank/contracts/widget-broker.json

@@ -0,0 +1,33 @@
+{
+  "contractVersion": 1,
+  "summary": "One governed categorical dataset for the hello-world chart.",
+  "adapterMode": "source-direct-import",
+  "baseModelMutation": false,
+  "dataView": {
+    "mapping": "table",
+    "discriminator": "WidgetId",
+    "fields": ["WidgetId", "AxisKey", "Label", "Sort", "SeriesKey", "SeriesLabel", "WidgetValue", "BrokerContext"]
+  },
+  "widgets": [
+    {
+      "id": "sales",
+      "title": "Sales by category",
+      "reportWidgetIds": ["sales"],
+      "businessQuestionIds": ["sales-mix"],
+      "shape": "categorical",
+      "dimensions": [{ "key": "Sales[Category]", "label": "Sales[Category]" }],
+      "axis": "Sales[Category]",
+      "measures": ["[Total Sales]"],
+      "rowLimit": 10,
+      "rowSelection": "top-by-value",
+      "selectable": false,
+      "invalidates": []
+    }
+  ],
+  "cachePolicy": {
+    "retainSourceWidget": true,
+    "cancelStaleRequests": true,
+    "externalFilterInvalidation": "all-dependent-widgets"
+  },
+  "risks": []
+}

package/templates/blank/deployment/CERTIFICATION.md

@@ -0,0 +1,18 @@
+# Live certification
+
+First update the semantic and broker contracts for the selected Power BI
+semantic model. Initialize this project with that model's workspace and
+`--semantic-model-id`, then run the current live workflow:
+
+```bash
+npx supervisual preview test --json
+npx supervisual publish --json
+```
+
+Review the returned workspace, operations, and plan ID. Do not apply until a
+human authorizes that exact plan ID and target workspace. Apply with
+`npx supervisual publish --confirm <authorized-plan-id> --json`.
+
+Only an `accepted` result and a successful browser check constitute a passing
+live certification. The selected semantic-model ID is the only model ID users
+provide.

package/templates/blank/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "{{PROJECT_ID}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "check": "supervisual check .",
+    "compile": "supervisual compile .",
+    "package": "supervisual package .",
+    "verify": "supervisual verify ."
+  },
+  "devDependencies": {
+    "@datashow/super-visual-cli": "0.1.0-rc.0"
+  }
+}

package/templates/blank/source/report-design.less

@@ -0,0 +1,20 @@
+.hello-world {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 32px;
+  color: #173c36;
+  background: #f4f7f5;
+  font-family: Aptos, "Segoe UI", sans-serif;
+}
+
+.hello-world .eyebrow { margin: 0 0 8px; color: #167d6c; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.hello-world h1 { margin: 0; font: 600 clamp(36px, 6vw, 64px)/1 Georgia, serif; }
+.hello-world .lede { max-width: 620px; color: #5e6d68; font-size: 17px; }
+.hello-world section { margin-top: 28px; padding: 24px; border: 1px solid #d3ddd8; border-radius: 8px; background: #fff; }
+.hello-world h2 { margin: 0 0 16px; font-size: 18px; }
+.hello-world .total { font: 600 42px/1 Georgia, serif; }
+.hello-world .bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
+.hello-world .bars li { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr minmax(70px, auto); gap: 12px; align-items: center; }
+.hello-world .track { height: 14px; overflow: hidden; border-radius: 7px; background: #eaf0ed; }
+.hello-world .bar { display: block; height: 100%; border-radius: inherit; background: #167d6c; }
+@media (max-width: 640px) { .hello-world { padding: 18px; } .hello-world .bars li { grid-template-columns: 1fr auto; } .hello-world .track { grid-column: 1 / -1; } }

package/templates/blank/source/reportApplication.tsx

@@ -0,0 +1,29 @@
+import { useEffect, type ReactElement } from "react";
+import type { ReportApplicationProps } from "./reportRuntime";
+
+export function ReportApplication({ model, onVisibleDatasetsChange }: ReportApplicationProps): ReactElement {
+  useEffect(() => onVisibleDatasetsChange?.(["sales"]), [onVisibleDatasetsChange]);
+  const dataset = model.datasets.sales;
+  const maximum = Math.max(1, ...(dataset?.points.map((point) => point.value) ?? [1]));
+  const total = dataset?.points.reduce((sum, point) => sum + point.value, 0) ?? 0;
+
+  return <main className="hello-world">
+    <p className="eyebrow">Super Visual / minimal example</p>
+    <h1>Hello, governed data.</h1>
+    <p className="lede">This React page is bound only through ReportApplicationProps.</p>
+    <section aria-labelledby="total-sales">
+      <h2 id="total-sales">Total sales</h2>
+      <strong className="total">{new Intl.NumberFormat(undefined, { style: "currency", currency: "AUD", maximumFractionDigits: 0 }).format(total)}</strong>
+    </section>
+    <section aria-labelledby="sales-by-category">
+      <h2 id="sales-by-category">Sales by category</h2>
+      {!dataset?.points.length ? <p>Waiting for Power BI data…</p> : <ol className="bars">
+        {dataset.points.map((point) => <li key={point.key}>
+          <span>{point.label}</span>
+          <span className="track"><span className="bar" style={{ width: `${Math.max(2, (point.value / maximum) * 100)}%` }} /></span>
+          <strong>{new Intl.NumberFormat().format(point.value)}</strong>
+        </li>)}
+      </ol>}
+    </section>
+  </main>;
+}

package/templates/blank/supervisual.yaml

@@ -0,0 +1,24 @@
+contractVersion: 1
+application:
+  id: {{PROJECT_ID}}
+  title: {{PROJECT_TITLE}}
+  entry: contracts/report-source.json
+  style: contracts/report-source.json
+target:
+  platform: powerbi
+  visual:
+    name: {{VISUAL_NAME}}
+    displayName: {{PROJECT_TITLE}}
+    guid: {{VISUAL_GUID}}
+    version: 1.0.0.1
+    apiVersion: 5.11.1
+semantic:
+  model: contracts/semantic-model.yaml
+  broker: contracts/widget-broker.json
+  pageSet: contracts/page-set.yaml
+source:
+  bundle: contracts/report-source.json
+output:
+  directory: dist
+compliance:
+  policies: [core, powerbi]

package/templates/hello-world/README.md

@@ -0,0 +1,29 @@
+# {{PROJECT_TITLE}}
+
+This is the smallest complete Super Visual connectivity proof. Its React page
+shows a searchable catalog of the entities declared by the selected Power BI
+semantic model. Visible rows prove the governed data path without exposing
+expressions, parameter values, or business rows.
+
+This project is ready for the three-command workflow. If `init` was given a
+workspace and semantic model, run:
+
+```bash
+npx supervisual dev --open
+npx supervisual publish
+```
+
+`publish` performs the checks, packaging, verification, and planning, then asks
+for confirmation of the exact plan ID. For a project without a saved binding,
+pass the IDs once:
+
+```bash
+npx supervisual dev . --workspace-id <workspace-guid> \
+  --semantic-model-id <semantic-model-guid> --open
+npx supervisual preview test . --workspace-id <workspace-guid> \
+  --semantic-model-id <semantic-model-guid> --json
+```
+
+Point the project at another semantic-model ID and the catalog updates
+automatically. Application source receives data only through
+`ReportApplicationProps`.

package/templates/hello-world/contracts/page-set.yaml

@@ -0,0 +1,74 @@
+contractVersion: 1
+shell:
+  id: {{PROJECT_ID}}
+  title: {{PROJECT_TITLE}}
+  defaultPage: overview
+  designSystem:
+    id: hello-world
+    sha256: {{DESIGN_HASH}}
+  acceptedConcept: { id: {{PROJECT_ID}} }
+  governanceLabel: Power BI governed
+  locale: en-AU
+  currencyCode: ''
+  filterContext: []
+  navigation:
+    - { page: overview, label: Model catalog }
+  theme:
+    background: '#F4F7F5'
+    surface: '#FFFFFF'
+    quietSurface: '#EAF0ED'
+    text: '#173C36'
+    mutedText: '#5E6D68'
+    metadata: '#71807A'
+    rule: '#D3DDD8'
+    grid: '#E3EAE6'
+    accent: '#167D6C'
+    attention: '#9B6B23'
+    positive: '#2E7D5B'
+    negative: '#B84A52'
+    context: ['#167D6C', '#6F6A9A']
+    dataColors: ['#167D6C', '#6F6A9A', '#9B6B23']
+    displayFont: Georgia, serif
+    bodyFont: Aptos, Segoe UI, sans-serif
+    contentWidth: 1200
+    layoutColumns: 12
+    layoutGap: 16
+    cardRadius: 8
+    cardPadding: [20, 20, 20, 20]
+    kpiTopAccent: 3
+    density: comfortable
+    typography: { findingMin: 40, findingMax: 56, sectionTitle: 22, kpiValue: 32, body: 15, chart: 12, table: 13, metadata: 11 }
+pages:
+  - id: overview
+    title: Semantic Model Catalog
+    eyebrow: Super Visual / connectivity proof
+    summary:
+      headline: Hello, semantic model.
+      body: Search the declared model entities returned through the governed Super Visual broker.
+      emphasisBinding: null
+    search:
+      placeholder: Search type, parent, or name
+      dataset: model-catalog
+      filterTarget: Super Visual Model Catalog[Entity]
+    kpis: []
+    widgets:
+      - id: model-catalog
+        conceptRegionId: model-catalog
+        primitive: ranked-table
+        title: Semantic model entities
+        subtitle: Read from the selected live Power BI semantic model
+        dataset: model-catalog
+        reportWidgetIds: [model-catalog]
+        businessQuestionIds: [semantic-connectivity]
+        layout: { columns: 12, minHeight: 420 }
+        settings: { orientation: null, curve: null, showLegend: false, showLabels: true, sort: ascending, limit: 100, emphasis: null }
+interactions: []
+designRationale:
+  narrative: Make the smallest sample an inspectable proof that React is receiving governed semantic-model rows.
+  decisions:
+    - Replace arbitrary business data with a generated semantic-model catalog.
+    - Keep search client-side so it is immediate and does not create model filters.
+  accessibility:
+    - Use a labelled search field, semantic table headings, visible connection status, and text counts.
+  risks:
+    - Catalog rows prove the report-to-semantic-provider path; source refresh remains a separate deployment acceptance check.

package/templates/hello-world/contracts/report-source.json

@@ -0,0 +1,45 @@
+{
+  "contractVersion": 1,
+  "designSystem": {
+    "id": "hello-world",
+    "sha256": "{{DESIGN_HASH}}"
+  },
+  "acceptedConcept": {
+    "id": "{{PROJECT_ID}}"
+  },
+  "entry": "src/reportApplication.tsx",
+  "files": [
+    {
+      "path": "src/reportApplication.tsx",
+      "content": "Template source is synchronized from source/reportApplication.tsx during initialization."
+    },
+    {
+      "path": "style/report-design.less",
+      "content": "Template style is synchronized from source/report-design.less during initialization."
+    }
+  ],
+  "routes": [
+    {
+      "id": "overview",
+      "title": "Semantic Model Catalog",
+      "datasets": ["model-catalog"],
+      "businessQuestionIds": ["semantic-connectivity"]
+    }
+  ],
+  "bindings": [
+    {
+      "dataset": "model-catalog",
+      "component": "searchable-table",
+      "reportWidgetIds": ["model-catalog"],
+      "businessQuestionIds": ["semantic-connectivity"]
+    }
+  ],
+  "designRationale": {
+    "direction": "A searchable semantic-model catalog that proves the governed provider path.",
+    "pageCompositions": ["One semantic-model catalog page"],
+    "dataVisualisation": ["Searchable semantic-entity table and entity-type counts"],
+    "responsiveBehaviour": ["Summary cards wrap and the semantic table scrolls horizontally on narrow screens."],
+    "accessibility": ["Labelled search input, semantic table headings, visible numeric counts, and a live connection status."],
+    "risks": ["Catalog rows prove the report-to-semantic-provider path; source refresh remains a separate deployment acceptance check."]
+  }
+}

package/templates/hello-world/contracts/semantic-model.yaml

@@ -0,0 +1,32 @@
+contractVersion: 1
+name: {{PROJECT_TITLE}}
+culture: en-AU
+compatibilityLevel: 1702
+storageMode: import
+sourceParameters:
+  server: localhost
+  database: SuperVisualDemo
+tables:
+  - name: Hello World
+    role: dimension
+    grain: One row containing the connectivity greeting.
+    description: Minimal source-backed table used to prove model refresh and catalog generation.
+    source:
+      referencedTables: []
+      sql: |-
+        SELECT N'Hello, semantic model.' AS [Message]
+    columns:
+      - name: Message
+        sourceColumn: Message
+        dataType: String
+        hidden: false
+        summarizeBy: none
+        description: Greeting returned by the source-backed connectivity table.
+    measures:
+      - name: Row Count
+        expression: "COUNTROWS('Hello World')"
+        formatString: "0"
+        displayFolder: Connectivity
+        description: Count of rows returned by the connectivity table.
+    hierarchies: []
+relationships: []

package/templates/hello-world/contracts/widget-broker.json

@@ -0,0 +1,37 @@
+{
+  "contractVersion": 1,
+  "summary": "Generated searchable semantic-model catalog used as an end-to-end connectivity proof.",
+  "adapterMode": "source-direct-import",
+  "baseModelMutation": false,
+  "dataView": {
+    "mapping": "table",
+    "discriminator": "WidgetId",
+    "fields": ["WidgetId", "AxisKey", "Label", "Sort", "SeriesKey", "SeriesLabel", "WidgetValue", "BrokerContext"]
+  },
+  "widgets": [
+    {
+      "id": "model-catalog",
+      "title": "Semantic model entities",
+      "reportWidgetIds": ["model-catalog"],
+      "businessQuestionIds": ["semantic-connectivity"],
+      "shape": "hierarchy",
+      "dimensions": [
+        { "key": "Super Visual Model Catalog[Entity Type]", "label": "Super Visual Model Catalog[Entity Type]" },
+        { "key": "Super Visual Model Catalog[Parent]", "label": "Super Visual Model Catalog[Parent]" },
+        { "key": "Super Visual Model Catalog[Entity]", "label": "Super Visual Model Catalog[Entity]" }
+      ],
+      "axis": "Super Visual Model Catalog[Entity]",
+      "measures": ["[Entity Count]"],
+      "rowLimit": 250,
+      "rowSelection": "first-by-axis",
+      "selectable": false,
+      "invalidates": []
+    }
+  ],
+  "cachePolicy": {
+    "retainSourceWidget": true,
+    "cancelStaleRequests": true,
+    "externalFilterInvalidation": "all-dependent-widgets"
+  },
+  "risks": ["The catalog lists declared model metadata but does not expose expressions, parameter values, or business rows."]
+}

package/templates/hello-world/deployment/CERTIFICATION.md

@@ -0,0 +1,17 @@
+# Hello World live certification
+
+Initialize this project with a workspace and Power BI semantic-model ID using
+`--semantic-model-id`, then run the current live workflow:
+
+```bash
+npx supervisual preview test --json
+npx supervisual publish --json
+```
+
+Review the returned workspace, operations, and plan ID. Do not apply until a
+human authorizes that exact plan ID and target workspace. Apply with
+`npx supervisual publish --confirm <authorized-plan-id> --json`.
+
+Only an `accepted` result and a successful browser check constitute a passing
+live certification. The selected semantic-model ID is the only model ID users
+provide.

package/templates/hello-world/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "{{PROJECT_ID}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "check": "supervisual check .",
+    "compile": "supervisual compile .",
+    "package": "supervisual package .",
+    "verify": "supervisual verify ."
+  },
+  "devDependencies": {
+    "@datashow/super-visual-cli": "0.1.0-rc.0"
+  }
+}

package/templates/hello-world/source/report-design.less

@@ -0,0 +1,35 @@
+.hello-world { box-sizing: border-box; min-height: 100%; padding: 32px; color: #173c36; background: #f4f7f5; font-family: Aptos, "Segoe UI", sans-serif; }
+.hello-world * { box-sizing: border-box; }
+.hero { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
+.eyebrow { margin: 0 0 8px; color: #167d6c; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.hero h1 { margin: 0; font: 600 clamp(36px, 6vw, 64px)/1 Georgia, serif; }
+.lede { max-width: 720px; margin: 16px 0 0; color: #5e6d68; font-size: 17px; line-height: 1.5; }
+.connection { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; margin: 4px 0 0; padding: 9px 13px; border: 1px solid #d3ddd8; border-radius: 999px; background: #fff; color: #5e6d68; font-size: 13px; font-weight: 700; }
+.connection span { width: 9px; height: 9px; border-radius: 50%; background: #9b6b23; }
+.connection.connected span { background: #2e7d5b; box-shadow: 0 0 0 3px #dcebe5; }
+.summary { display: flex; flex-wrap: wrap; gap: 1px; max-width: 1200px; margin: 28px auto 0; overflow: hidden; border: 1px solid #d3ddd8; border-radius: 8px; background: #d3ddd8; }
+.summary div { display: grid; min-width: 128px; flex: 1 1 128px; gap: 3px; padding: 16px 18px; background: #fff; }
+.summary strong { font: 600 28px/1 Georgia, serif; }
+.summary span { color: #5e6d68; font-size: 12px; }
+.catalog { max-width: 1200px; margin: 18px auto 0; overflow: hidden; border: 1px solid #d3ddd8; border-radius: 8px; background: #fff; }
+.catalog-heading { display: flex; gap: 24px; align-items: end; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid #d3ddd8; }
+.catalog-heading h2 { margin: 0; font-size: 20px; }
+.catalog-heading p { margin: 6px 0 0; color: #5e6d68; font-size: 13px; }
+.search { display: grid; min-width: min(340px, 100%); gap: 6px; color: #5e6d68; font-size: 12px; font-weight: 700; }
+.search input { width: 100%; padding: 10px 12px; border: 1px solid #b9c7c0; border-radius: 6px; color: #173c36; background: #fff; font: inherit; font-size: 14px; font-weight: 400; }
+.search input:focus { outline: 3px solid #b8ddd5; outline-offset: 1px; border-color: #167d6c; }
+.table-scroll { overflow-x: auto; }
+.catalog table { width: 100%; border-collapse: collapse; text-align: left; }
+.catalog th, .catalog td { padding: 13px 24px; border-bottom: 1px solid #e3eae6; }
+.catalog thead th { color: #5e6d68; background: #f8faf9; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
+.catalog tbody th { font-weight: 600; }
+.catalog tbody td { color: #5e6d68; }
+.catalog tbody tr:last-child th, .catalog tbody tr:last-child td { border-bottom: 0; }
+.type { display: inline-block; padding: 4px 8px; border-radius: 999px; color: #126858; background: #e5f2ee; font-size: 11px; font-weight: 700; }
+.empty { margin: 0; padding: 32px 24px; color: #5e6d68; }
+@media (max-width: 720px) {
+  .hello-world { padding: 20px; }
+  .hero, .catalog-heading { align-items: stretch; flex-direction: column; }
+  .search { min-width: 0; }
+  .catalog th, .catalog td { padding: 12px 16px; }
+}

package/templates/hello-world/source/reportApplication.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState, type ReactElement } from "react";
+import type { ReportApplicationProps } from "./reportRuntime";
+
+interface CatalogRow {
+  type: string;
+  parent: string;
+  entity: string;
+}
+
+const TYPE_ORDER = ["Model", "Table", "Column", "Measure", "Hierarchy", "Hierarchy level", "Relationship", "Parameter"];
+const TYPE_PLURALS: Record<string, string> = { Hierarchy: "Hierarchies", "Hierarchy level": "Hierarchy levels" };
+
+export function ReportApplication({ model, onVisibleDatasetsChange }: ReportApplicationProps): ReactElement {
+  const [query, setQuery] = useState("");
+  useEffect(() => onVisibleDatasetsChange?.(["model-catalog"]), [onVisibleDatasetsChange]);
+
+  const dataset = model.datasets["model-catalog"];
+  const rows = useMemo<CatalogRow[]>(() => (dataset?.points ?? [])
+    .map((point) => ({
+      type: point.dimensions[0]?.label ?? "Entity",
+      parent: point.dimensions[1]?.label ?? "",
+      entity: point.dimensions[2]?.label ?? point.label,
+    }))
+    .sort((left, right) => (TYPE_ORDER.indexOf(left.type) - TYPE_ORDER.indexOf(right.type))
+      || left.parent.localeCompare(right.parent)
+      || left.entity.localeCompare(right.entity)), [dataset]);
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleRows = normalizedQuery
+    ? rows.filter((row) => [row.type, row.parent, row.entity].some((value) => value.toLowerCase().includes(normalizedQuery)))
+    : rows;
+  const counts = rows.reduce<Record<string, number>>((result, row) => {
+    result[row.type] = (result[row.type] ?? 0) + 1;
+    return result;
+  }, {});
+  const countTypes = [...TYPE_ORDER.filter((type) => counts[type] !== undefined), ...Object.keys(counts).filter((type) => !TYPE_ORDER.includes(type)).sort()];
+  const connected = rows.length > 0;
+
+  return <main className="hello-world">
+    <header className="hero">
+      <div>
+        <p className="eyebrow">Super Visual / connectivity proof</p>
+        <h1>Hello, semantic model.</h1>
+        <p className="lede">This searchable catalog arrived through the same governed semantic provider used by every Super Visual application.</p>
+      </div>
+      <p className={connected ? "connection connected" : "connection waiting"} role="status">
+        <span aria-hidden="true" />
+        {connected ? "Connected · " + rows.length + " entities" : "Waiting for semantic data…"}
+      </p>
+    </header>
+
+    <section className="summary" aria-label="Semantic model summary">
+      {countTypes.map((type) => <div key={type}><strong>{counts[type]}</strong><span>{counts[type] === 1 ? type : TYPE_PLURALS[type] ?? `${type}s`}</span></div>)}
+    </section>
+
+    <section className="catalog" aria-labelledby="catalog-title">
+      <div className="catalog-heading">
+        <div><h2 id="catalog-title">Semantic model entities</h2><p>Tables, columns, measures, hierarchies, relationships, and parameters declared by the model.</p></div>
+        <label className="search"><span>Search entities</span><input type="search" value={query} onChange={(event) => setQuery(event.currentTarget.value)} placeholder="Search type, parent, or name" /></label>
+      </div>
+      {!connected ? <p className="empty">The page will populate when the selected semantic model returns its first rows.</p>
+        : visibleRows.length === 0 ? <p className="empty">No semantic entities match “{query}”.</p>
+        : <div className="table-scroll"><table>
+          <thead><tr><th scope="col">Type</th><th scope="col">Parent</th><th scope="col">Entity</th></tr></thead>
+          <tbody>{visibleRows.map((row) => <tr key={[row.type, row.parent, row.entity].join("\u0000")}><td><span className="type">{row.type}</span></td><td>{row.parent || "—"}</td><th scope="row">{row.entity}</th></tr>)}</tbody>
+        </table></div>}
+    </section>
+  </main>;
+}

package/templates/hello-world/supervisual.yaml

@@ -0,0 +1,24 @@
+contractVersion: 1
+application:
+  id: {{PROJECT_ID}}
+  title: {{PROJECT_TITLE}}
+  entry: contracts/report-source.json
+  style: contracts/report-source.json
+target:
+  platform: powerbi
+  visual:
+    name: {{VISUAL_NAME}}
+    displayName: {{PROJECT_TITLE}}
+    guid: {{VISUAL_GUID}}
+    version: 1.0.0.1
+    apiVersion: 5.11.1
+semantic:
+  model: contracts/semantic-model.yaml
+  broker: contracts/widget-broker.json
+  pageSet: contracts/page-set.yaml
+source:
+  bundle: contracts/report-source.json
+output:
+  directory: dist
+compliance:
+  policies: [core, powerbi]

package/templates/semantic-preview/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Super Visual semantic preview</title>
+  </head>
+  <body>
+    <aside id="supervisual-preview-status" role="status">Connecting to semantic model…</aside>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>