@api-client/ui 0.6.8 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -195,6 +195,7 @@
   "dependencies": {
     "@adonisjs/transmit-client": "^1.0.0",
     "@api-client/core": "^0.18.0",
+    "@api-client/domain-templates": "^0.1.2",
     "@api-client/graph": "^0.3.6",
     "@api-client/json": "^0.2.0",
     "@codemirror/autocomplete": "^6.18.6",

package/src/md/button/internals/group.styles.ts

@@ -4,6 +4,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: flex;
+    flex-wrap: wrap;
 
     --_gap: 8px;
     --_xs-radius: 16px;

package/src/modeling/dialogs/CountryTaxonomy.ts

@@ -0,0 +1,176 @@
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'
+import { type CountryConfig, DEFAULT_COUNTRY_CONFIG } from '@api-client/core/modeling/definitions/Country.js'
+import { bound } from '../../decorators/bound.js'
+import { html, TemplateResult } from 'lit'
+import { SemanticType } from '@api-client/core/modeling/Semantics.js'
+import { renderHelp } from '../../help/render.js'
+import { TaxonomyDialog } from './TaxonomyDialog.js'
+
+import '../../md/chip/ui-chip-set.js'
+import '../../md/chip/ui-chip.js'
+
+/**
+ * A class that generates a dialog that allows the user to configure the taxonomy of a Country annotated association.
+ */
+export class CountryTaxonomy extends TaxonomyDialog<CountryConfig> {
+  static override title = `Configure Country Taxonomy`
+
+  constructor(public domainElement: DomainProperty) {
+    let config: CountryConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Country)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config)
+    } else {
+      config = {}
+    }
+    super(config)
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.Country)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.Country,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  protected handleAllowedCountriesChange(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const value = input.value.trim()
+    if (value) {
+      const countries = this.config?.allowedCountries ?? DEFAULT_COUNTRY_CONFIG.allowedCountries ?? []
+      if (!countries.includes(value)) {
+        countries.push(value)
+        this.config = { ...this.config, allowedCountries: countries }
+        this.requestUpdate()
+      }
+      input.value = ''
+    }
+  }
+
+  protected handleRemoveAllowedCountry(event: Event): void {
+    const chip = event.currentTarget as HTMLElement
+    const index = parseInt(chip.dataset.index || '-1', 10)
+    if (index >= 0 && this.config?.allowedCountries) {
+      this.config.allowedCountries.splice(index, 1)
+      this.requestUpdate()
+    }
+  }
+
+  protected handleDisallowedCountriesChange(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const value = input.value.trim()
+    if (value) {
+      const countries = this.config?.disallowedCountries ?? DEFAULT_COUNTRY_CONFIG.disallowedCountries ?? []
+      if (!countries.includes(value)) {
+        countries.push(value)
+        this.config = { ...this.config, disallowedCountries: countries }
+        this.requestUpdate()
+      }
+      input.value = ''
+    }
+  }
+
+  protected handleRemoveDisallowedCountry(event: Event): void {
+    const chip = event.currentTarget as HTMLElement
+    const index = parseInt(chip.dataset.index || '-1', 10)
+    if (index >= 0 && this.config?.disallowedCountries) {
+      this.config.disallowedCountries.splice(index, 1)
+      this.requestUpdate()
+    }
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="input-group">
+        ${this.renderFormatSelect()} ${this.renderAllowedCountries()} ${this.renderDisallowedCountries()}
+      </div>
+    `
+  }
+
+  protected renderFormatSelect(): TemplateResult {
+    const value = this.config?.format ?? DEFAULT_COUNTRY_CONFIG.format
+    return html`
+      <div class="row">
+        <ui-select
+          label="Country format"
+          class="input"
+          name="format"
+          .value="${value as string}"
+          @change="${this.handleSelectChange}"
+        >
+          <ui-option value="ISO_3166_Alpha_2">
+            <div>ISO 3166 Alpha-2 (Recommended)</div>
+            <div slot="supporting-text">Store as ISO 3166 Alpha-2 (e.g., US)</div>
+          </ui-option>
+          <ui-option value="ISO_3166_Alpha_3">
+            <div>ISO 3166 Alpha-3</div>
+            <div slot="supporting-text">Store as ISO 3166 Alpha-3 (e.g., USA)</div>
+          </ui-option>
+          <ui-option value="Name">
+            <div>Name</div>
+            <div slot="supporting-text">Store as country name (e.g., United States)</div>
+          </ui-option>
+        </ui-select>
+        ${renderHelp('taxonomy', 'country:format')}
+      </div>
+    `
+  }
+
+  protected renderAllowedCountries(): TemplateResult {
+    const value = this.config?.allowedCountries ?? DEFAULT_COUNTRY_CONFIG.allowedCountries
+    const chips = (value || []).map(
+      (country, index) =>
+        html`<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveAllowedCountry}"
+          >${country}</ui-chip
+        >`
+    )
+    return html`
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="allowedCountries"
+            label="Allowed Countries"
+            @change="${this.handleAllowedCountriesChange}"
+            supportingText="Add a country and press Enter to add it to the list. Use the selected format."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'country:allowedCountries')}
+      </div>
+    `
+  }
+
+  protected renderDisallowedCountries(): TemplateResult {
+    const value = this.config?.disallowedCountries ?? DEFAULT_COUNTRY_CONFIG.disallowedCountries
+    const chips = (value || []).map(
+      (country, index) =>
+        html`<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveDisallowedCountry}"
+          >${country}</ui-chip
+        >`
+    )
+    return html`
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="disallowedCountries"
+            label="Disallowed Countries"
+            @change="${this.handleDisallowedCountriesChange}"
+            supportingText="Add a country and press Enter to add it to the list. Use the selected format."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'country:disallowedCountries')}
+      </div>
+    `
+  }
+}

package/src/modeling/dialogs/PostalCodeTaxonomy.ts

@@ -0,0 +1,169 @@
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'
+import { type PostalCodeConfig, DEFAULT_POSTAL_CODE_CONFIG } from '@api-client/core/modeling/definitions/PostalCode.js'
+import { bound } from '../../decorators/bound.js'
+import { html, TemplateResult } from 'lit'
+import { SemanticType } from '@api-client/core/modeling/Semantics.js'
+import { renderHelp } from '../../help/render.js'
+import { TaxonomyDialog } from './TaxonomyDialog.js'
+
+import '../../md/chip/ui-chip-set.js'
+import '../../md/chip/ui-chip.js'
+
+/**
+ * A class that generates a dialog that allows the user to configure the taxonomy of a PostalCode annotated association.
+ */
+export class PostalCodeTaxonomy extends TaxonomyDialog<PostalCodeConfig> {
+  static override title = `Configure Postal Code Taxonomy`
+
+  constructor(public domainElement: DomainProperty) {
+    let config: PostalCodeConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.PostalCode)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config)
+    } else {
+      config = {}
+    }
+    super(config)
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.PostalCode)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.PostalCode,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  protected handleAllowedPostalCodesChange(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const value = input.value.trim()
+    if (value) {
+      const postalCodes = this.config?.allowedPostalCodes ?? DEFAULT_POSTAL_CODE_CONFIG.allowedPostalCodes ?? []
+      if (!postalCodes.includes(value)) {
+        postalCodes.push(value)
+        this.config = { ...this.config, allowedPostalCodes: postalCodes }
+        this.requestUpdate()
+      }
+      input.value = ''
+    }
+  }
+
+  protected handleRemovePostalCode(event: Event): void {
+    const chip = event.currentTarget as HTMLElement
+    const index = parseInt(chip.dataset.index || '-1', 10)
+    if (index >= 0 && this.config?.allowedPostalCodes) {
+      this.config.allowedPostalCodes.splice(index, 1)
+      this.requestUpdate()
+    }
+  }
+
+  protected handleDisallowedPostalCodesChange(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const value = input.value.trim()
+    if (value) {
+      const postalCodes = this.config?.disallowedPostalCodes ?? DEFAULT_POSTAL_CODE_CONFIG.disallowedPostalCodes ?? []
+      if (!postalCodes.includes(value)) {
+        postalCodes.push(value)
+        this.config = { ...this.config, disallowedPostalCodes: postalCodes }
+        this.requestUpdate()
+      }
+      input.value = ''
+    }
+  }
+
+  protected handleRemoveDisallowedPostalCode(event: Event): void {
+    const chip = event.currentTarget as HTMLElement
+    const index = parseInt(chip.dataset.index || '-1', 10)
+    if (index >= 0 && this.config?.disallowedPostalCodes) {
+      this.config.disallowedPostalCodes.splice(index, 1)
+      this.requestUpdate()
+    }
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="checkbox-group">${this.renderValidate()}</div>
+      <div class="input-group">${this.renderAllowedPostalCodes()} ${this.renderDisallowedPostalCodes()}</div>
+    `
+  }
+
+  protected renderValidate(): TemplateResult {
+    const enabled = this.config?.validate ?? DEFAULT_POSTAL_CODE_CONFIG.validate
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="validate"
+            .checked="${enabled}"
+            name="validate"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="validate" class="body-medium">Validate</label>
+            <span class="body-small meta"
+              >Enable strict validation of the postal code. This is an experimental feature.</span
+            >
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'postalCode:validate')}
+      </div>
+    `
+  }
+
+  protected renderAllowedPostalCodes(): TemplateResult {
+    const value = this.config?.allowedPostalCodes ?? DEFAULT_POSTAL_CODE_CONFIG.allowedPostalCodes
+    const chips = (value || []).map(
+      (postalCode, index) =>
+        html`<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemovePostalCode}"
+          >${postalCode}</ui-chip
+        >`
+    )
+    return html`
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="allowedPostalCodes"
+            label="Allowed Postal Codes"
+            @change="${this.handleAllowedPostalCodesChange}"
+            supportingText="Add a postal code and press Enter to add it to the list."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'postalCode:allowedPostalCodes')}
+      </div>
+    `
+  }
+
+  protected renderDisallowedPostalCodes(): TemplateResult {
+    const value = this.config?.disallowedPostalCodes ?? DEFAULT_POSTAL_CODE_CONFIG.disallowedPostalCodes
+    const chips = (value || []).map(
+      (postalCode, index) =>
+        html`<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveDisallowedPostalCode}"
+          >${postalCode}</ui-chip
+        >`
+    )
+    return html`
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="disallowedPostalCodes"
+            label="Disallowed Postal Codes"
+            @change="${this.handleDisallowedPostalCodesChange}"
+            supportingText="Add a postal code and press Enter to add it to the list."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'postalCode:disallowedPostalCodes')}
+      </div>
+    `
+  }
+}

package/src/modeling/domain-template-browser.ts

@@ -1,6 +1,7 @@
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/DomainTemplateBrowser.js'
 import styles from './internals/styles/DomainTemplateBrowser.styles.js'
+import typography from '../styles/m3/typography.module.js'
 
 import '../md/button/ui-button.js'
 import '../md/button/ui-button-group.js'
@@ -9,7 +10,7 @@ import '../md/text-field/ui-outlined-text-field.js'
 
 @customElement('domain-template-browser')
 export class DomainTemplateBrowserElement extends Element {
-  static override styles = [styles]
+  static override styles = [styles, typography]
 }
 
 declare global {

package/src/modeling/internals/DomainAutoFieldsDialog.ts

@@ -86,6 +86,36 @@ export default class DomainAutoFieldsDialog extends LitElement {
         },
       ],
     },
+    {
+      name: 'Contact & Address',
+      fields: [
+        {
+          id: 'street-address',
+          name: 'Street Address',
+          description: 'The street address.',
+        },
+        {
+          id: 'city',
+          name: 'City',
+          description: 'The city.',
+        },
+        {
+          id: 'region',
+          name: 'Region',
+          description: 'The region/state/province.',
+        },
+        {
+          id: 'postal-code',
+          name: 'Postal/Zip Code',
+          description: 'The international postal/zip code.',
+        },
+        {
+          id: 'country',
+          name: 'Country',
+          description: 'The country.',
+        },
+      ],
+    },
     {
       name: 'Lifecycle & Status',
       fields: [

package/src/modeling/internals/DomainPropertyEditor.ts

@@ -30,6 +30,8 @@ import { UrlTaxonomy } from '../dialogs/UrlTaxonomy.js'
 import { PublicUniqueNameTaxonomy } from '../dialogs/PublicUniqueNameTaxonomy.js'
 import { GeospatialCoordinatesTaxonomy } from '../dialogs/GeospatialCoordinatesTaxonomy.js'
 import { CalculatedTaxonomy } from '../dialogs/CalculatedTaxonomy.js'
+import { PostalCodeTaxonomy } from '../dialogs/PostalCodeTaxonomy.js'
+import { CountryTaxonomy } from '../dialogs/CountryTaxonomy.js'
 import type { UiSelectElement } from '../../md/select/ui-select.js'
 
 /**
@@ -658,6 +660,10 @@ export default class DomainPropertyEditor extends ModelingElement {
       dialog = new GeospatialCoordinatesTaxonomy(element)
     } else if (id === SemanticType.Calculated) {
       dialog = new CalculatedTaxonomy(element)
+    } else if (id === SemanticType.PostalCode) {
+      dialog = new PostalCodeTaxonomy(element)
+    } else if (id === SemanticType.Country) {
+      dialog = new CountryTaxonomy(element)
     } else {
       throw new TypeError(`Unsupported taxonomy type: ${id}.`)
     }

package/src/modeling/internals/DomainTemplateBrowser.ts

@@ -1,22 +1,50 @@
+/* eslint-disable max-len */
 import { html, type TemplateResult, LitElement } from 'lit'
 import { state, property } from 'lit/decorators.js'
-import {
-  TEMPLATE_METADATA_REGISTRY,
-  TEMPLATE_CATEGORIES,
-  searchTemplates,
-  getTemplatesByCategory,
-} from '@api-client/core/modeling/templates/meta/index.js'
+import type { IconType } from '../../md/icons/Icons.js'
+// Template metadata imports
+import ecommercePlatformMetadata from '@api-client/domain-templates/meta/ecommerce-platform.json' with { type: 'json' }
+import blogPublishingPlatformMetadata from '@api-client/domain-templates/meta/blog-publishing-platform.json' with { type: 'json' }
+import healthcareManagementPlatformMetadata from '@api-client/domain-templates/meta/healthcare-management-platform.json' with { type: 'json' }
+import financialServicesPlatformMetadata from '@api-client/domain-templates/meta/financial-services-platform.json' with { type: 'json' }
+import educationManagementPlatformMetadata from '@api-client/domain-templates/meta/education-management-platform.json' with { type: 'json' }
+import realEstateManagementPlatformMetadata from '@api-client/domain-templates/meta/real-estate-management-platform.json' with { type: 'json' }
+import manufacturingPlatformMetadata from '@api-client/domain-templates/meta/manufacturing-platform.json' with { type: 'json' }
+import hospitalityPlatformMetadata from '@api-client/domain-templates/meta/hospitality-platform.json' with { type: 'json' }
+import legalServicesPlatformMetadata from '@api-client/domain-templates/meta/legal-services-platform.json' with { type: 'json' }
+import nonProfitPlatformMetadata from '@api-client/domain-templates/meta/non-profit-platform.json' with { type: 'json' }
+import iotSmartHomePlatformMetadata from '@api-client/domain-templates/meta/iot-smart-home-platform.json' with { type: 'json' }
+import gamingPlatformMetadata from '@api-client/domain-templates/meta/gaming-platform.json' with { type: 'json' }
+import { templatesByVertical } from '@api-client/domain-templates'
 import type {
   AssociationInfo,
   DomainTemplate,
+  DomainTemplateMetadata,
   EntityInfo,
   ModelInfo,
   NamespaceInfo,
   PropertyInfo,
-} from '@api-client/core/modeling/templates/types.js'
-import type { IconType } from '../../md/icons/Icons.js'
+} from '@api-client/domain-templates/types.js'
 
-export const availableCategories = Object.keys(TEMPLATE_CATEGORIES) as (keyof typeof TEMPLATE_CATEGORIES)[]
+/**
+ * Registry of all available template metadata
+ */
+export const TEMPLATE_METADATA_REGISTRY: Record<string, DomainTemplate> = {
+  'ecommerce-platform': ecommercePlatformMetadata as DomainTemplate,
+  'blog-publishing-platform': blogPublishingPlatformMetadata as DomainTemplate,
+  'healthcare-management-platform': healthcareManagementPlatformMetadata as DomainTemplate,
+  'financial-services-platform': financialServicesPlatformMetadata as DomainTemplate,
+  'education-management-platform': educationManagementPlatformMetadata as DomainTemplate,
+  'real-estate-management-platform': realEstateManagementPlatformMetadata as DomainTemplate,
+  'manufacturing-platform': manufacturingPlatformMetadata as DomainTemplate,
+  'hospitality-platform': hospitalityPlatformMetadata as DomainTemplate,
+  'legal-services-platform': legalServicesPlatformMetadata as DomainTemplate,
+  'non-profit-platform': nonProfitPlatformMetadata as DomainTemplate,
+  'iot-smart-home-platform': iotSmartHomePlatformMetadata as DomainTemplate,
+  'gaming-platform': gamingPlatformMetadata as DomainTemplate,
+} as const
+
+export const availableCategories = Object.keys(templatesByVertical) as (keyof typeof templatesByVertical)[]
 
 /**
  * The selection detail object dispatched by the `selectionchange` event.
@@ -54,6 +82,39 @@ export function getPropertyIcon(p: PropertyInfo): IconType {
   }
 }
 
+function searchTemplates(query: string): DomainTemplateMetadata[] {
+  const searchTerm = query.toLowerCase()
+  return Object.values(templatesByVertical)
+    .flat()
+    .filter(
+      (template) =>
+        template.name.toLowerCase().includes(searchTerm) ||
+        template.description.toLowerCase().includes(searchTerm) ||
+        template.tags.some((tag) => tag.toLowerCase().includes(searchTerm))
+    )
+}
+
+function getVerticalName(id: string): string {
+  switch (id) {
+    case 'businessServices':
+      return 'Business Services'
+    case 'educationTraining':
+      return 'Education & Training'
+    case 'healthcareLifeSciences':
+      return 'Healthcare & Life Sciences'
+    case 'manufacturingLogistics':
+      return 'Manufacturing & Logistics'
+    case 'publicSector':
+      return 'Public Sector'
+    case 'realEstateConstruction':
+      return 'Real Estate & Construction'
+    case 'technologyMedia':
+      return 'Technology & Media'
+    default:
+      return id
+  }
+}
+
 /**
  * A browser component for exploring and selecting domain templates.
  * It provides the UI for searching, filtering, previewing, and selecting data domain templates.
@@ -76,13 +137,13 @@ export default class DomainTemplateBrowser extends LitElement {
    * If not set, all categories are included.
    * @attribute
    */
-  @property({ type: String }) accessor category: keyof typeof TEMPLATE_CATEGORIES | undefined
+  @property({ type: String }) accessor category: keyof typeof templatesByVertical | undefined
 
   /**
    * The internal list of filtered templates to render in the UI.
    * This is computed based on `query` and `category`.
    */
-  @state() accessor templates: DomainTemplate[] = [...Object.values(TEMPLATE_METADATA_REGISTRY)]
+  @state() accessor templates: DomainTemplateMetadata[] = [...Object.values(templatesByVertical)].flat()
 
   /**
    * The currently previewed template. When set, the component renders the preview view instead of the list.
@@ -115,7 +176,7 @@ export default class DomainTemplateBrowser extends LitElement {
   search(value?: string): void {
     this.query = value
     if (!value) {
-      this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)]
+      this.templates = [...Object.values(templatesByVertical)].flat()
     } else {
       this.templates = searchTemplates(value)
     }
@@ -130,10 +191,10 @@ export default class DomainTemplateBrowser extends LitElement {
     }
     if (value === '') {
       this.category = undefined
-      this.templates = [...Object.values(TEMPLATE_METADATA_REGISTRY)]
+      this.templates = [...Object.values(templatesByVertical)].flat()
     } else {
-      this.category = value as keyof typeof TEMPLATE_CATEGORIES
-      this.templates = getTemplatesByCategory(this.category)
+      this.category = value as keyof typeof templatesByVertical
+      this.templates = templatesByVertical[this.category].flat()
     }
   }
 
@@ -157,7 +218,11 @@ export default class DomainTemplateBrowser extends LitElement {
     if (!templateId) {
       return
     }
-    this.previewTemplate = this.templates.find((t) => t.id === templateId)
+    const value = TEMPLATE_METADATA_REGISTRY[templateId]
+    if (!value) {
+      return
+    }
+    this.previewTemplate = value
   }
 
   protected handleClosePreview(): void {
@@ -222,7 +287,7 @@ export default class DomainTemplateBrowser extends LitElement {
               ?selected="${isSelected}"
               @click="${this.handleFilterClick}"
             >
-              ${category}
+              ${getVerticalName(category)}
             </ui-button>`
           })}
         </ui-button-group>
@@ -236,13 +301,17 @@ export default class DomainTemplateBrowser extends LitElement {
     `
   }
 
-  protected renderTemplateCard(template: DomainTemplate): TemplateResult {
+  protected renderTemplateCard(template: DomainTemplateMetadata): TemplateResult {
     // Use available properties from DomainTemplate interface
     const templateName = template.name || 'Unnamed Template'
     const templateDescription = template.description || 'No description available'
 
     return html`
       <div class="template-card">
+        <div class="meta">
+          <span class="value body-small" title="Updated at">${new Date(template.updatedAt).toLocaleDateString()}</span>
+          <span class="value body-small" title="Version">v${template.version}</span>
+        </div>
         <h3 class="template-title display-small">${templateName}</h3>
         <p class="template-description body-medium">${templateDescription}</p>
 

package/src/modeling/internals/styles/DomainTemplateBrowser.styles.ts

@@ -71,6 +71,18 @@ export default css`
     color: var(--md-sys-color-on-surface);
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
+
+    .meta {
+      display: flex;
+      gap: 8px;
+
+      .value {
+        color: var(--md-sys-color-on-surface-variant);
+        border: 1px var(--md-sys-color-outline-variant) solid;
+        border-radius: 8px;
+        padding: 0 4px;
+      }
+    }
   }
 
   .template-description {