# Ovenfo DSL v2 — public generation specification

Canonical reference: https://ovenfo.com/docs/dsl/v2/spec.md

This is static UTF-8 documentation. Reading it needs no JavaScript, login or live Builder API.

## Instructions for generation

Use view "Title" [version: "2"] for new compositions. Return complete DSL, not HTML or JavaScript. Block labels in the catalog such as field, table-column and action describe syntax categories, not standalone keywords. The options entry describes a legacy root only. Use fieldName: type for fields and [Label] -> field: "name" for table columns.

Validate generated source in the [interactive playground](https://ovenfo.com/menudsl). Reading this specification does not invoke compilation. An AI response is not proof that the DSL compiles. Media defaults and preview saves do not grant production storage access or persist business records.

## Suggested prompt

Read https://ovenfo.com/docs/dsl/v2/spec.md and generate only Ovenfo DSL v2 for: [describe the desired view]. Use exactly the documented grammar and supported properties. Do not mix legacy roots with version 2. Do not invent HTML, JavaScript, components or server-side actions. If you cannot read the specification, say so before generating.


## Scope and compatibility

New documents opt in with view "Title" [version: "2"]. Existing options, dashboard, list, form, formNav and accordion roots retain their legacy parser and builders. There is no automatic migration of saved source.

DslV2Parser validates an indentation tree and JSON property values. DslV2Compiler renders Bootstrap classes, registered Angular/Ovenfo components and serialized state. The packaged runtime-v2.js supplies local interactions. Arbitrary expressions, scripts, HTML attributes and remote data sources are not DSL capabilities.


## Syntax

Use exactly two spaces per nesting level. Strings use JSON double quotes; numbers and booleans are unquoted. Arrays and objects must be valid inline JSON. Properties may be bare or enclosed together in one bracket pair. Comments begin with # or // on their own line. Identifiers use ASCII letters, digits and underscores and cannot begin with a digit.

    view "Purchase order" [version: "2"]
      row
        column [col: 12 md: 6]
          kpi "Open orders" value: "12" icon: "bi-box"
      actions
        edit: "Edit order" modal: "order"
      modal "order" title: "Order details" size: "xl" scrollable: true fullscreen: "sm-down"
        tabs
          item "Lines"
            form "Contact"
              email: email label: "Email" required: true
            table lines [editable: true data: [{"quantity":2,"product":"Pallet"}]]
              [Product] -> field: "product" type: "typeahead" options: ["Pallet","Container"]
              [Quantity] -> field: "quantity" type: "number" required: true min: 1 max: 100 step: 1
          item "Notes"
            notes: textarea label: "Notes" rows: 4 maxLength: 500
        actions
          save: "Apply changes"
          cancel: "Cancel" close: true

Containers include row/column, card, section, logical form, tabs/item and accordion/item. Forms are grouping sections rather than nested HTML form elements. Modals are declared at the view root and can contain those same containers, tables and charts. Modals and accordions use ng-bootstrap. Table columns are direct children or grouped under columns. Action children belong to actions or buttons.

Table/chart identifiers are globally unique. Fields and tables cannot share a state key within one root/modal scope. Modal IDs are unique and cannot be root. The same field name can appear in separate modal scopes. Duplicate column fields and unresolved modal/detailChart targets produce source-line diagnostics.

## State, editing and validation

- Each modal opens a deep-copied draft. Cancel, Escape and backdrop dismissal discard that draft; save validates and commits it. Rebuilding or destroying the preview closes its active modal.
- Root fields edit root state directly; root cancel restores initial values. These preview operations do not call a business-record persistence API.
- An editable table binds each control to its own row. Missing fields are initialized from column defaults. Add/remove actions update the current scope. An edit column requires action: "edit" plus a modal target; delete/remove are local row actions.
- A table with modal: "id" opens its add form. An edit column opens that modal with the selected row. Successful save inserts or merges the row; cancellation leaves the original unchanged.
- A row editor opened from an existing modal keeps the parent draft and restores its focus on close. Cancelling the parent also discards row changes applied inside that draft.
- Local validation covers required values, email syntax, numeric min/max/step and text lengths. Readonly/disabled controls do not block submission. Validation messages remain visible inside the modal.
- Angular ControlValueAccessor components use standalone ngModel. Paste-table uses its pasted output, cameras use their closed output, and file components use their upload/removal events rather than a nonexistent value accessor.
- Images/attachments retain file metadata; photo/signature fields retain their displayed URL. Storage paths default to a per-control dsl-preview prefix. WEB-ViewGenerator provides local storage and preview attachment registration. Outside that preview, the host must provide authorized storage/services. Cancelling a form draft does not undo storage-provider side effects.

## Bootstrap and charts

Grid sizes col/sm/md/lg/xl/xxl are integers 1–12; colSpan is a medium-breakpoint alias. Gap, padding and margin accept 0–5. Rounded, shadow and hidden are booleans. Alignment and justification accept explicit Bootstrap values. Tables support responsive scrolling, striped/bordered/hover styling and compact size.

Modal sizes are sm, md, lg (default), xl or fullscreen, with centered/scrollable options. Fullscreen can also select sm-down, md-down, lg-down, xl-down or xxl-down.

Charts support bar, line, pie and doughnut, orientation, stacking and JSON labels/datasets. A chart modal receives selection.label, selection.value and selection.datasetLabel for text bindings. Optional details contains one labels/datasets object per selected index; detailChart identifies the chart that displays that drill-down. Chart data uses DashboardChart.data, not an invented flat component contract.

## Catalog and template coverage

The catalog currently packages 13 examples: legacy navigation, list, transactional form, component showcase, executive services/default, CRM, finance, two sales-monitoring palettes, control tower, a large editable modal and commercial portfolio drill-down. These are executable DSL adaptations of the library Storybook templates, not byte-for-byte copies of their HTML or business data.

To extend support: implement parser validation and rendering, register any missing public Ovenfo component in the preview, update catalog metadata/examples, then add Java and browser assertions. Do not advertise a property that the implementation cannot interpret.

## Limits and verification

Documents are limited to 200000 characters, 5000 lines and 48 nesting levels. Inline preview tables allow at most 1000 rows. Unsupported syntax returns valid: false and diagnostics; callers must not save invalid or stale output.


## Supported field types

text, textsearch, search, number, email, password, select, date, datetime, time, boolean, radio, textarea, editor, rich-editor, image, upload, attachment, avatar, user-avatar, camera, photo, photo-take, signature, signature-take, scanner, code-scanner, multi-input, typeahead, multi-typeahead, paste-table, badge, progress, alert, password-input, image-upload, checkbox, switch.

Use JSON arrays for multi-value and media fields; scalar values for ordinary inputs. The guide above explains non-CVA component output behavior.

## Block and property reference

Only use properties documented for the relevant block. Legacy examples retain their own grammar.

### view

Universal v2 root: view "Title" [version: "2"]. Its children compose in document order.

Properties: version, subtitle, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### row

Responsive Bootstrap row containing columns.

Properties: gap, col, sm, md, lg, xl, xxl, colSpan, padding, margin, rounded, shadow, hidden, align, justify, color.

### column

Responsive column containing arbitrary composed blocks.

Properties: col, md, lg, xl, sm, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### card

Titled card grouping composed content.

Properties: color, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify.

### section

Titled content section containing fields or other blocks.

Properties: icon, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### form

Titled group of editable fields with local preview state.

Properties: col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### tabs

Tab navigation containing item children.

Properties: col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### accordion

Collapsible sections containing item children.

Properties: col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### item

Titled child of tabs or accordion.

Properties: icon, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color, collapsed.

### modal

Named overlay definition with isolated editable preview state. Save validates; cancel discards changes.

Properties: title, size, scrollable, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color, centered, fullscreen.

### table

Named data table. Declare [Heading] -> field: "key" columns directly beneath it; editable columns use type and validation properties.

Properties: title, data, editable, responsive, modal, label, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color, striped, bordered, hover, size.

### chart

Named chart with inline labels and datasets. A modal reference opens the declared overlay on point click.

Properties: title, type, orientation, stacked, labels, datasets, modal, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color, detailChart, details.

### kpi

Titled indicator with a precomputed displayed value.

Properties: value, color, icon, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify.

### alert

Static feedback message with a semantic color.

Properties: color, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify.

### text

Static text content; arbitrary HTML and expressions are not supported.

Properties: col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color, field.

### actions

Action toolbar containing named actions: save: "Save", cancel: "Cancel", or edit: "Edit" modal: "details". Root save validates; modal save applies its isolated draft.

Properties: gap, align, justify, hidden, color.

### field

Use name: type followed by properties. Media controls use host components and host configuration; declarations do not provision storage, APIs or permissions.

Properties: label, desc, selected, focus, storagePath, maxPhotos, required, readonly, disabled, min, max, step, minLength, maxLength, placeholder, rows, default, options, col, sm, md, lg, xl, xxl, colSpan, gap, padding, margin, rounded, shadow, hidden, align, justify, color.

### table-column

Direct child syntax: [Quantity] -> field: "quantity" type: "number" min: 1.

Properties: field, type, default, label, placeholder, storagePath, maxPhotos, avatar, required, readonly, disabled, min, max, step, minLength, maxLength, options, badge, modal, action.

### options

Legacy navigation root with [Title] -> link: "/path" icon: "bi-grid" children.

Properties: description, link, icon.

### action

Named child of actions or buttons. Navigation uses local absolute links. Save/submit validates and applies local preview state; cancel/close discards draft edits.

Properties: label, icon, color, modal, link, close, transac.

## Property types and constraints

### version (string)

Use exactly "2" on a view root to opt into composition. Unversioned legacy roots keep their original grammar.

### title (string)

Visible title of a table, chart or modal.

### col (integer)

Bootstrap grid span from 1 to 12.

### md (integer)

Grid span from 1 to 12 at the medium breakpoint.

### lg (integer)

Grid span from 1 to 12 at the large breakpoint.

### xl (integer)

Grid span from 1 to 12 at the extra-large breakpoint.

### gap (integer)

Bootstrap row gutter spacing from 0 to 5.

### color (string)

Bootstrap semantic color: primary, secondary, success, danger, warning, info, light or dark.

### icon (string)

Bootstrap icon class, for example bi-save.

### value (string)

Displayed KPI value; write precomputed presentation text.

### label (string)

Visible field or action label.

### type (string)

Chart type: bar, line, pie or doughnut. Table-column type selects an editable control; use a supported field type.

### orientation (string)

Bar orientation: horizontal or vertical.

### stacked (boolean)

Stacks bar-chart datasets.

### labels (array<string>)

Inline JSON chart labels.

### datasets (array<object>)

Inline JSON chart datasets with label, numeric data, backgroundColor and/or borderColor. Dataset values align with labels.

### data (array<object>)

Inline JSON table rows. Object keys match column field names.

### modal (string)

ID of a declared modal opened by an action, table add action or chart point click.

### size (string)

Modal size: sm, md, lg (default), xl or fullscreen. Table size: sm for compact cells.

### scrollable (boolean)

Allows a modal body to scroll while its header stays visible. Actions inside the body scroll with it.

### editable (boolean)

Enables local editing of table cells using column type and validation properties.

### responsive (boolean)

Wraps the table for horizontal scrolling on narrow screens.

### field (string)

Table row field identifier; on text blocks only selection.label, selection.value or selection.datasetLabel.

### required (boolean)

Requires a control value before a local save succeeds.

### readonly (boolean)

Renders a control without allowing edits.

### disabled (boolean)

Disables a control.

### min (number)

Minimum numeric input value.

### max (number)

Maximum numeric input value.

### step (number)

Positive increment for a numeric input.

### minLength (integer)

Minimum text length.

### maxLength (integer)

Maximum text length.

### placeholder (string)

Hint displayed by an empty text control.

### rows (integer)

Visible textarea row count.

### default (scalar|array)

Initial field value: a JSON scalar, or an array for multi-value/media controls.

### options (array<string>)

Literal choices for select, typeahead and multi-typeahead controls.

### badge (boolean)

Displays a read-only table cell as a badge.

### link (string)

Navigation destination. V2 actions require a local absolute path, such as /orders.

### description (string)

Legacy options subtitle. Also used as example metadata, not as arbitrary runtime behavior.

### sm (integer)

Bootstrap column width at the small breakpoint (1–12).

### xxl (integer)

Bootstrap column width at the extra-extra-large breakpoint (1–12).

### colSpan (integer)

Legacy-compatible medium breakpoint column width (1–12).

### padding (integer)

Bootstrap padding utility (0–5).

### margin (integer)

Bootstrap margin utility (0–5).

### shadow (boolean)

Enable a Bootstrap shadow.

### rounded (boolean)

Enable rounded corners.

### hidden (boolean)

Hide the block.

### align (string)

Cross-axis alignment: start, center, end or stretch.

### justify (string)

Main-axis alignment: start, center, end, between, around or evenly.

### centered (boolean)

Center a modal vertically (default true).

### fullscreen (string)

Responsive modal fullscreen breakpoint: sm-down through xxl-down.

### striped (boolean)

Striped table rows.

### bordered (boolean)

Table cell borders.

### hover (boolean)

Table row hover styling.

### detailChart (string)

Declared chart key receiving the selected element's drill-down data.

### details (array<object>)

Per-element chart data objects, each with labels and datasets.

### action (string)

Table action: remove, delete or edit (edit also requires modal).

### close (boolean)

Cancel and close the modal draft.

### transac (boolean)

Validate and apply preview changes.

### collapsed (boolean)

Start an accordion item collapsed.

### subtitle (string)

Supporting text below the view title.

### desc (string)

Field help text or KPI supporting text.

### selected (scalar|array)

Initial field value alias; default takes precedence.

### focus (boolean)

Initial autofocus hint for native text inputs.

### storagePath (string)

Media storage key prefix. Defaults to dsl-preview/control-id/; the host supplies storage and preview services.

### maxPhotos (integer)

Positive image-upload or camera item limit.

### avatar (boolean)

Render a readonly table cell as an Ovenfo name avatar.

## Complete version 2 examples

### User directory

ID: list-view. DSL v2.

Equivalent of list-view.stories.ts Default: filter form, responsive user table and filter modal with realistic local records. Filters are editable preview controls; no server search or pagination is implied.

```dsl
view "User directory" [version: "2"]
  form "Search users"
    row
      column [col: 12 md: 6]
        username: text label: "Username" placeholder: "Search username"
      column [col: 12 md: 6]
        fullName: text label: "Name and surnames" placeholder: "Search name"
    actions
      filters: "Advanced filters" icon: "bi-funnel" modal: "userFilters"
  table users [title: "Users" responsive: true data: [{"userId":1,"username":"admin.user","fullName":"Oscar Huertas Vargas","status":"Active","admin":"Yes","passwordDueDate":"2026-12-31"},{"userId":2,"username":"maria.garcia","fullName":"Maria Garcia Lopez","status":"Active","admin":"No","passwordDueDate":"2026-10-15"},{"userId":3,"username":"carlos.lopez","fullName":"Carlos Lopez","status":"Inactive","admin":"No","passwordDueDate":"2026-05-20"}]]
    [ID] -> field: "userId" type: "number"
    [Username] -> field: "username"
    [Full name] -> field: "fullName"
    [Status] -> field: "status" badge: true
    [Administrator] -> field: "admin"
    [Password expiry] -> field: "passwordDueDate" type: "date"
  modal "userFilters" title: "Advanced filters" size: "lg" scrollable: true
    form "Filter criteria"
      status: select label: "Status" options: ["All", "Active", "Inactive"] default: "All"
      administrator: select label: "Administrator" options: ["All", "Yes", "No"] default: "All"
      registrationFrom: date label: "Registration date from"
      passwordExpiryFrom: date label: "Password expiry from"
      passwordExpiryTo: date label: "Password expiry to"
    actions
      save: "Apply criteria" color: "primary"
      cancel: "Cancel" color: "secondary"
```


### User registration

ID: transactional-view. DSL v2.

Equivalent of transactional-view.stories.ts Default: two-column user identity and account sections with required controls and save/cancel preview actions.

```dsl
view "New user" [version: "2"]
  card "User registration"
    form "User details"
      row
        column [col: 12 md: 6]
          username: text label: "Username" required: true maxLength: 100 default: "oscar.huertas"
          firstName: text label: "First name" required: true maxLength: 100 default: "Oscar"
          maternalLastName: text label: "Maternal surname" maxLength: 100 default: "Vargas"
        column [col: 12 md: 6]
          password: password label: "Password" required: true minLength: 8 placeholder: "At least eight characters"
          paternalLastName: text label: "Paternal surname" required: true maxLength: 100 default: "Huertas"
      section "Account status and permissions"
        status: select label: "Status" required: true options: ["Active", "Inactive", "Suspended"] default: "Active"
        passwordDueDate: date label: "Password expiry date" required: true default: "2026-12-31"
        flagAdmin: boolean label: "Administrator" default: true
    actions
      save: "Save" icon: "bi-save" color: "primary"
      cancel: "Cancel" icon: "bi-x-circle" color: "secondary"
```


### UI style guide

ID: ui-showcase. DSL v2.

Equivalent of ui-showcase.stories.ts Default: supported button colors, cards, badges, progress and alerts; arbitrary CSS and hover effects from the story are not DSL capabilities.

```dsl
view "Bootstrap and UI style guide" [version: "2"]
  tabs
    item "Buttons and feedback"
      card "Button palette"
        actions
          primary: "Primary" color: "primary"
          secondary: "Secondary" color: "secondary"
          success: "Success" color: "success"
          danger: "Danger" color: "danger"
          warning: "Warning" color: "warning"
          info: "Information" color: "info"
      section "Alerts and notifications"
        alert "Settings saved successfully." color: "success"
        alert "Review the pending changes before saving." color: "warning"
        alert "A required field is missing." color: "danger"
        alert "Preview data is stored locally." color: "info"
    item "Cards and indicators"
      row
        column [col: 12 md: 4]
          kpi "Active users" value: "1,248" color: "primary"
        column [col: 12 md: 4]
          kpi "Monthly revenue" value: "$24,500" color: "success"
        column [col: 12 md: 4]
          kpi "Pending tasks" value: "18" color: "warning"
      card "Enterprise layout system"
        text "Responsive cards and semantic colors use the host Bootstrap theme."
        status: badge label: "Status" default: "Active"
        completion: progress label: "Completion" default: 75
      accordion
        item "Component guidance"
          text "Use cards for grouped content, alerts for feedback and actions for preview interactions."
```


### Executive summary - service operations

ID: executive-services. DSL v2.

Equivalent of executive-summary.stories.ts Example1_ServiceOperations: service actions, three KPIs and four charts with the original story values.

```dsl
view "Executive summary - service operations" [version: "2"]
  text "Platform indicators and service activity"
  actions
    configure: "Configure service" modal: "serviceConfiguration" icon: "bi-gear"
    studyPlan: "Study plan" modal: "studyPlan" icon: "bi-book"
  row
    column [col: 12 md: 4]
      kpi "Total appointments" value: "40"
    column [col: 12 md: 4]
      kpi "Total DTUs" value: "200"
    column [col: 12 md: 4]
      kpi "Total reschedules" value: "25"
  row
    column [col: 12 md: 6]
      chart appointments [title: "Appointments against target" type: "bar" labels: ["January","February","March","April"] datasets: [{"label":"Actual","data":[75,82,83,90],"backgroundColor":"#2563eb"},{"label":"Target","data":[60,70,72,85],"backgroundColor":"#94a3b8"}]]
      chart channels [title: "Service channels" type: "pie" labels: ["Online","In-person","Reschedules"] datasets: [{"label":"Distribution","data":[55,30,15],"backgroundColor":["#2563eb","#94a3b8","#f59e0b"]}]]
    column [col: 12 md: 6]
      chart trend [title: "Service trend" type: "line" labels: ["January","February","March","April","May"] datasets: [{"label":"Actual","data":[30,55,48,80,72],"borderColor":"#2563eb"},{"label":"Target","data":[40,50,60,70,85],"borderColor":"#94a3b8"}]]
      chart progress [title: "Appointment status" type: "doughnut" labels: ["Completed","In progress","Pending"] datasets: [{"label":"Status","data":[60,25,15],"backgroundColor":["#16a34a","#2563eb","#94a3b8"]}]]
  modal "serviceConfiguration" title: "Configure service" size: "lg"
    form "Service configuration"
      serviceName: text label: "Service name" required: true default: "Customer appointments"
      dailyCapacity: number label: "Daily capacity" min: 1 default: 40
    actions
      save: "Save settings"
      cancel: "Cancel"
  modal "studyPlan" title: "Study plan" size: "lg"
    text "Service onboarding: scheduling, rescheduling and customer follow-up."
    actions
      cancel: "Close"
```


### Executive summary - default

ID: executive-services-default. DSL v2.

Equivalent of executive-summary.stories.ts Default, which aliases Example1_ServiceOperations in the source story.

```dsl
view "Executive summary - service operations" [version: "2"]
  text "Platform indicators and service activity"
  actions
    configure: "Configure service" modal: "serviceConfiguration" icon: "bi-gear"
    studyPlan: "Study plan" modal: "studyPlan" icon: "bi-book"
  row
    column [col: 12 md: 4]
      kpi "Total appointments" value: "40"
    column [col: 12 md: 4]
      kpi "Total DTUs" value: "200"
    column [col: 12 md: 4]
      kpi "Total reschedules" value: "25"
  row
    column [col: 12 md: 6]
      chart appointments [title: "Appointments against target" type: "bar" labels: ["January","February","March","April"] datasets: [{"label":"Actual","data":[75,82,83,90],"backgroundColor":"#2563eb"},{"label":"Target","data":[60,70,72,85],"backgroundColor":"#94a3b8"}]]
      chart channels [title: "Service channels" type: "pie" labels: ["Online","In-person","Reschedules"] datasets: [{"label":"Distribution","data":[55,30,15],"backgroundColor":["#2563eb","#94a3b8","#f59e0b"]}]]
    column [col: 12 md: 6]
      chart trend [title: "Service trend" type: "line" labels: ["January","February","March","April","May"] datasets: [{"label":"Actual","data":[30,55,48,80,72],"borderColor":"#2563eb"},{"label":"Target","data":[40,50,60,70,85],"borderColor":"#94a3b8"}]]
      chart progress [title: "Appointment status" type: "doughnut" labels: ["Completed","In progress","Pending"] datasets: [{"label":"Status","data":[60,25,15],"backgroundColor":["#16a34a","#2563eb","#94a3b8"]}]]
  modal "serviceConfiguration" title: "Configure service" size: "lg"
    form "Service configuration"
      serviceName: text label: "Service name" required: true default: "Customer appointments"
      dailyCapacity: number label: "Daily capacity" min: 1 default: 40
    actions
      save: "Save settings"
      cancel: "Cancel"
  modal "studyPlan" title: "Study plan" size: "lg"
    text "Service onboarding: scheduling, rescheduling and customer follow-up."
    actions
      cancel: "Close"
```


### Executive summary - CRM

ID: executive-crm. DSL v2.

Equivalent of executive-summary-example-2.stories.ts Example2_CRM: 7/5 split operational and financial panels, SLA pie, horizontal billing and grouped volume/year charts. Values follow the story.

```dsl
view "Executive summary - CRM and help desk" [version: "2"]
  text "Current reporting period - local demonstration data"
  row
    column [col: 12 xl: 7]
      card "Help desk - today"
        row
          column [col: 12 md: 6]
            kpi "Requests received" value: "40 / 76" color: "primary"
            text "52.6% completed; 36 remaining."
          column [col: 12 md: 6]
            kpi "Cases closed" value: "32 / 48" color: "secondary"
            text "66.7% completed; 16 remaining."
    column [col: 12 xl: 5]
      card "Monthly financial performance"
        kpi "Monthly billing" value: "MXN 1,186,424"
        row
          column [col: 7]
            kpi "Pending collection" value: "MXN 260,005"
          column [col: 5]
            kpi "Overdue portfolio" value: "3%" color: "danger"
  row
    column [col: 12 lg: 6]
      chart distribution [title: "Ticket resolution within SLA" type: "pie" labels: ["Within SLA","Outside SLA"] datasets: [{"label":"Share","data":[85,15],"backgroundColor":["#2563eb","#94a3b8"]}]]
    column [col: 12 lg: 6]
      chart monthlyRevenue [title: "Monthly services and contracts billing" type: "bar" orientation: "horizontal" labels: ["January","February","March","April"] datasets: [{"label":"MXN","data":[224000,305748,326794,200045],"backgroundColor":"#2563eb"}]]
    column [col: 12 lg: 6]
      chart monthlyVolume [title: "Requests received and resolved" type: "bar" orientation: "vertical" labels: ["January","February","March","April"] datasets: [{"label":"Received","data":[900,920,980,960],"backgroundColor":"#2563eb"},{"label":"Resolved","data":[820,850,750,700],"backgroundColor":"#94a3b8"}]]
    column [col: 12 lg: 6]
      chart yearlyComparison [title: "Billing comparison by year" type: "bar" labels: ["January","February","March"] datasets: [{"label":"2024","data":[1243343,1564343,1546343],"backgroundColor":"#94a3b8"},{"label":"2025","data":[1453343,1675343,1234343],"backgroundColor":"#60a5fa"},{"label":"2026","data":[1263343,1245343,1655343],"backgroundColor":"#1e3a8a"}]]
```


### Executive summary - finance

ID: executive-finance. DSL v2.

Equivalent of executive-summary-example-3.stories.ts Example3_Finance: six responsive KPI banners above receivables, collections and invoice charts with orange/gray datasets.

```dsl
view "Executive summary - finance and treasury" [version: "2"]
  text "Current reporting period - local demonstration data"
  card "Daily and monthly indicators"
    row [gap: 0]
      column [col: 6 md: 4 xl: 2]
        kpi "Invoices scheduled" value: "76" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Issued today" value: "40" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Collections scheduled" value: "48" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Collected today" value: "32" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Monthly billing" value: "MXN 1,186,424" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Overdue portfolio" value: "3%" color: "warning"
    text "Pending collection: MXN 260,005. Operational completion: 52.6% inbound and 66.7% outbound."
  row
    column [col: 12 lg: 6]
      chart distribution [title: "Current and overdue receivables" type: "pie" labels: ["Current","Overdue"] datasets: [{"label":"Share","data":[85,15],"backgroundColor":["#ea580c","#6b7280"]}]]
    column [col: 12 lg: 6]
      chart monthlyRevenue [title: "Effective monthly collections" type: "bar" orientation: "horizontal" labels: ["January","February","March","April"] datasets: [{"label":"MXN","data":[224000,305748,326794,200045],"backgroundColor":"#ea580c"}]]
    column [col: 12 lg: 6]
      chart monthlyVolume [title: "Invoices issued and paid" type: "bar" orientation: "vertical" labels: ["January","February","March","April"] datasets: [{"label":"Issued","data":[900,920,980,960],"backgroundColor":"#ea580c"},{"label":"Paid","data":[820,850,750,700],"backgroundColor":"#6b7280"}]]
    column [col: 12 lg: 6]
      chart yearlyComparison [title: "Billing comparison by year" type: "bar" labels: ["January","February","March"] datasets: [{"label":"2024","data":[1243343,1564343,1546343],"backgroundColor":"#6b7280"},{"label":"2025","data":[1453343,1675343,1234343],"backgroundColor":"#fb923c"},{"label":"2026","data":[1263343,1245343,1655343],"backgroundColor":"#9a3412"}]]
```


### Sales and operations - blue gray

ID: sales-blue-gray. DSL v2.

Equivalent of sales-operations-monitoring.stories.ts AzulConGris: blue/gray datasets, 7/5 split hero panels, inbound/outbound progress text and four analytical charts.

```dsl
view "Sales and operations monitoring - blue gray" [version: "2"]
  text "Current reporting period - local demonstration data"
  row
    column [col: 12 xl: 7]
      card "Daily gate movements"
        row
          column [col: 12 md: 6]
            kpi "Gate In actual" value: "40 / 76" color: "primary"
            text "52.6% completed; 36 remaining."
          column [col: 12 md: 6]
            kpi "Gate Out actual" value: "32 / 48" color: "secondary"
            text "66.7% completed; 16 remaining."
    column [col: 12 xl: 5]
      card "Monthly financial performance"
        kpi "Monthly billing" value: "MXN 1,186,424"
        row
          column [col: 7]
            kpi "Pending collection" value: "MXN 260,005"
          column [col: 5]
            kpi "Overdue portfolio" value: "3%" color: "danger"
  row
    column [col: 12 lg: 6]
      chart distribution [title: "Yard occupancy" type: "pie" labels: ["Occupied","Available"] datasets: [{"label":"Share","data":[85,15],"backgroundColor":["#2563eb","#94a3b8"]}]]
    column [col: 12 lg: 6]
      chart monthlyRevenue [title: "Monthly billing" type: "bar" orientation: "horizontal" labels: ["January","February","March","April"] datasets: [{"label":"MXN","data":[224000,305748,326794,200045],"backgroundColor":"#2563eb"}]]
    column [col: 12 lg: 6]
      chart monthlyVolume [title: "Monthly gate movements" type: "bar" orientation: "vertical" labels: ["January","February","March","April"] datasets: [{"label":"Gate In","data":[900,920,980,960],"backgroundColor":"#2563eb"},{"label":"Gate Out","data":[820,850,750,700],"backgroundColor":"#94a3b8"}]]
    column [col: 12 lg: 6]
      chart yearlyComparison [title: "Billing comparison by year" type: "bar" labels: ["January","February","March"] datasets: [{"label":"2024","data":[1243343,1564343,1546343],"backgroundColor":"#94a3b8"},{"label":"2025","data":[1453343,1675343,1234343],"backgroundColor":"#60a5fa"},{"label":"2026","data":[1263343,1245343,1655343],"backgroundColor":"#1e3a8a"}]]
```


### Sales and operations - orange gray

ID: sales-orange-gray. DSL v2.

Equivalent of sales-operations-monitoring.stories.ts NaranjaConGris: a six-column statistic strip and four charts with orange/gray datasets. Semantic KPI colors follow the host theme.

```dsl
view "Sales and operations monitoring - orange gray" [version: "2"]
  text "Current reporting period - local demonstration data"
  card "Daily and monthly indicators"
    row [gap: 0]
      column [col: 6 md: 4 xl: 2]
        kpi "Gate In scheduled" value: "76" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Gate In actual" value: "40" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Gate Out scheduled" value: "48" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Gate Out actual" value: "32" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Monthly billing" value: "MXN 1,186,424" color: "warning"
      column [col: 6 md: 4 xl: 2]
        kpi "Overdue portfolio" value: "3%" color: "warning"
    text "Pending collection: MXN 260,005. Operational completion: 52.6% inbound and 66.7% outbound."
  row
    column [col: 12 lg: 6]
      chart distribution [title: "Yard occupancy" type: "pie" labels: ["Occupied","Available"] datasets: [{"label":"Share","data":[85,15],"backgroundColor":["#ea580c","#6b7280"]}]]
    column [col: 12 lg: 6]
      chart monthlyRevenue [title: "Monthly billing" type: "bar" orientation: "horizontal" labels: ["January","February","March","April"] datasets: [{"label":"MXN","data":[224000,305748,326794,200045],"backgroundColor":"#ea580c"}]]
    column [col: 12 lg: 6]
      chart monthlyVolume [title: "Monthly gate movements" type: "bar" orientation: "vertical" labels: ["January","February","March","April"] datasets: [{"label":"Gate In","data":[900,920,980,960],"backgroundColor":"#ea580c"},{"label":"Gate Out","data":[820,850,750,700],"backgroundColor":"#6b7280"}]]
    column [col: 12 lg: 6]
      chart yearlyComparison [title: "Billing comparison by year" type: "bar" labels: ["January","February","March"] datasets: [{"label":"2024","data":[1243343,1564343,1546343],"backgroundColor":"#6b7280"},{"label":"2025","data":[1453343,1675343,1234343],"backgroundColor":"#fb923c"},{"label":"2026","data":[1263343,1245343,1655343],"backgroundColor":"#9a3412"}]]
```


### AI control tower

ID: control-tower. DSL v2.

Equivalent of control-tower.stories.ts Default: six KPI tiles, left critical alerts, central conversation queue and right activity/sentiment panels. Uses static story-derived records and local preview actions; no live messaging or autonomous operations.

```dsl
view "AI control tower" [version: "2"]
  alert "2 urgent conversations require operator attention." color: "danger"
  text "AI engine: online | WhatsApp: online | Telegram: online | Email: delayed"
  row
    column [col: 6 md: 4 xl: 2]
      kpi "Active conversations" value: "8"
    column [col: 6 md: 4 xl: 2]
      kpi "Managed by AI" value: "4" color: "success"
    column [col: 6 md: 4 xl: 2]
      kpi "Waiting for operator" value: "3" color: "warning"
    column [col: 6 md: 4 xl: 2]
      kpi "At risk of SLA breach" value: "3" color: "danger"
    column [col: 6 md: 4 xl: 2]
      kpi "AI resolution rate" value: "13%"
    column [col: 6 md: 4 xl: 2]
      kpi "Average response" value: "1.4 min"
  row
    column [col: 12 lg: 3]
      card "Critical alerts"
        alert "Mariana Torres: rejected payment and blocked card. Waiting 2 minutes." color: "danger"
        alert "Diego Salinas: undelivered order and urgent refund. Waiting 5 minutes." color: "warning"
        alert "Andres Ibanez: account suspended without notice. Waiting 7 minutes." color: "warning"
      card "Channel health"
        text "WhatsApp and Telegram are responding normally. Email delivery is delayed."
    column [col: 12 lg: 6]
      table conversations [title: "Conversation queue" responsive: true data: [{"customer":"Mariana Torres","channel":"WhatsApp","subject":"Payment rejected","status":"Operator needed"},{"customer":"Diego Salinas","channel":"Telegram","subject":"Order not delivered","status":"Operator needed"},{"customer":"Andres Ibanez","channel":"Telegram","subject":"Account suspended","status":"Operator needed"},{"customer":"Rodrigo Pena","channel":"WhatsApp","subject":"Mobile application crashes","status":"AI active"},{"customer":"Valentina Cruz","channel":"Telegram","subject":"Upgrade to Pro plan","status":"AI active"},{"customer":"Fernando Aguirre","channel":"Email","subject":"24-month contract renewal","status":"AI active"}]]
        [Customer] -> field: "customer"
        [Channel] -> field: "channel"
        [Subject] -> field: "subject"
        [Status] -> field: "status" badge: true
      actions
        review: "Review urgent case" modal: "caseDetails"
    column [col: 12 lg: 3]
      card "Recent activity"
        text "Now: new WhatsApp conversation."
        text "Now: AI answered a customer question."
        text "1 minute ago: new WhatsApp conversation."
      chart sentiment [title: "Volume and sentiment" type: "bar" stacked: true labels: ["08h","09h","10h","11h","12h"] datasets: [{"label":"Positive","data":[12,18,20,16,24],"backgroundColor":"#16a34a"},{"label":"Negative","data":[4,3,6,5,4],"backgroundColor":"#ef4444"},{"label":"Neutral","data":[8,10,9,11,12],"backgroundColor":"#94a3b8"}]]
  modal "caseDetails" title: "Review urgent conversation" size: "lg" scrollable: true
    form "Operator review"
      customer: text label: "Customer" readonly: true default: "Mariana Torres"
      issue: textarea label: "Issue" readonly: true default: "Payment rejected and card blocked."
      resolution: textarea label: "Resolution notes" required: true rows: 4
      owner: select label: "Owner" options: ["Billing support","Customer care","Security team"] default: "Billing support"
    actions
      save: "Save review"
      cancel: "Cancel"
```


### Large modal with editable order lines

ID: large-modal-editable-table. DSL v2.

Additional v2 acceptance example: extra-large scrollable modal with an isolated form, editable order-line table, required/min/max/step validation, tabs, nested accordion and save/cancel actions. Changes are local preview state.

```dsl
view "Purchase order workspace" [version: "2"]
  row
    column [col: 12 md: 8]
      card "Purchase order PO-2026-0142"
        text "Customer: Pacific Logistics. Currency: USD. Delivery: September 30, 2026."
        actions
          edit: "Edit order in large modal" icon: "bi-pencil" modal: "orderEditor"
    column [col: 12 md: 4]
      kpi "Order amount" value: "USD 4,725.00"
  modal "orderEditor" title: "Edit purchase order PO-2026-0142" size: "xl" scrollable: true
    tabs
      item "Order details"
        form "Commercial details"
          row
            column [col: 12 md: 6]
              customer: text label: "Customer" required: true maxLength: 120 default: "Pacific Logistics"
              reference: text label: "Order reference" required: true default: "PO-2026-0142"
            column [col: 12 md: 6]
              deliveryDate: date label: "Delivery date" required: true default: "2026-09-30"
              currency: select label: "Currency" options: ["USD","MXN","PEN"] default: "USD"
        table orderLines [title: "Editable order lines" editable: true responsive: true data: [{"sku":"PAL-STD","description":"Standard export pallet","quantity":30,"unitPrice":45,"discount":0,"deliveryDate":"2026-09-30"},{"sku":"WRAP-500","description":"Industrial stretch wrap","quantity":25,"unitPrice":35,"discount":0,"deliveryDate":"2026-09-30"},{"sku":"FRT-REG","description":"Regional freight service","quantity":1,"unitPrice":2500,"discount":0,"deliveryDate":"2026-09-30"}]]
          [SKU] -> field: "sku" type: "text" required: true maxLength: 30
          [Description] -> field: "description" type: "text" required: true maxLength: 160
          [Quantity] -> field: "quantity" type: "number" required: true min: 1 max: 10000 step: 1
          [Unit price] -> field: "unitPrice" type: "number" required: true min: 0 step: 0.01
          [Discount percent] -> field: "discount" type: "number" min: 0 max: 100 step: 0.5
          [Delivery date] -> field: "deliveryDate" type: "date" required: true
      item "Notes and review"
        accordion
          item "Delivery instructions"
            instructions: textarea label: "Instructions" rows: 4 default: "Deliver to warehouse B between 08:00 and 16:00."
          item "Internal review"
            approved: boolean label: "Approved for fulfillment" default: false
            reviewer: text label: "Reviewer" default: "Alex Morgan"
        alert "Save validates required fields and numeric limits. Cancel discards modal edits." color: "info"
    actions
      save: "Save order" icon: "bi-check-lg" color: "primary"
      cancel: "Cancel changes" icon: "bi-x-circle" color: "secondary"
```


### Commercial portfolio with customer drill-down

ID: commercial-portfolio. DSL v2.

Based on commercial-portfolio.stories.ts: click a customer bar to open the service distribution chart in a large modal.

```dsl
view "Commercial portfolio" [version: "2"]
  row
    column [col: 12 md: 8]
      card "Top customers by annual billing"
        chart topCustomers [title: "Annual billing by customer" type: "bar" labels: ["Pacific Logistics","Atlas Freight","Northwind Trade"] datasets: [{"label":"Annual billing USD","data":[420000,310000,260000],"backgroundColor":["#0d6efd","#198754","#fd7e14"]}] modal: "customerServices" detailChart: "serviceMix" details: [{"labels":["Transport","Storage","Customs"],"datasets":[{"label":"Service revenue","data":[210000,126000,84000],"backgroundColor":["#0d6efd","#198754","#fd7e14"]}]},{"labels":["Transport","Storage"],"datasets":[{"label":"Service revenue","data":[217000,93000],"backgroundColor":["#0d6efd","#198754"]}]},{"labels":["Storage","Customs"],"datasets":[{"label":"Service revenue","data":[156000,104000],"backgroundColor":["#198754","#fd7e14"]}]}]]
    column [col: 12 md: 4]
      kpi "Annual portfolio" value: "USD 990,000" color: "primary"
      alert "Select a chart bar to inspect that customer's service revenue." color: "info"
  modal "customerServices" title: "Customer service revenue" size: "xl" scrollable: true
    text "Customer:" field: "selection.label"
    text "Annual billing:" field: "selection.value"
    chart serviceMix [title: "Service distribution" type: "pie" labels: ["Transport","Storage","Customs"] datasets: [{"label":"Service revenue","data":[210000,126000,84000],"backgroundColor":["#0d6efd","#198754","#fd7e14"]}]]
    actions
      cancel: "Close" color: "secondary"
```


## Related resources

- [All examples, including legacy](https://ovenfo.com/docs/dsl/v2/examples.md)
- [Machine-readable catalog](https://ovenfo.com/docs/dsl/v2/catalog.json)
- [Readable HTML](https://ovenfo.com/docs/dsl/v2/)