@simai-studio/view 0.0.0-stage → 1.1.0

package/dist/smart/view-properties/lang/en.json

@@ -0,0 +1,89 @@
+{
+  "title": "Property view",
+  "events": {
+    "state": {
+      "label": "Record state"
+    },
+    "address-copy": {
+      "label": "Address copied"
+    },
+    "favourite": {
+      "label": "Favourite"
+    }
+  },
+  "runtime": {
+    "add-field-text": "Add a field",
+    "add-group-text": "Add an area",
+    "add-section-text": "Add a section",
+    "add-view-text": "Add a view",
+    "back-label": "Back",
+    "cancel-configuring-text": "Cancel",
+    "cancel-name-text": "Leave the name",
+    "cancel-text": "Cancel",
+    "changed-text": "Fields changed",
+    "close-label": "Close",
+    "configure-hint-narrow-text": "Drag fields between groups. Applied at once.",
+    "configure-hint-text": "Drag fields between groups and onto a section on the left. Applied at once.",
+    "configure-text": "Arrange the view",
+    "confirm-save-text": "Confirm and save",
+    "conflict-text": "The record changed; read it again",
+    "copy-link-label": "Copy link",
+    "create-text": "Create",
+    "delete-text": "Delete",
+    "delete-view-text": "Remove the view",
+    "done-configuring-text": "Done",
+    "edit-text": "edit",
+    "empty-record-text": "This record has nothing to show",
+    "empty-text": "not filled in",
+    "errors-text": "Errors",
+    "favourite-label": "Favourite",
+    "field-label-text": "Name",
+    "field-settings-text": "Field settings",
+    "hidden-text": "Hide",
+    "hide-rare-text": "Hide rare fields",
+    "hint-text": "Hint",
+    "in-this-group-text": "In this area",
+    "inherited-text": "by default",
+    "keep-editing-text": "Keep editing",
+    "last-shared-view-text": "The only view everyone has",
+    "link-copied-label": "Link copied",
+    "menu-label": "More",
+    "move-down-text": "Move down",
+    "move-up-text": "Move up",
+    "new-group-title": "New area",
+    "new-section-title": "New section",
+    "new-view-text": "New view",
+    "no-match-text": "Nothing matches",
+    "open-full-label": "Open as a page",
+    "personal-layer-text": "Personal",
+    "rare-text": "rare",
+    "read-only-text": "You can only view this record",
+    "remove-field-text": "Remove from this area",
+    "remove-group-text": "Remove this area",
+    "remove-section-text": "Remove this section",
+    "rename-text": "Rename",
+    "reset-view-ask-text": "Reset the whole view?",
+    "reset-view-text": "Reset",
+    "save-failed-text": "The save failed",
+    "save-name-text": "Save the name",
+    "save-text": "Save",
+    "section-icon-text": "Section glyph",
+    "sections-label": "Sections",
+    "shared-layer-text": "Everyone's",
+    "show-rare-text": "Show rare fields",
+    "shown-text": "Shown",
+    "state-load-failed": "The record could not be read",
+    "state-loading": "Reading the record",
+    "state-port-not-connected": "The record port is not connected",
+    "state-unavailable": "The record is unavailable",
+    "unplaced-hint-text": "Fields this view does not show. Drag one into a group to place it, or drag a field here to take it out.",
+    "unplaced-title": "Not placed",
+    "variant-text": "Template",
+    "view-conflict-text": "The view changed and was read again",
+    "view-denied-text": "You may not change this layer",
+    "view-profile-label": "View",
+    "view-reset-failed-text": "The view could not be reset",
+    "view-save-failed-text": "The view could not be saved",
+    "width-text": "Full width"
+  }
+}

package/dist/smart/view-properties/lang/ru.json

@@ -0,0 +1,89 @@
+{
+  "title": "Запись",
+  "events": {
+    "state": {
+      "label": "Состояние записи"
+    },
+    "address-copy": {
+      "label": "Адрес скопирован"
+    },
+    "favourite": {
+      "label": "Избранное"
+    }
+  },
+  "runtime": {
+    "add-field-text": "Добавить поле",
+    "add-group-text": "Добавить область",
+    "add-section-text": "Добавить раздел",
+    "add-view-text": "Добавить вид",
+    "back-label": "Назад",
+    "cancel-configuring-text": "Отменить",
+    "cancel-name-text": "Оставить название",
+    "cancel-text": "Отменить",
+    "changed-text": "Изменено полей",
+    "close-label": "Закрыть",
+    "configure-hint-narrow-text": "Перетаскивайте поля между группами. Применяется сразу.",
+    "configure-hint-text": "Перетаскивайте поля между группами и на разделы слева. Применяется сразу.",
+    "configure-text": "Настроить вид",
+    "confirm-save-text": "Подтвердить и сохранить",
+    "conflict-text": "Запись изменилась, обновите её",
+    "copy-link-label": "Копировать ссылку",
+    "create-text": "Создать",
+    "delete-text": "Удалить",
+    "delete-view-text": "Удалить вид",
+    "done-configuring-text": "Готово",
+    "edit-text": "изменить",
+    "empty-record-text": "В этой записи нечего показать",
+    "empty-text": "не заполнено",
+    "errors-text": "Ошибок",
+    "favourite-label": "В избранное",
+    "field-label-text": "Название",
+    "field-settings-text": "Настройки поля",
+    "hidden-text": "Скрыть",
+    "hide-rare-text": "Скрыть редкие поля",
+    "hint-text": "Подсказка",
+    "in-this-group-text": "В этой области",
+    "inherited-text": "по умолчанию",
+    "keep-editing-text": "Вернуться к правке",
+    "last-shared-view-text": "Единственный общий вид",
+    "link-copied-label": "Ссылка скопирована",
+    "menu-label": "Ещё",
+    "move-down-text": "Ниже",
+    "move-up-text": "Выше",
+    "new-group-title": "Новая область",
+    "new-section-title": "Новый раздел",
+    "new-view-text": "Новый вид",
+    "no-match-text": "Ничего не найдено",
+    "open-full-label": "Открыть на всю страницу",
+    "personal-layer-text": "Персональный",
+    "rare-text": "редкое",
+    "read-only-text": "Эту запись можно только смотреть",
+    "remove-field-text": "Убрать из области",
+    "remove-group-text": "Удалить область",
+    "remove-section-text": "Удалить раздел",
+    "rename-text": "Переименовать",
+    "reset-view-ask-text": "Сбросить весь вид?",
+    "reset-view-text": "Сбросить",
+    "save-failed-text": "Не удалось сохранить",
+    "save-name-text": "Сохранить название",
+    "save-text": "Сохранить",
+    "section-icon-text": "Значок раздела",
+    "sections-label": "Разделы",
+    "shared-layer-text": "Для всех",
+    "show-rare-text": "Показать редкие поля",
+    "shown-text": "Показывать",
+    "state-load-failed": "Не удалось загрузить запись",
+    "state-loading": "Загрузка записи",
+    "state-port-not-connected": "Порт записи не подключён",
+    "state-unavailable": "Запись недоступна",
+    "unplaced-hint-text": "Поля, которых нет в этом виде. Перетащите поле в группу, чтобы разместить, или сюда, чтобы убрать.",
+    "unplaced-title": "Не размещённые",
+    "variant-text": "Вид",
+    "view-conflict-text": "Вид изменился, он перезагружен",
+    "view-denied-text": "Нет права менять этот слой",
+    "view-profile-label": "Вид",
+    "view-reset-failed-text": "Не удалось сбросить вид",
+    "view-save-failed-text": "Не удалось сохранить вид",
+    "width-text": "На всю ширину"
+  }
+}

package/dist/smart/view-properties/probe.json

@@ -0,0 +1,188 @@
+{
+  "component": "sf-view-properties",
+  "probe": "sf-property-view against component.json (standard simai.smart-component 1.3.8 §12, gate 20; simai/ui-pro#3, #4)",
+  "format": "stands/15-scenarios (A4 modal: a page, probes in steps); the runner is the SIMAI Framework's tests/browser/manifest-probes.browser.mjs through tests/browser/package-manifest-probes.browser.mjs",
+  "page": {
+    "lang": "ru",
+    "body": [
+      "<main style=\"width: 1100px\">",
+      "  <sf-view-properties id=\"p\" record-id=\"r1\" collection=\"workbench.solutions\" sections-as=\"tabs\" aria-label=\"Запись\"></sf-view-properties>",
+      "  <sf-view-properties id=\"missing\" record-id=\"r-999\" aria-label=\"Запись\"></sf-view-properties>",
+      "  <sf-view-properties id=\"panel\" panel record-id=\"r1\" panel-label=\"Запись\"></sf-view-properties>",
+      "</main>"
+    ]
+  },
+  "probes": [
+    {
+      "id": "p1-saved",
+      "title": "an applied group save is the fact sf-property-view-saved {id, revision}, once",
+      "covers": "events.saved (simai/ui-pro#4 item 1), actions.edit-group, actions.save-group, values.revision",
+      "steps": [
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 900,
+          "expect": {
+            "values": {
+              "#p.revision": "1",
+              "#p.section": "main"
+            }
+          }
+        },
+        {
+          "action": {
+            "name": "edit-group",
+            "with": {
+              "section": "main",
+              "group": "g"
+            }
+          },
+          "target": "#p",
+          "wait": 300
+        },
+        {
+          "script": "(() => { const el = document.getElementById('p'); const field = el.sections[0].groups[0].fields[0]; el.changeField(field, 'Портал клиента 2'); return true; })()",
+          "wait": 200
+        },
+        {
+          "action": {
+            "name": "save-group"
+          },
+          "target": "#p",
+          "wait": 600,
+          "expect": {
+            "returns": {
+              "outcome": "applied"
+            },
+            "events": [
+              {
+                "name": "sf-view-properties-saved",
+                "count": 1,
+                "detail": {
+                  "id": "r1",
+                  "revision": "2"
+                }
+              }
+            ],
+            "values": {
+              "#p.revision": "2"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "p2-failed",
+      "title": "a record the host does not know is the fact sf-property-view-failed {reason: record-unknown}",
+      "covers": "events.failed",
+      "steps": [
+        {
+          "script": "(() => { window.__failed = []; document.getElementById('missing').addEventListener('sf-view-properties-failed', (event) => window.__failed.push(event.detail)); return true; })()",
+          "wait": 10
+        },
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 900,
+          "check": "window.__failed.length === 1 && window.__failed[0].reason === 'record-unknown' && window.__failed[0].message === 'Запись не найдена'"
+        }
+      ]
+    },
+    {
+      "id": "p3-panel-hidden",
+      "title": "a panel shows while it is not hidden: hidden closes its drawer, removing hidden opens it again (one element)",
+      "covers": "settings.open, hidden (simai/ui-pro#4 item 2, §7.2.2)",
+      "steps": [
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 1000,
+          "check": "document.querySelector('#panel sf-drawer')?.hasAttribute('open') === true"
+        },
+        {
+          "script": "(document.getElementById('panel').hidden = true, true)",
+          "wait": 600,
+          "check": "document.querySelector('#panel sf-drawer')?.hasAttribute('open') === false"
+        },
+        {
+          "script": "(document.getElementById('panel').hidden = false, true)",
+          "wait": 600,
+          "check": "document.querySelector('#panel sf-drawer')?.hasAttribute('open') === true"
+        },
+        {
+          "script": "(document.getElementById('panel').setAttribute('open', 'false'), true)",
+          "wait": 600,
+          "check": "document.querySelector('#panel sf-drawer')?.hasAttribute('open') === false"
+        }
+      ]
+    },
+    {
+      "id": "p4-close-refused",
+      "title": "close is a cancelable request: a listener refuses it and close-panel answers refused",
+      "covers": "events.close cancelable (vocabulary §5 close, §19.3), actions.close-panel",
+      "steps": [
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 900
+        },
+        {
+          "script": "(document.getElementById('p').addEventListener('sf-view-properties-close', (event) => event.preventDefault()), true)",
+          "wait": 10
+        },
+        {
+          "action": {
+            "name": "close-panel",
+            "with": {
+              "reason": "close"
+            }
+          },
+          "target": "#p",
+          "wait": 200,
+          "expect": {
+            "returns": {
+              "outcome": "refused"
+            },
+            "events": [
+              {
+                "name": "sf-view-properties-close",
+                "count": 1,
+                "detail": {
+                  "reason": "close"
+                }
+              }
+            ]
+          }
+        }
+      ]
+    },
+    {
+      "id": "p5-skeleton-tabs",
+      "title": "while the record is on its way the section tabs' strip is drawn with the skeleton",
+      "covers": "simai/ui-pro#3 items 2-3, presentation.skeleton",
+      "steps": [
+        {
+          "script": "(() => { window.__never = true; return true; })()",
+          "wait": 10
+        },
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 600,
+          "check": "Boolean(document.querySelector('#p [data-sf-skeleton=\"tabs\"]')) && document.getElementById('p').getAttribute('data-state') === 'loading'"
+        }
+      ]
+    },
+    {
+      "id": "p6-full",
+      "title": "full draws a panel in place: no drawer while full",
+      "covers": "settings.full",
+      "steps": [
+        {
+          "script": "(() => { window.__calls = []; let revision = 1; const record = (id) => ({record_id: id, collection: 'workbench.solutions', revision: String(revision), label: 'Портал клиента', editable: true, actions: ['record.edit'], address: '/admin/r1', sections: [{key: 'main', label: 'Основное', groups: [{key: 'g', label: 'Главное', columns: 1, fields: [{key: 'title', label: 'Название', propertyType: 'string', width: 'full', value: 'Портал клиента'}]}]}, {key: 'links', label: 'Связи', groups: [{key: 'l', label: 'Ссылки', columns: 1, fields: [{key: 'site', label: 'Сайт', propertyType: 'string', width: 'full', value: 'simai.io'}]}]}]}); const port = {id: 'simai.property-view-port', version: '1.14.0', capabilities: [], raise: async (intent, payload) => { window.__calls.push(intent); if (window.__never) return new Promise(() => {}); if (intent === 'record.load') return payload.record_id === 'r1' ? {answer: 'applied', record: record('r1')} : {answer: 'refused', reason: 'record-unknown', message: 'Запись не найдена'}; if (intent === 'group.save') { revision += 1; return {answer: 'applied', revision: String(revision), record: record('r1')}; } return {answer: 'unavailable', reason: 'capability-not-provided'}; } }; document.querySelectorAll('sf-view-properties').forEach((one) => one.setHostPort(port)); return true; })()",
+          "wait": 1000
+        },
+        {
+          "script": "(document.getElementById('panel').full = true, true)",
+          "wait": 600,
+          "check": "!document.querySelector('#panel sf-drawer[open]') && Boolean(document.querySelector('#panel .sf-property-view-layout'))"
+        }
+      ]
+    }
+  ]
+}

package/dist/smart/view-properties/skeleton.html

@@ -0,0 +1,13 @@
+<!-- sf-view-properties skeleton (standard simai.smart-component 1.3.8 §5.4, item 25; simai/ui-pro#3):
+     settings only, no data and no script. It is the element's own loading render
+     (js/templates/default.js renderLoading) as a server prints it: the strip of
+     section tabs, drawn by the stylesheet only for sections-as tabs in the wide
+     arrangement, and three group cards in the shape a group read by itself takes
+     until its fields come (port 1.15.0 group-load): a title bar and a line per
+     field. The element keeps it until the record comes (sfAwaitingData). -->
+<div class="sf-property-view-tabs sf-property-view-tabs--skeleton flex items-cross-center gap-2" aria-hidden="true" data-sf-skeleton="tabs" data-sections-as="{{sections-as}}" data-sf-static><div class="flex-none" style="inline-size: 6rem"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-3/4"></div></div></div><div class="flex-none" style="inline-size: 6rem"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-2/5"></div></div></div><div class="flex-none" style="inline-size: 6rem"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/3"></div></div></div></div>
+<div class="sf-property-view-loading flex flex-col gap-4" data-state="loading" data-sf-static>
+  <section class="sf-property-view-group bg-surface-0 flex flex-col gap-2" aria-busy="true"><header class="sf-property-view-group-header flex items-cross-center content-main-between gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/3"></div></div></div></header><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-2/3"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/2"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-3/4"></div></div></section>
+  <section class="sf-property-view-group bg-surface-0 flex flex-col gap-2" aria-busy="true"><header class="sf-property-view-group-header flex items-cross-center content-main-between gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-2/3"></div></div></div></header><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/2"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-3/4"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-2/5"></div></div></section>
+  <section class="sf-property-view-group bg-surface-0 flex flex-col gap-2" aria-busy="true"><header class="sf-property-view-group-header flex items-cross-center content-main-between gap-2"><div class="flex-1"><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/2"></div></div></div></header><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-3/4"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-2/5"></div></div><div class="sf-skeleton sf-skeleton--animation-pulse" aria-hidden="true"><div class="sf-skeleton-text sf-skeleton-text--size-1 w-1/3"></div></div></section>
+  <span class="sr-only" role="status"></span></div>