# Ovenfo DSL examples

Read the [v2 specification](https://ovenfo.com/docs/dsl/v2/spec.md) first. These examples are copied from the API compiler catalog; legacy examples are explicitly marked.

### Administration menu

ID: menu-list. Legacy DSL; do not mix its grammar with v2.

Equivalent of menu-list.stories.ts Default: six administration destinations using the legacy navigation grid.

```dsl
options "Administration" [description: "Manage users, access, configuration and reports"]
  [User Management] -> link: "/admin/users" icon: "bi-people"
  [Roles and Permissions] -> link: "/admin/roles" icon: "bi-shield-check"
  [System Catalogs] -> link: "/admin/catalogs" icon: "bi-list-stars"
  [Global Settings] -> link: "/admin/settings" icon: "bi-gear"
  [Audit Logs] -> link: "/admin/audit" icon: "bi-journal-text"
  [Reports and Analytics] -> link: "/admin/reports" icon: "bi-graph-up"
```

### 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"
```