{ "version": "2", "roots": [ "view", "options", "dashboard", "list", "form", "formNav", "form-nav", "accordion", "form-accordion" ], "fieldTypes": [ "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" ], "blocks": [ { "name": "view", "description": "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" ] }, { "name": "row", "description": "Responsive Bootstrap row containing columns.", "properties": [ "gap", "col", "sm", "md", "lg", "xl", "xxl", "colSpan", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify", "color" ] }, { "name": "column", "description": "Responsive column containing arbitrary composed blocks.", "properties": [ "col", "md", "lg", "xl", "sm", "xxl", "colSpan", "gap", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify", "color" ] }, { "name": "card", "description": "Titled card grouping composed content.", "properties": [ "color", "col", "sm", "md", "lg", "xl", "xxl", "colSpan", "gap", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify" ] }, { "name": "section", "description": "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" ] }, { "name": "form", "description": "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" ] }, { "name": "tabs", "description": "Tab navigation containing item children.", "properties": [ "col", "sm", "md", "lg", "xl", "xxl", "colSpan", "gap", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify", "color" ] }, { "name": "accordion", "description": "Collapsible sections containing item children.", "properties": [ "col", "sm", "md", "lg", "xl", "xxl", "colSpan", "gap", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify", "color" ] }, { "name": "item", "description": "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" ] }, { "name": "modal", "description": "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" ] }, { "name": "table", "description": "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" ] }, { "name": "chart", "description": "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" ] }, { "name": "kpi", "description": "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" ] }, { "name": "alert", "description": "Static feedback message with a semantic color.", "properties": [ "color", "col", "sm", "md", "lg", "xl", "xxl", "colSpan", "gap", "padding", "margin", "rounded", "shadow", "hidden", "align", "justify" ] }, { "name": "text", "description": "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" ] }, { "name": "actions", "description": "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" ] }, { "name": "field", "description": "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" ] }, { "name": "table-column", "description": "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" ] }, { "name": "options", "description": "Legacy navigation root with [Title] -> link: \"/path\" icon: \"bi-grid\" children.", "properties": [ "description", "link", "icon" ] }, { "name": "action", "description": "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" ] } ], "properties": [ { "name": "version", "type": "string", "description": "Use exactly \"2\" on a view root to opt into composition. Unversioned legacy roots keep their original grammar." }, { "name": "title", "type": "string", "description": "Visible title of a table, chart or modal." }, { "name": "col", "type": "integer", "description": "Bootstrap grid span from 1 to 12." }, { "name": "md", "type": "integer", "description": "Grid span from 1 to 12 at the medium breakpoint." }, { "name": "lg", "type": "integer", "description": "Grid span from 1 to 12 at the large breakpoint." }, { "name": "xl", "type": "integer", "description": "Grid span from 1 to 12 at the extra-large breakpoint." }, { "name": "gap", "type": "integer", "description": "Bootstrap row gutter spacing from 0 to 5." }, { "name": "color", "type": "string", "description": "Bootstrap semantic color: primary, secondary, success, danger, warning, info, light or dark." }, { "name": "icon", "type": "string", "description": "Bootstrap icon class, for example bi-save." }, { "name": "value", "type": "string", "description": "Displayed KPI value; write precomputed presentation text." }, { "name": "label", "type": "string", "description": "Visible field or action label." }, { "name": "type", "type": "string", "description": "Chart type: bar, line, pie or doughnut. Table-column type selects an editable control; use a supported field type." }, { "name": "orientation", "type": "string", "description": "Bar orientation: horizontal or vertical." }, { "name": "stacked", "type": "boolean", "description": "Stacks bar-chart datasets." }, { "name": "labels", "type": "array", "description": "Inline JSON chart labels." }, { "name": "datasets", "type": "array", "description": "Inline JSON chart datasets with label, numeric data, backgroundColor and/or borderColor. Dataset values align with labels." }, { "name": "data", "type": "array", "description": "Inline JSON table rows. Object keys match column field names." }, { "name": "modal", "type": "string", "description": "ID of a declared modal opened by an action, table add action or chart point click." }, { "name": "size", "type": "string", "description": "Modal size: sm, md, lg (default), xl or fullscreen. Table size: sm for compact cells." }, { "name": "scrollable", "type": "boolean", "description": "Allows a modal body to scroll while its header stays visible. Actions inside the body scroll with it." }, { "name": "editable", "type": "boolean", "description": "Enables local editing of table cells using column type and validation properties." }, { "name": "responsive", "type": "boolean", "description": "Wraps the table for horizontal scrolling on narrow screens." }, { "name": "field", "type": "string", "description": "Table row field identifier; on text blocks only selection.label, selection.value or selection.datasetLabel." }, { "name": "required", "type": "boolean", "description": "Requires a control value before a local save succeeds." }, { "name": "readonly", "type": "boolean", "description": "Renders a control without allowing edits." }, { "name": "disabled", "type": "boolean", "description": "Disables a control." }, { "name": "min", "type": "number", "description": "Minimum numeric input value." }, { "name": "max", "type": "number", "description": "Maximum numeric input value." }, { "name": "step", "type": "number", "description": "Positive increment for a numeric input." }, { "name": "minLength", "type": "integer", "description": "Minimum text length." }, { "name": "maxLength", "type": "integer", "description": "Maximum text length." }, { "name": "placeholder", "type": "string", "description": "Hint displayed by an empty text control." }, { "name": "rows", "type": "integer", "description": "Visible textarea row count." }, { "name": "default", "type": "scalar|array", "description": "Initial field value: a JSON scalar, or an array for multi-value/media controls." }, { "name": "options", "type": "array", "description": "Literal choices for select, typeahead and multi-typeahead controls." }, { "name": "badge", "type": "boolean", "description": "Displays a read-only table cell as a badge." }, { "name": "link", "type": "string", "description": "Navigation destination. V2 actions require a local absolute path, such as /orders." }, { "name": "description", "type": "string", "description": "Legacy options subtitle. Also used as example metadata, not as arbitrary runtime behavior." }, { "name": "sm", "type": "integer", "description": "Bootstrap column width at the small breakpoint (1–12)." }, { "name": "xxl", "type": "integer", "description": "Bootstrap column width at the extra-extra-large breakpoint (1–12)." }, { "name": "colSpan", "type": "integer", "description": "Legacy-compatible medium breakpoint column width (1–12)." }, { "name": "padding", "type": "integer", "description": "Bootstrap padding utility (0–5)." }, { "name": "margin", "type": "integer", "description": "Bootstrap margin utility (0–5)." }, { "name": "shadow", "type": "boolean", "description": "Enable a Bootstrap shadow." }, { "name": "rounded", "type": "boolean", "description": "Enable rounded corners." }, { "name": "hidden", "type": "boolean", "description": "Hide the block." }, { "name": "align", "type": "string", "description": "Cross-axis alignment: start, center, end or stretch." }, { "name": "justify", "type": "string", "description": "Main-axis alignment: start, center, end, between, around or evenly." }, { "name": "centered", "type": "boolean", "description": "Center a modal vertically (default true)." }, { "name": "fullscreen", "type": "string", "description": "Responsive modal fullscreen breakpoint: sm-down through xxl-down." }, { "name": "striped", "type": "boolean", "description": "Striped table rows." }, { "name": "bordered", "type": "boolean", "description": "Table cell borders." }, { "name": "hover", "type": "boolean", "description": "Table row hover styling." }, { "name": "detailChart", "type": "string", "description": "Declared chart key receiving the selected element's drill-down data." }, { "name": "details", "type": "array", "description": "Per-element chart data objects, each with labels and datasets." }, { "name": "action", "type": "string", "description": "Table action: remove, delete or edit (edit also requires modal)." }, { "name": "close", "type": "boolean", "description": "Cancel and close the modal draft." }, { "name": "transac", "type": "boolean", "description": "Validate and apply preview changes." }, { "name": "collapsed", "type": "boolean", "description": "Start an accordion item collapsed." }, { "name": "subtitle", "type": "string", "description": "Supporting text below the view title." }, { "name": "desc", "type": "string", "description": "Field help text or KPI supporting text." }, { "name": "selected", "type": "scalar|array", "description": "Initial field value alias; default takes precedence." }, { "name": "focus", "type": "boolean", "description": "Initial autofocus hint for native text inputs." }, { "name": "storagePath", "type": "string", "description": "Media storage key prefix. Defaults to dsl-preview/control-id/; the host supplies storage and preview services." }, { "name": "maxPhotos", "type": "integer", "description": "Positive image-upload or camera item limit." }, { "name": "avatar", "type": "boolean", "description": "Render a readonly table cell as an Ovenfo name avatar." } ], "examples": [ { "id": "menu-list", "name": "Administration menu", "category": "navigation", "description": "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\"]\n [User Management] -> link: \"/admin/users\" icon: \"bi-people\"\n [Roles and Permissions] -> link: \"/admin/roles\" icon: \"bi-shield-check\"\n [System Catalogs] -> link: \"/admin/catalogs\" icon: \"bi-list-stars\"\n [Global Settings] -> link: \"/admin/settings\" icon: \"bi-gear\"\n [Audit Logs] -> link: \"/admin/audit\" icon: \"bi-journal-text\"\n [Reports and Analytics] -> link: \"/admin/reports\" icon: \"bi-graph-up\"\n" }, { "id": "list-view", "name": "User directory", "category": "directory", "description": "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\"]\n form \"Search users\"\n row\n column [col: 12 md: 6]\n username: text label: \"Username\" placeholder: \"Search username\"\n column [col: 12 md: 6]\n fullName: text label: \"Name and surnames\" placeholder: \"Search name\"\n actions\n filters: \"Advanced filters\" icon: \"bi-funnel\" modal: \"userFilters\"\n 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\"}]]\n [ID] -> field: \"userId\" type: \"number\"\n [Username] -> field: \"username\"\n [Full name] -> field: \"fullName\"\n [Status] -> field: \"status\" badge: true\n [Administrator] -> field: \"admin\"\n [Password expiry] -> field: \"passwordDueDate\" type: \"date\"\n modal \"userFilters\" title: \"Advanced filters\" size: \"lg\" scrollable: true\n form \"Filter criteria\"\n status: select label: \"Status\" options: [\"All\", \"Active\", \"Inactive\"] default: \"All\"\n administrator: select label: \"Administrator\" options: [\"All\", \"Yes\", \"No\"] default: \"All\"\n registrationFrom: date label: \"Registration date from\"\n passwordExpiryFrom: date label: \"Password expiry from\"\n passwordExpiryTo: date label: \"Password expiry to\"\n actions\n save: \"Apply criteria\" color: \"primary\"\n cancel: \"Cancel\" color: \"secondary\"\n" }, { "id": "transactional-view", "name": "User registration", "category": "forms", "description": "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\"]\n card \"User registration\"\n form \"User details\"\n row\n column [col: 12 md: 6]\n username: text label: \"Username\" required: true maxLength: 100 default: \"oscar.huertas\"\n firstName: text label: \"First name\" required: true maxLength: 100 default: \"Oscar\"\n maternalLastName: text label: \"Maternal surname\" maxLength: 100 default: \"Vargas\"\n column [col: 12 md: 6]\n password: password label: \"Password\" required: true minLength: 8 placeholder: \"At least eight characters\"\n paternalLastName: text label: \"Paternal surname\" required: true maxLength: 100 default: \"Huertas\"\n section \"Account status and permissions\"\n status: select label: \"Status\" required: true options: [\"Active\", \"Inactive\", \"Suspended\"] default: \"Active\"\n passwordDueDate: date label: \"Password expiry date\" required: true default: \"2026-12-31\"\n flagAdmin: boolean label: \"Administrator\" default: true\n actions\n save: \"Save\" icon: \"bi-save\" color: \"primary\"\n cancel: \"Cancel\" icon: \"bi-x-circle\" color: \"secondary\"\n" }, { "id": "ui-showcase", "name": "UI style guide", "category": "showcase", "description": "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\"]\n tabs\n item \"Buttons and feedback\"\n card \"Button palette\"\n actions\n primary: \"Primary\" color: \"primary\"\n secondary: \"Secondary\" color: \"secondary\"\n success: \"Success\" color: \"success\"\n danger: \"Danger\" color: \"danger\"\n warning: \"Warning\" color: \"warning\"\n info: \"Information\" color: \"info\"\n section \"Alerts and notifications\"\n alert \"Settings saved successfully.\" color: \"success\"\n alert \"Review the pending changes before saving.\" color: \"warning\"\n alert \"A required field is missing.\" color: \"danger\"\n alert \"Preview data is stored locally.\" color: \"info\"\n item \"Cards and indicators\"\n row\n column [col: 12 md: 4]\n kpi \"Active users\" value: \"1,248\" color: \"primary\"\n column [col: 12 md: 4]\n kpi \"Monthly revenue\" value: \"$24,500\" color: \"success\"\n column [col: 12 md: 4]\n kpi \"Pending tasks\" value: \"18\" color: \"warning\"\n card \"Enterprise layout system\"\n text \"Responsive cards and semantic colors use the host Bootstrap theme.\"\n status: badge label: \"Status\" default: \"Active\"\n completion: progress label: \"Completion\" default: 75\n accordion\n item \"Component guidance\"\n text \"Use cards for grouped content, alerts for feedback and actions for preview interactions.\"\n" }, { "id": "executive-services", "name": "Executive summary - service operations", "category": "dashboard", "description": "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\"]\n text \"Platform indicators and service activity\"\n actions\n configure: \"Configure service\" modal: \"serviceConfiguration\" icon: \"bi-gear\"\n studyPlan: \"Study plan\" modal: \"studyPlan\" icon: \"bi-book\"\n row\n column [col: 12 md: 4]\n kpi \"Total appointments\" value: \"40\"\n column [col: 12 md: 4]\n kpi \"Total DTUs\" value: \"200\"\n column [col: 12 md: 4]\n kpi \"Total reschedules\" value: \"25\"\n row\n column [col: 12 md: 6]\n 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\"}]]\n chart channels [title: \"Service channels\" type: \"pie\" labels: [\"Online\",\"In-person\",\"Reschedules\"] datasets: [{\"label\":\"Distribution\",\"data\":[55,30,15],\"backgroundColor\":[\"#2563eb\",\"#94a3b8\",\"#f59e0b\"]}]]\n column [col: 12 md: 6]\n 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\"}]]\n chart progress [title: \"Appointment status\" type: \"doughnut\" labels: [\"Completed\",\"In progress\",\"Pending\"] datasets: [{\"label\":\"Status\",\"data\":[60,25,15],\"backgroundColor\":[\"#16a34a\",\"#2563eb\",\"#94a3b8\"]}]]\n modal \"serviceConfiguration\" title: \"Configure service\" size: \"lg\"\n form \"Service configuration\"\n serviceName: text label: \"Service name\" required: true default: \"Customer appointments\"\n dailyCapacity: number label: \"Daily capacity\" min: 1 default: 40\n actions\n save: \"Save settings\"\n cancel: \"Cancel\"\n modal \"studyPlan\" title: \"Study plan\" size: \"lg\"\n text \"Service onboarding: scheduling, rescheduling and customer follow-up.\"\n actions\n cancel: \"Close\"\n" }, { "id": "executive-services-default", "name": "Executive summary - default", "category": "dashboard", "description": "Equivalent of executive-summary.stories.ts Default, which aliases Example1_ServiceOperations in the source story.", "dsl": "view \"Executive summary - service operations\" [version: \"2\"]\n text \"Platform indicators and service activity\"\n actions\n configure: \"Configure service\" modal: \"serviceConfiguration\" icon: \"bi-gear\"\n studyPlan: \"Study plan\" modal: \"studyPlan\" icon: \"bi-book\"\n row\n column [col: 12 md: 4]\n kpi \"Total appointments\" value: \"40\"\n column [col: 12 md: 4]\n kpi \"Total DTUs\" value: \"200\"\n column [col: 12 md: 4]\n kpi \"Total reschedules\" value: \"25\"\n row\n column [col: 12 md: 6]\n 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\"}]]\n chart channels [title: \"Service channels\" type: \"pie\" labels: [\"Online\",\"In-person\",\"Reschedules\"] datasets: [{\"label\":\"Distribution\",\"data\":[55,30,15],\"backgroundColor\":[\"#2563eb\",\"#94a3b8\",\"#f59e0b\"]}]]\n column [col: 12 md: 6]\n 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\"}]]\n chart progress [title: \"Appointment status\" type: \"doughnut\" labels: [\"Completed\",\"In progress\",\"Pending\"] datasets: [{\"label\":\"Status\",\"data\":[60,25,15],\"backgroundColor\":[\"#16a34a\",\"#2563eb\",\"#94a3b8\"]}]]\n modal \"serviceConfiguration\" title: \"Configure service\" size: \"lg\"\n form \"Service configuration\"\n serviceName: text label: \"Service name\" required: true default: \"Customer appointments\"\n dailyCapacity: number label: \"Daily capacity\" min: 1 default: 40\n actions\n save: \"Save settings\"\n cancel: \"Cancel\"\n modal \"studyPlan\" title: \"Study plan\" size: \"lg\"\n text \"Service onboarding: scheduling, rescheduling and customer follow-up.\"\n actions\n cancel: \"Close\"\n" }, { "id": "executive-crm", "name": "Executive summary - CRM", "category": "dashboard", "description": "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\"]\n text \"Current reporting period - local demonstration data\"\n row\n column [col: 12 xl: 7]\n card \"Help desk - today\"\n row\n column [col: 12 md: 6]\n kpi \"Requests received\" value: \"40 / 76\" color: \"primary\"\n text \"52.6% completed; 36 remaining.\"\n column [col: 12 md: 6]\n kpi \"Cases closed\" value: \"32 / 48\" color: \"secondary\"\n text \"66.7% completed; 16 remaining.\"\n column [col: 12 xl: 5]\n card \"Monthly financial performance\"\n kpi \"Monthly billing\" value: \"MXN 1,186,424\"\n row\n column [col: 7]\n kpi \"Pending collection\" value: \"MXN 260,005\"\n column [col: 5]\n kpi \"Overdue portfolio\" value: \"3%\" color: \"danger\"\n row\n column [col: 12 lg: 6]\n chart distribution [title: \"Ticket resolution within SLA\" type: \"pie\" labels: [\"Within SLA\",\"Outside SLA\"] datasets: [{\"label\":\"Share\",\"data\":[85,15],\"backgroundColor\":[\"#2563eb\",\"#94a3b8\"]}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n" }, { "id": "executive-finance", "name": "Executive summary - finance", "category": "dashboard", "description": "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\"]\n text \"Current reporting period - local demonstration data\"\n card \"Daily and monthly indicators\"\n row [gap: 0]\n column [col: 6 md: 4 xl: 2]\n kpi \"Invoices scheduled\" value: \"76\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Issued today\" value: \"40\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Collections scheduled\" value: \"48\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Collected today\" value: \"32\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Monthly billing\" value: \"MXN 1,186,424\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Overdue portfolio\" value: \"3%\" color: \"warning\"\n text \"Pending collection: MXN 260,005. Operational completion: 52.6% inbound and 66.7% outbound.\"\n row\n column [col: 12 lg: 6]\n chart distribution [title: \"Current and overdue receivables\" type: \"pie\" labels: [\"Current\",\"Overdue\"] datasets: [{\"label\":\"Share\",\"data\":[85,15],\"backgroundColor\":[\"#ea580c\",\"#6b7280\"]}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n" }, { "id": "sales-blue-gray", "name": "Sales and operations - blue gray", "category": "monitoring", "description": "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\"]\n text \"Current reporting period - local demonstration data\"\n row\n column [col: 12 xl: 7]\n card \"Daily gate movements\"\n row\n column [col: 12 md: 6]\n kpi \"Gate In actual\" value: \"40 / 76\" color: \"primary\"\n text \"52.6% completed; 36 remaining.\"\n column [col: 12 md: 6]\n kpi \"Gate Out actual\" value: \"32 / 48\" color: \"secondary\"\n text \"66.7% completed; 16 remaining.\"\n column [col: 12 xl: 5]\n card \"Monthly financial performance\"\n kpi \"Monthly billing\" value: \"MXN 1,186,424\"\n row\n column [col: 7]\n kpi \"Pending collection\" value: \"MXN 260,005\"\n column [col: 5]\n kpi \"Overdue portfolio\" value: \"3%\" color: \"danger\"\n row\n column [col: 12 lg: 6]\n chart distribution [title: \"Yard occupancy\" type: \"pie\" labels: [\"Occupied\",\"Available\"] datasets: [{\"label\":\"Share\",\"data\":[85,15],\"backgroundColor\":[\"#2563eb\",\"#94a3b8\"]}]]\n column [col: 12 lg: 6]\n chart monthlyRevenue [title: \"Monthly billing\" type: \"bar\" orientation: \"horizontal\" labels: [\"January\",\"February\",\"March\",\"April\"] datasets: [{\"label\":\"MXN\",\"data\":[224000,305748,326794,200045],\"backgroundColor\":\"#2563eb\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n" }, { "id": "sales-orange-gray", "name": "Sales and operations - orange gray", "category": "monitoring", "description": "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\"]\n text \"Current reporting period - local demonstration data\"\n card \"Daily and monthly indicators\"\n row [gap: 0]\n column [col: 6 md: 4 xl: 2]\n kpi \"Gate In scheduled\" value: \"76\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Gate In actual\" value: \"40\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Gate Out scheduled\" value: \"48\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Gate Out actual\" value: \"32\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Monthly billing\" value: \"MXN 1,186,424\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Overdue portfolio\" value: \"3%\" color: \"warning\"\n text \"Pending collection: MXN 260,005. Operational completion: 52.6% inbound and 66.7% outbound.\"\n row\n column [col: 12 lg: 6]\n chart distribution [title: \"Yard occupancy\" type: \"pie\" labels: [\"Occupied\",\"Available\"] datasets: [{\"label\":\"Share\",\"data\":[85,15],\"backgroundColor\":[\"#ea580c\",\"#6b7280\"]}]]\n column [col: 12 lg: 6]\n chart monthlyRevenue [title: \"Monthly billing\" type: \"bar\" orientation: \"horizontal\" labels: [\"January\",\"February\",\"March\",\"April\"] datasets: [{\"label\":\"MXN\",\"data\":[224000,305748,326794,200045],\"backgroundColor\":\"#ea580c\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n column [col: 12 lg: 6]\n 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\"}]]\n" }, { "id": "control-tower", "name": "AI control tower", "category": "monitoring", "description": "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\"]\n alert \"2 urgent conversations require operator attention.\" color: \"danger\"\n text \"AI engine: online | WhatsApp: online | Telegram: online | Email: delayed\"\n row\n column [col: 6 md: 4 xl: 2]\n kpi \"Active conversations\" value: \"8\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Managed by AI\" value: \"4\" color: \"success\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Waiting for operator\" value: \"3\" color: \"warning\"\n column [col: 6 md: 4 xl: 2]\n kpi \"At risk of SLA breach\" value: \"3\" color: \"danger\"\n column [col: 6 md: 4 xl: 2]\n kpi \"AI resolution rate\" value: \"13%\"\n column [col: 6 md: 4 xl: 2]\n kpi \"Average response\" value: \"1.4 min\"\n row\n column [col: 12 lg: 3]\n card \"Critical alerts\"\n alert \"Mariana Torres: rejected payment and blocked card. Waiting 2 minutes.\" color: \"danger\"\n alert \"Diego Salinas: undelivered order and urgent refund. Waiting 5 minutes.\" color: \"warning\"\n alert \"Andres Ibanez: account suspended without notice. Waiting 7 minutes.\" color: \"warning\"\n card \"Channel health\"\n text \"WhatsApp and Telegram are responding normally. Email delivery is delayed.\"\n column [col: 12 lg: 6]\n 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\"}]]\n [Customer] -> field: \"customer\"\n [Channel] -> field: \"channel\"\n [Subject] -> field: \"subject\"\n [Status] -> field: \"status\" badge: true\n actions\n review: \"Review urgent case\" modal: \"caseDetails\"\n column [col: 12 lg: 3]\n card \"Recent activity\"\n text \"Now: new WhatsApp conversation.\"\n text \"Now: AI answered a customer question.\"\n text \"1 minute ago: new WhatsApp conversation.\"\n 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\"}]]\n modal \"caseDetails\" title: \"Review urgent conversation\" size: \"lg\" scrollable: true\n form \"Operator review\"\n customer: text label: \"Customer\" readonly: true default: \"Mariana Torres\"\n issue: textarea label: \"Issue\" readonly: true default: \"Payment rejected and card blocked.\"\n resolution: textarea label: \"Resolution notes\" required: true rows: 4\n owner: select label: \"Owner\" options: [\"Billing support\",\"Customer care\",\"Security team\"] default: \"Billing support\"\n actions\n save: \"Save review\"\n cancel: \"Cancel\"\n" }, { "id": "large-modal-editable-table", "name": "Large modal with editable order lines", "category": "composition", "description": "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\"]\n row\n column [col: 12 md: 8]\n card \"Purchase order PO-2026-0142\"\n text \"Customer: Pacific Logistics. Currency: USD. Delivery: September 30, 2026.\"\n actions\n edit: \"Edit order in large modal\" icon: \"bi-pencil\" modal: \"orderEditor\"\n column [col: 12 md: 4]\n kpi \"Order amount\" value: \"USD 4,725.00\"\n modal \"orderEditor\" title: \"Edit purchase order PO-2026-0142\" size: \"xl\" scrollable: true\n tabs\n item \"Order details\"\n form \"Commercial details\"\n row\n column [col: 12 md: 6]\n customer: text label: \"Customer\" required: true maxLength: 120 default: \"Pacific Logistics\"\n reference: text label: \"Order reference\" required: true default: \"PO-2026-0142\"\n column [col: 12 md: 6]\n deliveryDate: date label: \"Delivery date\" required: true default: \"2026-09-30\"\n currency: select label: \"Currency\" options: [\"USD\",\"MXN\",\"PEN\"] default: \"USD\"\n 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\"}]]\n [SKU] -> field: \"sku\" type: \"text\" required: true maxLength: 30\n [Description] -> field: \"description\" type: \"text\" required: true maxLength: 160\n [Quantity] -> field: \"quantity\" type: \"number\" required: true min: 1 max: 10000 step: 1\n [Unit price] -> field: \"unitPrice\" type: \"number\" required: true min: 0 step: 0.01\n [Discount percent] -> field: \"discount\" type: \"number\" min: 0 max: 100 step: 0.5\n [Delivery date] -> field: \"deliveryDate\" type: \"date\" required: true\n item \"Notes and review\"\n accordion\n item \"Delivery instructions\"\n instructions: textarea label: \"Instructions\" rows: 4 default: \"Deliver to warehouse B between 08:00 and 16:00.\"\n item \"Internal review\"\n approved: boolean label: \"Approved for fulfillment\" default: false\n reviewer: text label: \"Reviewer\" default: \"Alex Morgan\"\n alert \"Save validates required fields and numeric limits. Cancel discards modal edits.\" color: \"info\"\n actions\n save: \"Save order\" icon: \"bi-check-lg\" color: \"primary\"\n cancel: \"Cancel changes\" icon: \"bi-x-circle\" color: \"secondary\"\n" }, { "id": "commercial-portfolio", "name": "Commercial portfolio with customer drill-down", "category": "dashboard", "description": "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\"]\n row\n column [col: 12 md: 8]\n card \"Top customers by annual billing\"\n 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\"]}]}]]\n column [col: 12 md: 4]\n kpi \"Annual portfolio\" value: \"USD 990,000\" color: \"primary\"\n alert \"Select a chart bar to inspect that customer's service revenue.\" color: \"info\"\n modal \"customerServices\" title: \"Customer service revenue\" size: \"xl\" scrollable: true\n text \"Customer:\" field: \"selection.label\"\n text \"Annual billing:\" field: \"selection.value\"\n chart serviceMix [title: \"Service distribution\" type: \"pie\" labels: [\"Transport\",\"Storage\",\"Customs\"] datasets: [{\"label\":\"Service revenue\",\"data\":[210000,126000,84000],\"backgroundColor\":[\"#0d6efd\",\"#198754\",\"#fd7e14\"]}]]\n actions\n cancel: \"Close\" color: \"secondary\"\n" } ] }