@simai-studio/ui 0.0.0-stage → 5.20261019.1559

package/distr/smart/avatar/js/avatar.min.js

@@ -0,0 +1,93 @@
+(()=>{"use strict";var t={"98e26702f55a"(t,e,a){function i(){const t=globalThis.SF=globalThis.SF||{};return t.__deprecationNotes instanceof Map||Object.defineProperty(t,"__deprecationNotes",{value:new Map,configurable:!0}),t.__deprecationNotes}function r({component:t="",kind:e="attribute",attribute:a="",from:r,to:s=null}={}){if(!r)return;const n=[t,e,a,r].join("|"),l=i(),o=l.get(n);if(o)o.count+=1;else if(l.set(n,{component:t,kind:e,attribute:a,from:r,to:s,count:1}),function(){const t=globalThis.document?.documentElement;return"warn"===t?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const i=t?`${t}: `:"",n="value"===e?`${a}="${r}"`:`${e} ${r}`;globalThis.console?.warn?.(`[Simai Framework] ${i}${n} is a legacy name${s?`; write ${s}`:""}. See contracts/changes/journal.json.`)}}if(a.d(e,{id:()=>o}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const t=globalThis.SF.deprecations||{};t.list=function(){return[...i().values()].map(t=>({...t}))},t.clear=function(){i().clear()},t.note=r,globalThis.SF.deprecations=t}const s=Object.freeze(["1/2","1","2"]),n=Object.freeze({"1/3":"1/2",3:"2"}),l=new Set;function o(t,e="field",a="1"){const i=String(t??"").trim().toLowerCase();if(s.includes(i))return i;if(Object.hasOwn(n,i)){const t=n[i];r({component:e,kind:"value",attribute:"size",from:i,to:t});const a=`${e}:${i}`;return l.has(a)||"undefined"==typeof console||(l.add(a),console.warn(`[Simai Framework] ${e}: size ${i} is retired for form fields; rendering size ${t}.`)),t}return a}},f92e47b164fa(t,e,a){a.a(t,async(t,e)=>{try{var i=a("fbe0570fcc69"),r=a("98e26702f55a"),s=a("c0c2069e1237"),n=a("602783801435"),l=a("63cd440fc8e3"),o=a("cbce4a5232a6"),c=a("0d662e4d7d63"),d=t([i,s,n,l,c]);[i,s,n,l,c]=d.then?(await d)():d;var u=a.n(i);const h={en:{ariaLabel:"Avatar"},ru:{ariaLabel:"Аватар"}},f={default:n.E,label:l.d,card:s.$};class m extends(u()){static get props(){return{templateName:{attribute:"template",default:"default"},size:{default:"1"},line:{default:""},shape:{default:"circle"},imageUrl:{default:""},imageAlt:{default:""},noWrap:{type:Boolean,default:!1},text:{default:""},status:{default:"none"},ariaLabel:{default:""},title:{default:""},description:{default:""},meta:{default:""},metaIcon:{default:""},cardVariant:{default:"square"},disabled:{type:Boolean,default:!1}}}constructor(){super()}get templateName(){return this.getAttribute("template")||"default"}set templateName(t){this.setAttribute("template",t||"default")}get size(){return this.getAttribute("size")||"1"}get line(){const t=this.getAttribute("line")||"";return t?(0,r.id)(t,"sf-avatar line"):""}set size(t){this.setAttribute("size",t)}get shape(){return this.getAttribute("shape")||"circle"}set shape(t){this.setAttribute("shape",t||"circle")}get imageUrl(){return this.getAttribute("image-url")||""}set imageUrl(t){null!=t&&""!==t?this.setAttribute("image-url",t):this.removeAttribute("image-url")}get imageAlt(){return this.getAttribute("image-alt")||""}set imageAlt(t){null!=t&&""!==t?this.setAttribute("image-alt",t):this.removeAttribute("image-alt")}get text(){return this.getAttribute("text")||""}set text(t){null!=t&&""!==t?this.setAttribute("text",t):this.removeAttribute("text")}get status(){return this.getAttribute("status")||"none"}set status(t){this.setAttribute("status",t||"none")}get ariaLabel(){return this.getAttribute("aria-label")||(0,c.pageText)(h,"ariaLabel",this)}set ariaLabel(t){t?this.setAttribute("aria-label",t):this.removeAttribute("aria-label")}get title(){return this.getAttribute("title")||""}set title(t){t?this.setAttribute("title",t):this.removeAttribute("title")}get description(){return this.getAttribute("description")||""}set description(t){t?this.setAttribute("description",t):this.removeAttribute("description")}get meta(){return this.getAttribute("meta")||""}set meta(t){t?this.setAttribute("meta",t):this.removeAttribute("meta")}get metaIcon(){return this.getAttribute("meta-icon")||""}set metaIcon(t){t?this.setAttribute("meta-icon",t):this.removeAttribute("meta-icon")}get cardVariant(){return this.getAttribute("card-variant")||"square"}set cardVariant(t){this.setAttribute("card-variant",t||"square")}get disabled(){return this.getBooleanAttr("disabled",!1)}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isImage(){return!!this.imageUrl}get isText(){return!this.isImage&&!!this.displayText}get displayText(){return this.text?this.text:this.isImage?"":(0,o.I)(this.title||(this.hasAttribute("aria-label")?this.ariaLabel:""))}templateContext(){const t=this.getPropsContext();return this.createTemplateContext({...t,ariaLabel:this.getAttribute("aria-label")||(0,c.pageText)(h,"ariaLabel",this),component:this,isImage:this.isImage,isText:this.isText,text:this.displayText,rootClass:this.getRootClass(),rootStyle:this.getRootStyle()})}hasBuiltInTemplate(t=this.templateName){return Object.prototype.hasOwnProperty.call(f,t)}templateRenderer(){return f[this.templateName]||f.default}template(){return this.templateRenderer()(this.templateContext())}resolveUpdateMode(t=[]){const e=["disabled"];return t.length>0&&t.every(t=>e.includes(t))?"dom":"lit"}updateDom(t=[]){const e=this.querySelector(".sf-avatar");return!!e&&(t.includes("aria-label")&&e.setAttribute("aria-label",this.ariaLabel),t.includes("disabled")&&(e.disabled=this.disabled),!0)}get value(){return{template:this.templateName,size:this.size,line:this.line,shape:this.shape,imageUrl:this.imageUrl,imageAlt:this.imageAlt,text:this.text,status:this.status,ariaLabel:this.ariaLabel,title:this.title,description:this.description,meta:this.meta,metaIcon:this.metaIcon,cardVariant:this.cardVariant,disabled:this.disabled}}set value(t){this.setValueAttributes(t)}}m.define("sf-avatar"),e()}catch(t){e(t)}})},c0c2069e1237(t,e,a){a.a(t,async(t,i)=>{try{a.d(e,{$:()=>l});var r=a("ddf1cdb42ecc"),s=t([r]),n=s.then?(await s)():s;r=n[0];function l(t){const e=t.cardVariant||"square",a=t.imageAlt||"";return r.html`
+    <div
+      class="sf-avatar-card sf-avatar-card--${e} sf-avatar-card-${e} flex flex-col ${t.rootClass||""}"
+      style=${t.rootStyle||""}
+    >
+      <div class="sf-avatar-card-image flex flex-col">
+        ${t.imageUrl?r.html`<img src=${t.imageUrl} alt=${a} />`:r.html`<div
+              class="sf-avatar-card-placeholder bg-surface-container w-full h-full"
+              aria-hidden="true"
+            ></div>`}
+      </div>
+      <div class="sf-avatar-card-content flex-1 flex flex-col">
+        ${t.title?r.html`<div class="sf-avatar-card-title">${t.title}</div>`:""}
+        ${t.meta||t.description?r.html`
+              <div class="sf-avatar-card-row flex flex-row items-center">
+                ${t.metaIcon?r.html`<i class="sf-icon">${t.metaIcon}</i>`:""}
+                <span>${t.meta||t.description}</span>
+              </div>
+            `:""}
+      </div>
+    </div>
+  `}i()}catch(o){i(o)}})},602783801435(t,e,a){a.a(t,async(t,i)=>{try{a.d(e,{E:()=>l});var r=a("4f7ae7ea9e1c"),s=t([r]),n=s.then?(await s)():s;function l(t){return(0,r.KI)(t)}r=n[0],i()}catch(o){i(o)}})},"63cd440fc8e3"(t,e,a){a.a(t,async(t,i)=>{try{a.d(e,{d:()=>l});var r=a("ddf1cdb42ecc"),s=a("4f7ae7ea9e1c"),n=t([r,s]);[r,s]=n.then?(await n)():n;function l(t){return r.html`
+    <div
+      class="sf-avatar-label-group sf-avatar-label-group--size-${t.size} flex items-cross-center ${t.rootClass||""}"
+      style=${t.rootStyle||""}
+    >
+      ${(0,s.KI)(t,{includeRootClass:!1,includeRootStyle:!1})}
+      <div class="sf-avatar-label-group-container flex flex-col">
+        ${t.title?r.html`<div class="sf-avatar-label-group-title${t.noWrap?" overflow-hidden wrap-none t-ellipsis":""}">
+              ${t.title}
+            </div>`:""}
+        ${t.description?r.html`<div class="sf-avatar-label-group-text${t.noWrap?" overflow-hidden wrap-none t-ellipsis":""}">
+              ${t.description}
+            </div>`:""}
+      </div>
+    </div>
+  `}i()}catch(o){i(o)}})},"4f7ae7ea9e1c"(t,e,a){a.a(t,async(t,i)=>{try{a.d(e,{KI:()=>f});var r=a("ddf1cdb42ecc"),s=t([r]),n=s.then?(await s)():s;r=n[0];function l(t){return r.html`<span aria-hidden="true"
+            class="sf-avatar-badge sf-avatar-badge--size-${t.size} sf-avatar-badge--company overflow-hidden flex absolute bottom-0 inline-end-0"
+    >
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M56 0H0V55.9998H56V0Z" fill="#E81123"></path>
+      <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.12891 28.0004L23.1261 12.9463L27.9999 17.8386L17.8754 28.0016L27.998 38.1627L23.1254 43.0538L8.12891 28.0004Z"
+              fill="#F7F7F7"
+      ></path>
+      <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M47.8706 28.0004L32.8735 12.9463L27.9996 17.8386L38.1241 28.0016L28.0015 38.1627L32.8741 43.0538L47.8706 28.0004Z"
+              fill="#F7F7F7"
+      ></path>
+    </svg>
+  </span>`}function o(t){return r.html`
+        <span aria-hidden="true"
+                class="sf-avatar-badge sf-avatar-badge--size-${t.size} sf-avatar-badge--verified overflow-hidden flex absolute bottom-0 inline-end-0"
+        >
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#sf-avatar-verified-badge)">
+          <path
+                  d="M15.4447 3.54197C15.6347 4.00136 15.9993 4.36651 16.4584 4.55716L18.0683 5.22398C18.5277 5.41428 18.8927 5.7793 19.083 6.23872C19.2733 6.69815 19.2733 7.21436 19.083 7.67379L18.4167 9.28249C18.2263 9.74212 18.226 10.2589 18.4173 10.7183L19.0824 12.3265C19.1768 12.554 19.2254 12.7979 19.2254 13.0443C19.2254 13.2906 19.1769 13.5345 19.0827 13.7621C18.9884 13.9897 18.8502 14.1965 18.676 14.3706C18.5018 14.5448 18.295 14.6829 18.0674 14.7771L16.4587 15.4434C15.9993 15.6334 15.6341 15.998 15.4435 16.4571L14.7767 18.067C14.5864 18.5264 14.2213 18.8914 13.7619 19.0817C13.3025 19.272 12.7863 19.272 12.3269 19.0817L10.7181 18.4153C10.2587 18.2255 9.74268 18.2259 9.28353 18.4164L7.67367 19.0823C7.2145 19.2722 6.69874 19.272 6.23969 19.0818C5.78063 18.8917 5.41582 18.5271 5.22539 18.0682L4.55837 16.4578C4.36841 15.9985 4.00381 15.6333 3.5447 15.4427L1.93484 14.7758C1.47561 14.5856 1.11071 14.2208 0.920338 13.7617C0.729967 13.3025 0.729708 12.7865 0.91962 12.3272L1.58597 10.7185C1.7758 10.259 1.77541 9.74301 1.58489 9.28386L0.919499 7.67284C0.82516 7.44529 0.776583 7.20139 0.776543 6.95506C0.776504 6.70873 0.825003 6.4648 0.919269 6.23723C1.01354 6.00965 1.15172 5.80287 1.32593 5.62872C1.50014 5.45457 1.70696 5.31645 1.93457 5.22225L3.54327 4.55591C4.00226 4.36612 4.3672 4.00197 4.55798 3.5434L5.22481 1.93354C5.41511 1.47411 5.78012 1.10909 6.23955 0.918793C6.69898 0.728492 7.21519 0.728492 7.67461 0.918793L9.28332 1.58514C9.74276 1.77497 10.2588 1.77459 10.7179 1.58406L12.3285 0.919827C12.7878 0.729632 13.3039 0.729671 13.7633 0.919935C14.2226 1.1102 14.5876 1.47511 14.7779 1.93442L15.4449 3.54475L15.4447 3.54197Z"
+                  fill="#005BBE"
+          ></path>
+          <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M13.9166 7.37864C14.0502 7.16879 14.0949 6.91446 14.041 6.6716C13.9871 6.42874 13.8389 6.21724 13.6291 6.08364C13.4192 5.95004 13.1649 5.90527 12.922 5.95919C12.6792 6.0131 12.4677 6.16129 12.3341 6.37114L8.66283 12.1399L6.98283 10.0399C6.82751 9.84562 6.60138 9.72101 6.35418 9.69346C6.10699 9.66592 5.85897 9.7377 5.6647 9.89302C5.47043 10.0483 5.34582 10.2745 5.31827 10.5217C5.29073 10.7689 5.36251 11.0169 5.51783 11.2111L8.01783 14.3361C8.111 14.4528 8.23066 14.5454 8.36687 14.6065C8.50308 14.6675 8.65189 14.6951 8.80093 14.6871C8.94998 14.679 9.09494 14.6355 9.22376 14.5601C9.35258 14.4847 9.46154 14.3796 9.54158 14.2536L13.9166 7.37864V7.37864Z"
+                  fill="white"
+          ></path>
+        </g>
+        <defs>
+          <clipPath id="sf-avatar-verified-badge">
+            <rect width="20" height="20" fill="white"></rect>
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+    `}function c(t,e={}){const a=!1!==e.includeRootClass,i=["sf-avatar","transition","flex-none",`sf-avatar--size-${t.size}`,t.line?`sf-avatar--line-${t.line}`:"","inline-flex"].filter(Boolean);return t.isImage&&i.push("items-cross-center","content-main-center"),t.isText&&i.push("sf-avatar--text","items-cross-center","content-main-center"),t.isImage||t.isText||i.push("sf-avatar--placeholder","items-cross-center","content-main-center"),"none"!==t.status&&i.push("relative"),"square"===t.shape&&i.push("sf-avatar--square"),"online"===t.status&&i.push("sf-avatar--status-icon-online-indicator"),a&&t.rootClass&&i.push(t.rootClass),i.join(" ")}function d(t){return t.isText?r.html`<span class="sf-avatar-text">${t.text}</span>`:t.isImage?r.html`<img class="sf-avatar-image" src=${t.imageUrl} alt="" />`:r.html`<i class="sf-icon" aria-hidden="true">person</i>`}function u(t){if(t.component?.hasSlotContent?.("online-indicator"))return t.component.getSlotContent("online-indicator");if(!["online","offline"].includes(t.status))return r.nothing;return r.html`
+        <span aria-hidden="true"
+                class="sf-online-indicator sf-online-indicator--${t.status} ${{"1/4":"sf-online-indicator--size-1/4","1/3":"sf-online-indicator--size-1/3","1/2":"sf-online-indicator--size-1/2",1:"sf-online-indicator--size-1",2:"sf-online-indicator--size-2",3:"sf-online-indicator--size-3"}[t.size]||""} flex absolute bottom-0 inline-end-0"
+        ></span>
+    `}function h(t){switch(t.status){case"company":return t.component?.hasSlotContent?.("company-badge")?t.component.getSlotContent("company-badge"):l(t);case"verified":return t.component?.hasSlotContent?.("verified-badge")?t.component.getSlotContent("verified-badge"):o(t);default:return u(t)}}function f(t,e={}){return r.html`
+        <button
+                class="${c(t,e)}"
+                style=${!1===e.includeRootStyle?"":t.rootStyle||""}
+                aria-label=${t.ariaLabel}
+                ?disabled=${t.disabled}
+                type="button"
+        >
+            ${d(t)} ${h(t)}
+        </button>
+    `}i()}catch(m){i(m)}})},cbce4a5232a6(t,e,a){a.d(e,{I:()=>r});const i=new Set(["а","без","в","во","для","до","за","из","из-за","из-под","и","к","ко","между","на","над","о","об","от","по","под","при","про","с","со","у","через","the","a","an","and","for","from","in","of","on","to"]);function r(t="",e={}){const{maxLetters:a=2,skipWords:r=i}=e,s=function(t=""){return String(t||"").trim().split(/[\s/|]+/).map(t=>t.replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu,"")).filter(Boolean)}(t),n=s.filter((t,e)=>0===e||!r.has(String(t).toLowerCase()));return n.length?n.length>1?n.slice(0,a).map(t=>Array.from(t)[0]||"").join("").toUpperCase():Array.from(n[0]).slice(0,1).join("").toUpperCase():""}},ddf1cdb42ecc(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(t){t.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(t=>globalThis.addEventListener("sf-runtime-ready",()=>t(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const e={};function a(i){const r=e[i];if(void 0!==r)return r.exports;const s=e[i]={exports:{}};return t[i](s,s.exports,a),s.exports}(()=>{const t="function"==typeof Symbol,e=t?Symbol("webpack queues"):"__webpack_queues__",i=t?Symbol("webpack exports"):"__webpack_exports__",r=t?Symbol("webpack error"):"__webpack_error__",s=t=>{t?.d<1&&(t.d=1,t.forEach(t=>t.r--),t.forEach(t=>t.r--?t.r++:t()))};a.a=(t,a,n)=>{let l;n&&((l=[]).d=-1);const o=new Set,c=t.exports;let d,u,h;const f=new Promise((t,e)=>{h=e,u=t});f[i]=c,f[e]=t=>(l&&t(l),o.forEach(t),f.catch(t=>{})),t.exports=f;a(t=>{let a;d=(t=>t.map(t=>{if(null!==t&&"object"==typeof t){if(t[e])return t;if(t.then){const a=[];a.d=0,t.then(t=>{n[i]=t,s(a)},t=>{n[r]=t,s(a)});const n={};return n[e]=t=>t(a),n}}const a={};return a[e]=t=>{},a[i]=t,a}))(t);const n=()=>d.map(t=>{if(t[r])throw t[r];return t[i]}),c=new Promise(t=>{a=()=>t(n),a.r=0;const i=t=>t!==l&&!o.has(t)&&(o.add(t),t&&!t.d&&(a.r++,t.push(a)));d.map(t=>t[e](i))});return a.r?c:n()},t=>(t?h(f[r]=t):u(c),s(l))),l?.d<0&&(l.d=0)}})(),a.n=t=>{const e=t&&t.__esModule?()=>t.default:()=>t;return a.d(e,{a:e}),e},a.d=(t,e)=>{if(Array.isArray(e))for(var i=0;i<e.length;){var r=e[i++],s=e[i++];a.o(t,r)?0===s&&i++:0===s?Object.defineProperty(t,r,{enumerable:!0,value:e[i++]}):Object.defineProperty(t,r,{enumerable:!0,get:s})}else for(var r in e)a.o(e,r)&&!a.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);a("f92e47b164fa")})();

package/distr/smart/avatar/smart.manifest.json

@@ -0,0 +1,263 @@
+{
+  "schema_version": 2,
+  "id": "smart.avatar",
+  "version": "1.0.0",
+  "title": "Avatar",
+  "summary": "Shows a person or organisation as a photo or initials, with an optional availability or verification mark. The default and label templates render a native button whose aria-label names its action; the card template is static and adds a title, description and meta line.",
+  "kind": "smart",
+  "reuse_mode": "whole",
+  "lifecycle": "experimental",
+  "tags": [
+    "avatar"
+  ],
+  "capabilities": [
+    "render",
+    "theme",
+    "responsive"
+  ],
+  "custom_element": "sf-avatar",
+  "templates": [
+    "default",
+    "label",
+    "card"
+  ],
+  "exported_parts": [],
+  "composition": {
+    "uses": [],
+    "public_parts": []
+  },
+  "inputs": {
+    "type": "object",
+    "properties": {
+      "template": {
+        "type": "string",
+        "default": "default"
+      },
+      "size": {
+        "type": "string",
+        "default": "1",
+        "enum": [
+          "1/4",
+          "1/3",
+          "1/2",
+          "1",
+          "2",
+          "3"
+        ]
+      },
+      "line": {
+        "type": "string",
+        "default": "",
+        "enum": [
+          "",
+          "1/2",
+          "1",
+          "2"
+        ],
+        "description": "Takes the text line of this form size instead of a control height, for an avatar beside a label in a row or a table cell."
+      },
+      "shape": {
+        "type": "string",
+        "default": "circle",
+        "enum": [
+          "circle",
+          "square"
+        ]
+      },
+      "image-url": {
+        "type": "string",
+        "default": ""
+      },
+      "image-alt": {
+        "type": "string",
+        "default": ""
+      },
+      "no-wrap": {
+        "type": "boolean",
+        "default": false
+      },
+      "text": {
+        "type": "string",
+        "default": ""
+      },
+      "status": {
+        "type": "string",
+        "default": "none",
+        "enum": [
+          "none",
+          "online",
+          "offline",
+          "company",
+          "verified"
+        ]
+      },
+      "aria-label": {
+        "type": "string",
+        "default": "",
+        "description": "Empty: the text of the page's language (\"Avatar\" in English)."
+      },
+      "title": {
+        "type": "string",
+        "default": ""
+      },
+      "description": {
+        "type": "string",
+        "default": ""
+      },
+      "meta": {
+        "type": "string",
+        "default": ""
+      },
+      "meta-icon": {
+        "type": "string",
+        "default": ""
+      },
+      "card-variant": {
+        "type": "string",
+        "default": "square",
+        "enum": [
+          "square",
+          "portrait"
+        ]
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false
+      }
+    },
+    "additionalProperties": false
+  },
+  "item_contract": {},
+  "contracts": {},
+  "methods": {},
+  "events": {},
+  "state": {
+    "machines": {},
+    "visual_states": [
+      "default",
+      "disabled"
+    ]
+  },
+  "persistence": {
+    "mode": "none",
+    "source_of_truth": "component",
+    "network_owner": "none",
+    "revision_field": null
+  },
+  "ownership": {
+    "source": "simai/ui-source",
+    "data": "fixture",
+    "effects": "component",
+    "forbidden_client_responsibilities": [
+      "backend access decisions",
+      "host route invention"
+    ]
+  },
+  "security": {
+    "permissions_owner": "none",
+    "untrusted_inputs": [
+      "props",
+      "children"
+    ],
+    "network_policy": "deny"
+  },
+  "accessibility": {
+    "role": null,
+    "accessible_name": "recommended",
+    "keyboard": [
+      "Tab"
+    ],
+    "focus": "Keep visible focus on the active control."
+  },
+  "presentation": {
+    "themes": [
+      "light",
+      "dark"
+    ],
+    "locales": [
+      "ru",
+      "en"
+    ],
+    "responsive": [
+      "desktop",
+      "mobile"
+    ],
+    "skeleton": {
+      "shape": "none",
+      "while_loading": "none"
+    }
+  },
+  "adapter": {
+    "kind": "generic",
+    "protocol": "simai.smart-studio-adapter.v1",
+    "module": null
+  },
+  "artifacts": {
+    "fixtures": [
+      "studio.fixture.json"
+    ],
+    "scenarios": [
+      "studio.scenario.json"
+    ]
+  },
+  "readiness": {
+    "level": "described",
+    "required_checks": [
+      "manifest",
+      "fixture",
+      "runtime-upgrade",
+      "scenario-smoke"
+    ]
+  },
+  "compatibility": {
+    "contract_schema": {
+      "id": "https://simai.io/contracts/smart-component-manifest.v2.schema.json",
+      "version": 2
+    },
+    "runtime_pair": {
+      "ui_revision": "094f3d549aa7921d2d7f8773972c73711dd6a72e",
+      "ui_smart_revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c"
+    },
+    "aliases": [],
+    "deprecations": [],
+    "replacement": null,
+    "migrations": []
+  },
+  "provenance": {
+    "source_repository": "simai/ui-source",
+    "source_revision": "d73527c92056a684b5f34a46ec7315e1ded9be19",
+    "source_artifacts": [
+      {
+        "path": "src/smart/avatar/index.js",
+        "sha256": "a1260edefb36506fc80bc1de0872f30b634c3385e9b7f1522323f29fa95212a3"
+      }
+    ],
+    "generated_runtime": [
+      {
+        "repository": "simai/ui-smart",
+        "revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c",
+        "path": "smart/avatar/js/avatar.js",
+        "sha256": "86b814508e7f41ffd8b4c501651d04dcfc19cb8b964609a15d66ae78e78fffcb"
+      }
+    ]
+  },
+  "ai_guidance": {
+    "use_when": "Use sf-avatar when the interface needs the avatar behavior.",
+    "do_not": [
+      "Do not copy generated ui-smart code",
+      "Do not move host data or access decisions into the component"
+    ],
+    "required_reads": [
+      "inputs",
+      "methods",
+      "events",
+      "ownership",
+      "provenance"
+    ],
+    "minimal_example": "<sf-avatar></sf-avatar>",
+    "owner_commands": [
+      "npm run contract:verify",
+      "npm test"
+    ]
+  }
+}

package/distr/smart/avatar/studio.fixture.json

@@ -0,0 +1,18 @@
+{
+  "schema": "simai.smart-component-fixture.v2",
+  "id": "reference",
+  "component": "smart.avatar",
+  "title": "Avatar reference",
+  "summary": "Deterministic reference fixture for sf-avatar.",
+  "locale": "ru",
+  "props": {
+    "template": "label",
+    "text": "AZ",
+    "title": "Анна Захарова",
+    "description": "Дизайнер продукта",
+    "status": "online",
+    "size": "2"
+  },
+  "children": [],
+  "state": "default"
+}

package/distr/smart/avatar/studio.scenario.json

@@ -0,0 +1,22 @@
+{
+  "schema": "simai.smart-component-scenario.v1",
+  "id": "smoke",
+  "component": "smart.avatar",
+  "fixture": "reference",
+  "viewport": "desktop",
+  "actions": [],
+  "assertions": [
+    {
+      "type": "upgraded"
+    },
+    {
+      "type": "visible"
+    },
+    {
+      "type": "no-console-error"
+    },
+    {
+      "type": "no-network"
+    }
+  ]
+}

package/distr/smart/avatar/template/card.js

@@ -0,0 +1,38 @@
+import { html } from "lit";
+
+export function renderCardTemplate(context) {
+  const variant = context.cardVariant || "square";
+  const imageAlt = context.imageAlt || "";
+
+  return html`
+    <div
+      class="sf-avatar-card sf-avatar-card--${variant} sf-avatar-card-${variant} flex flex-col ${context.rootClass ||
+      ""}"
+      style=${context.rootStyle || ""}
+    >
+      <div class="sf-avatar-card-image flex flex-col">
+        ${context.imageUrl
+          ? html`<img src=${context.imageUrl} alt=${imageAlt} />`
+          : html`<div
+              class="sf-avatar-card-placeholder bg-surface-container w-full h-full"
+              aria-hidden="true"
+            ></div>`}
+      </div>
+      <div class="sf-avatar-card-content flex-1 flex flex-col">
+        ${context.title
+          ? html`<div class="sf-avatar-card-title">${context.title}</div>`
+          : ""}
+        ${context.meta || context.description
+          ? html`
+              <div class="sf-avatar-card-row flex flex-row items-center">
+                ${context.metaIcon
+                  ? html`<i class="sf-icon">${context.metaIcon}</i>`
+                  : ""}
+                <span>${context.meta || context.description}</span>
+              </div>
+            `
+          : ""}
+      </div>
+    </div>
+  `;
+}

package/distr/smart/avatar/template/default.js

@@ -0,0 +1,5 @@
+import { avatarButton } from "./shared";
+
+export function renderDefaultTemplate(context) {
+  return avatarButton(context);
+}

package/distr/smart/avatar/template/label.js

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import { avatarButton } from "./shared";
+
+export function renderLabelTemplate(context) {
+  return html`
+    <div
+      class="sf-avatar-label-group sf-avatar-label-group--size-${context.size} flex items-cross-center ${context.rootClass ||
+      ""}"
+      style=${context.rootStyle || ""}
+    >
+      ${avatarButton(context, {
+        includeRootClass: false,
+        includeRootStyle: false,
+      })}
+      <div class="sf-avatar-label-group-container flex flex-col">
+        ${context.title
+          ? html`<div class="sf-avatar-label-group-title${context.noWrap ? ' overflow-hidden wrap-none t-ellipsis' : ''}">
+              ${context.title}
+            </div>`
+          : ""}
+        ${context.description
+          ? html`<div class="sf-avatar-label-group-text${context.noWrap ? ' overflow-hidden wrap-none t-ellipsis' : ''}">
+              ${context.description}
+            </div>`
+          : ""}
+      </div>
+    </div>
+  `;
+}

package/distr/smart/avatar/template/shared.js

@@ -0,0 +1,173 @@
+import {html, nothing} from "lit";
+
+function getCompanyBadge(context) {
+    return html`<span aria-hidden="true"
+            class="sf-avatar-badge sf-avatar-badge--size-${context.size} sf-avatar-badge--company overflow-hidden flex absolute bottom-0 inline-end-0"
+    >
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M56 0H0V55.9998H56V0Z" fill="#E81123"></path>
+      <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8.12891 28.0004L23.1261 12.9463L27.9999 17.8386L17.8754 28.0016L27.998 38.1627L23.1254 43.0538L8.12891 28.0004Z"
+              fill="#F7F7F7"
+      ></path>
+      <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M47.8706 28.0004L32.8735 12.9463L27.9996 17.8386L38.1241 28.0016L28.0015 38.1627L32.8741 43.0538L47.8706 28.0004Z"
+              fill="#F7F7F7"
+      ></path>
+    </svg>
+  </span>`;
+}
+
+function getVerifiedBadge(context) {
+    return html`
+        <span aria-hidden="true"
+                class="sf-avatar-badge sf-avatar-badge--size-${context.size} sf-avatar-badge--verified overflow-hidden flex absolute bottom-0 inline-end-0"
+        >
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#sf-avatar-verified-badge)">
+          <path
+                  d="M15.4447 3.54197C15.6347 4.00136 15.9993 4.36651 16.4584 4.55716L18.0683 5.22398C18.5277 5.41428 18.8927 5.7793 19.083 6.23872C19.2733 6.69815 19.2733 7.21436 19.083 7.67379L18.4167 9.28249C18.2263 9.74212 18.226 10.2589 18.4173 10.7183L19.0824 12.3265C19.1768 12.554 19.2254 12.7979 19.2254 13.0443C19.2254 13.2906 19.1769 13.5345 19.0827 13.7621C18.9884 13.9897 18.8502 14.1965 18.676 14.3706C18.5018 14.5448 18.295 14.6829 18.0674 14.7771L16.4587 15.4434C15.9993 15.6334 15.6341 15.998 15.4435 16.4571L14.7767 18.067C14.5864 18.5264 14.2213 18.8914 13.7619 19.0817C13.3025 19.272 12.7863 19.272 12.3269 19.0817L10.7181 18.4153C10.2587 18.2255 9.74268 18.2259 9.28353 18.4164L7.67367 19.0823C7.2145 19.2722 6.69874 19.272 6.23969 19.0818C5.78063 18.8917 5.41582 18.5271 5.22539 18.0682L4.55837 16.4578C4.36841 15.9985 4.00381 15.6333 3.5447 15.4427L1.93484 14.7758C1.47561 14.5856 1.11071 14.2208 0.920338 13.7617C0.729967 13.3025 0.729708 12.7865 0.91962 12.3272L1.58597 10.7185C1.7758 10.259 1.77541 9.74301 1.58489 9.28386L0.919499 7.67284C0.82516 7.44529 0.776583 7.20139 0.776543 6.95506C0.776504 6.70873 0.825003 6.4648 0.919269 6.23723C1.01354 6.00965 1.15172 5.80287 1.32593 5.62872C1.50014 5.45457 1.70696 5.31645 1.93457 5.22225L3.54327 4.55591C4.00226 4.36612 4.3672 4.00197 4.55798 3.5434L5.22481 1.93354C5.41511 1.47411 5.78012 1.10909 6.23955 0.918793C6.69898 0.728492 7.21519 0.728492 7.67461 0.918793L9.28332 1.58514C9.74276 1.77497 10.2588 1.77459 10.7179 1.58406L12.3285 0.919827C12.7878 0.729632 13.3039 0.729671 13.7633 0.919935C14.2226 1.1102 14.5876 1.47511 14.7779 1.93442L15.4449 3.54475L15.4447 3.54197Z"
+                  fill="#005BBE"
+          ></path>
+          <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M13.9166 7.37864C14.0502 7.16879 14.0949 6.91446 14.041 6.6716C13.9871 6.42874 13.8389 6.21724 13.6291 6.08364C13.4192 5.95004 13.1649 5.90527 12.922 5.95919C12.6792 6.0131 12.4677 6.16129 12.3341 6.37114L8.66283 12.1399L6.98283 10.0399C6.82751 9.84562 6.60138 9.72101 6.35418 9.69346C6.10699 9.66592 5.85897 9.7377 5.6647 9.89302C5.47043 10.0483 5.34582 10.2745 5.31827 10.5217C5.29073 10.7689 5.36251 11.0169 5.51783 11.2111L8.01783 14.3361C8.111 14.4528 8.23066 14.5454 8.36687 14.6065C8.50308 14.6675 8.65189 14.6951 8.80093 14.6871C8.94998 14.679 9.09494 14.6355 9.22376 14.5601C9.35258 14.4847 9.46154 14.3796 9.54158 14.2536L13.9166 7.37864V7.37864Z"
+                  fill="white"
+          ></path>
+        </g>
+        <defs>
+          <clipPath id="sf-avatar-verified-badge">
+            <rect width="20" height="20" fill="white"></rect>
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+    `;
+}
+
+export function avatarClasses(context, options = {}) {
+    const includeRootClass = options.includeRootClass !== false;
+    const classes = [
+        "sf-avatar",
+        "transition",
+        'flex-none',
+        `sf-avatar--size-${context.size}`,
+        context.line ? `sf-avatar--line-${context.line}` : "",
+        "inline-flex",
+    ].filter(Boolean);
+
+    if (context.isImage) {
+        classes.push("items-cross-center", "content-main-center");
+    }
+
+    if (context.isText) {
+        classes.push(
+            "sf-avatar--text",
+            "items-cross-center",
+            "content-main-center",
+        );
+    }
+
+    if (!context.isImage && !context.isText) {
+        classes.push(
+            "sf-avatar--placeholder",
+            "items-cross-center",
+            "content-main-center",
+        );
+    }
+
+    if (context.status !== "none") {
+        classes.push("relative");
+    }
+
+    if (context.shape === "square") {
+        classes.push("sf-avatar--square");
+    }
+
+    if (context.status === "online") {
+        classes.push("sf-avatar--status-icon-online-indicator");
+    }
+
+    if (includeRootClass && context.rootClass) {
+        classes.push(context.rootClass);
+    }
+
+    return classes.join(" ");
+}
+
+export function avatarContent(context) {
+    if (context.isText) {
+        return html`<span class="sf-avatar-text">${context.text}</span>`;
+    }
+
+    if (context.isImage) {
+        return html`<img class="sf-avatar-image" src=${context.imageUrl} alt="" />`;
+    }
+
+    return html`<i class="sf-icon" aria-hidden="true">person</i>`;
+}
+
+export function onlineIndicator(context) {
+    if (context.component?.hasSlotContent?.("online-indicator")) {
+        return context.component.getSlotContent("online-indicator");
+    }
+
+    if (!["online", "offline"].includes(context.status)) {
+        return nothing;
+    }
+
+    const sizeMap = {
+        "1/4": "sf-online-indicator--size-1/4",
+        "1/3": "sf-online-indicator--size-1/3",
+        "1/2": "sf-online-indicator--size-1/2",
+        1: "sf-online-indicator--size-1",
+        2: "sf-online-indicator--size-2",
+        3: "sf-online-indicator--size-3",
+    };
+
+    return html`
+        <span aria-hidden="true"
+                class="sf-online-indicator sf-online-indicator--${context.status} ${sizeMap[
+                        context.size
+                        ] || ""} flex absolute bottom-0 inline-end-0"
+        ></span>
+    `;
+}
+
+export function statusBadge(context) {
+    switch (context.status) {
+        case "company":
+            if (context.component?.hasSlotContent?.("company-badge")) {
+                return context.component.getSlotContent("company-badge");
+            }
+
+            return getCompanyBadge(context);
+        case "verified":
+            if (context.component?.hasSlotContent?.("verified-badge")) {
+                return context.component.getSlotContent("verified-badge");
+            }
+
+            return getVerifiedBadge(context);
+        default:
+            return onlineIndicator(context);
+    }
+}
+
+export function avatarButton(context, options = {}) {
+    return html`
+        <button
+                class="${avatarClasses(context, options)}"
+                style=${options.includeRootStyle === false ? "" : context.rootStyle || ""}
+                aria-label=${context.ariaLabel}
+                ?disabled=${context.disabled}
+                type="button"
+        >
+            ${avatarContent(context)} ${statusBadge(context)}
+        </button>
+    `;
+}