Körsatiş · compound

AI artefakt paneli

Suhbat yonidagi AI yaratgan hujjat, kod yoki sahifa paneli (4.203, Vercel AI Elements «Artifact», Claude Artifacts, ChatGPT Canvas). Sarlavha qatori: tur belgisi, nom va meta («2 daqiqa oldin»), versiyalar («‹ v2 / 2 ›» — har tahrir yangi versiya), Köriniş ↔ Kod yorliqlari (role="tab"), nusxalaş, töliq ekran va yopiş. Tana: har versiya .fx-canvas__version — içida natija (.fx-canvas__preview) va manba (.fx-canvas__code). data-state="streaming" — AI hali yozmoqda: tepada yuguruvçi çiziq va «Yozilmoqda…». Xulq (data-fx-canvas): yorliqlar ← → bilan, versiyalar va natija jonli hududda aytiladi, töliq ekrandan Esc bilan çiqiladi, yopilsa fokus oçuvçi tugmaga ([data-canvas-open="id"], aria-expanded) qaytadi. Hodisalar: fx-canvas-view, fx-canvas-version, fx-canvas-close; API: el.fxCanvas.add(versiya), .open(), .close(). Suhbat bilan yonma-yon — fx-split yoki ikki ustunli grid.

beta0.29.0 dan.fx-canvasCSS + JS

Narx bölimi — «Tong maktabi»

HTML · 2 daqiqa oldinYozilmoqda…

v2 / 2

Tariflar

Oylik: 149 000 söm

<section class="fx-pricing">
  <h2>Tariflar</h2>
  <p>Oylik: 149 000 soʻm</p>
</section>

Tariflar

Yillik −20%

Jamoa — 1 200 000 söm / yil, 5 örin, MCP va yangilanişlar.

<section class="fx-pricing">
  <h2>Tariflar</h2>
  <div class="fx-segment">Oylik · Yillik −20%</div>
  <article data-popular>
    <h3>Jamoa</h3>
    <p>1 200 000 soʻm / yil</p>
  </article>
</section>

Variantlar

Atribut	Qiymatlar	Standart
`data-view`	`preview` `code`	`preview`
`data-state`	`streaming` AI yozmoqda	`idle`
`data-expanded`	`on` töliq ekran	`off`

Anatomiya

root.fx-canvasşart
head.fx-canvas__headşart
type (belgi).fx-canvas__typeixtiyoriy
heading.fx-canvas__headingixtiyoriy
title (h2).fx-canvas__titleşart
meta.fx-canvas__metaixtiyoriy
status (streaming).fx-canvas__statusixtiyoriy
versions.fx-canvas__versionsixtiyoriy
tabs (tablist).fx-canvas__tabsixtiyoriy
tab.fx-canvas__tabixtiyoriy
actions.fx-canvas__actionsixtiyoriy
btn (ikonli).fx-canvas__btnixtiyoriy
body (tabpanel).fx-canvas__bodyşart
version.fx-canvas__versionşart
preview.fx-canvas__previewixtiyoriy
code.fx-canvas__codeixtiyoriy

Holatlar

streamingexpandedcopiedtab selected

Klaviatura va kiriş

Tugma	Amal
`← → Home End (yorliqlarda)`	Köriniş ↔ Kod
`Enter, Space`	Versiya, nusxa, töliq ekran, yopiş tugmalari
`Esc (toʻliq ekranda)`	Oddiy holatga qaytadi

Panel <aside aria-labelledby> (sarlavha h2). Köriniş/Kod — WAI-ARIA tabs: role="tablist" > role="tab" (aria-selected, roving tabindex, ← → Home End), tana role="tabpanel". Ikonli tugmalar aria-label bilan, töliq ekran aria-pressed, oçuvçi tugma aria-expanded. Versiya almaşişi va nusxalaş natijasi aria-live orqali aytiladi; Esc töliq ekrandan çiqaradi; yopilganda fokus oçuvçi tugmaga qaytadi. Kod bloki tabindex="0" — klaviatura bilan aylantiriladi. Streaming yuguruvçi çiziği harakat kamaytirilganda töxtaydi.

Naqş: WAI-ARIA APG tabs · rol complementary

Kod

AI uçun: qaçon işlatiladi

Işlating

AI çat yonida yaratilgan hujjat, kod, jadval yoki sahifani körsatiş va tahrirlaş.
Bir natijaning bir neçta versiyasini soliştiriş.

Işlatmang

Suhbat içidagi qisqa kod parçasi → code
Vosita çaqiruvi natijasi → toolcall
Oddiy yon panel → sheet
Har kiçik javobni artefaktga çiqarmang — faqat foydalanuvçi qayta işlatadigan, tahrirlanadigan natija (hujjat, kod, jadval, sahifa).
Eski versiyani ustidan yozmang — har tahrir yangi versiya, orqaga qaytiş mumkin bölsin.
Yaratilgan HTML'ni sahifaga töğridan-töğri joylamang — natija iframe sandbox içida yoki tozalangan holda körsatilsin.

npx foxui add canvas

<button class="fx-btn" type="button" data-canvas-open="cv1" aria-expanded="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M13 4v16"/></svg> «Narx bölimi» artefakti</button>
<aside class="fx-canvas" id="cv1" data-fx-canvas data-view="preview" aria-labelledby="cv1-t" style="margin-block-start: var(--fx-space-4); block-size: 26rem">
  <header class="fx-canvas__head">
    <span class="fx-canvas__type" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"/></svg></span>
    <div class="fx-canvas__heading"><h2 class="fx-canvas__title" id="cv1-t">Narx bölimi — «Tong maktabi»</h2><span class="fx-canvas__meta">HTML · 2 daqiqa oldin</span><span class="fx-canvas__status"><span class="fx-shimmer-text">Yozilmoqda…</span></span></div>
    <div class="fx-canvas__versions" role="group" aria-label="Versiyalar"><button class="fx-canvas__btn" type="button" data-canvas="prev" aria-label="Oldingi versiya"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><span data-canvas-label>v2 / 2</span><button class="fx-canvas__btn" type="button" data-canvas="next" aria-label="Keyingi versiya"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div>
    <div class="fx-canvas__tabs" role="tablist" aria-label="Köriniş"><button class="fx-canvas__tab" type="button" role="tab" data-canvas-view="preview" aria-selected="true" aria-controls="cv1-b">Köriniş</button><button class="fx-canvas__tab" type="button" role="tab" data-canvas-view="code" aria-selected="false" aria-controls="cv1-b" tabindex="-1">Kod</button></div>
    <div class="fx-canvas__actions"><button class="fx-canvas__btn" type="button" data-canvas="copy" aria-label="Kodni nusxalaş"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg></button><button class="fx-canvas__btn" type="button" data-canvas="expand" aria-pressed="false" aria-label="Töliq ekran"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7"/></svg></button><button class="fx-canvas__btn" type="button" data-canvas="close" aria-label="Panelni yopiş"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
  </header>
  <div class="fx-canvas__body" id="cv1-b" role="tabpanel" aria-labelledby="cv1-t">
    <article class="fx-canvas__version" data-version="1" hidden><div class="fx-canvas__preview"><h3>Tariflar</h3><p>Oylik: 149 000 söm</p></div><pre class="fx-canvas__code" tabindex="0"><code>&lt;section class="fx-pricing"&gt;
  &lt;h2&gt;Tariflar&lt;/h2&gt;
  &lt;p&gt;Oylik: 149 000 soʻm&lt;/p&gt;
&lt;/section&gt;</code></pre></article>
    <article class="fx-canvas__version" data-version="2" data-current><div class="fx-canvas__preview"><h3>Tariflar</h3><p><span class="fx-badge" data-tone="success">Yillik −20%</span></p><p><strong>Jamoa</strong> — 1 200 000 söm / yil, 5 örin, MCP va yangilanişlar.</p></div><pre class="fx-canvas__code" tabindex="0"><code>&lt;section class="fx-pricing"&gt;
  &lt;h2&gt;Tariflar&lt;/h2&gt;
  &lt;div class="fx-segment"&gt;Oylik · Yillik −20%&lt;/div&gt;
  &lt;article data-popular&gt;
    &lt;h3&gt;Jamoa&lt;/h3&gt;
    &lt;p&gt;1 200 000 soʻm / yil&lt;/p&gt;
  &lt;/article&gt;
&lt;/section&gt;</code></pre></article>
  </div>
</aside>

Tokenlar: --fx-bg-brand-solid --fx-bg-category-purple --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-duration-indeterminate --fx-ease-emphasized --fx-ease-standard --fx-fg-success --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-motion-loop --fx-line-height-relaxed --fx-motion-fast --fx-motion-press --fx-motion-shift-lg --fx-motion-slow --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-shadow-md --fx-shadow-sm --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-disabled --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-z-modal

Şu toifadan

Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.

AI artefakt paneli

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik