@alfadocs/ui-kit-debug 0.65.0 → 0.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/{agenda-card-Bl-SBiCh.js → agenda-card-BxSFkqgY.js} +2 -2
- package/dist/_chunks/{agenda-card-Bl-SBiCh.js.map → agenda-card-BxSFkqgY.js.map} +1 -1
- package/dist/_chunks/{agenda-tray-Bh1KfEOG.js → agenda-tray-T-BumlGZ.js} +2 -2
- package/dist/_chunks/{agenda-tray-Bh1KfEOG.js.map → agenda-tray-T-BumlGZ.js.map} +1 -1
- package/dist/_chunks/{ai-consent-banner-Btzmk8OH.js → ai-consent-banner-Dxtx_WAh.js} +2 -2
- package/dist/_chunks/{ai-consent-banner-Btzmk8OH.js.map → ai-consent-banner-Dxtx_WAh.js.map} +1 -1
- package/dist/_chunks/{ai-tools-rail-JnlTqfS4.js → ai-tools-rail-DfmewPUN.js} +92 -76
- package/dist/_chunks/ai-tools-rail-DfmewPUN.js.map +1 -0
- package/dist/_chunks/{alia-sidebar-CN8pA6c-.js → alia-sidebar-Ckv0yCKi.js} +2 -2
- package/dist/_chunks/{alia-sidebar-CN8pA6c-.js.map → alia-sidebar-Ckv0yCKi.js.map} +1 -1
- package/dist/_chunks/{anamnesis-card-qeLYRG79.js → anamnesis-card-N8pIKWuS.js} +2 -2
- package/dist/_chunks/{anamnesis-card-qeLYRG79.js.map → anamnesis-card-N8pIKWuS.js.map} +1 -1
- package/dist/_chunks/{antenatal-schedule-timeline-BfzFjEyb.js → antenatal-schedule-timeline-35ebkcZT.js} +2 -2
- package/dist/_chunks/{antenatal-schedule-timeline-BfzFjEyb.js.map → antenatal-schedule-timeline-35ebkcZT.js.map} +1 -1
- package/dist/_chunks/{appointment-tray-BQnJEora.js → appointment-tray-CQJ3Nbi5.js} +4 -4
- package/dist/_chunks/{appointment-tray-BQnJEora.js.map → appointment-tray-CQJ3Nbi5.js.map} +1 -1
- package/dist/_chunks/{badge-zsf5i5bH.js → badge-CqGsX32l.js} +46 -42
- package/dist/_chunks/badge-CqGsX32l.js.map +1 -0
- package/dist/_chunks/{bishop-score-x2fNqbuZ.js → bishop-score-CjsB9bM-.js} +3 -3
- package/dist/_chunks/{bishop-score-x2fNqbuZ.js.map → bishop-score-CjsB9bM-.js.map} +1 -1
- package/dist/_chunks/{bmi-calculator-C3roxbqD.js → bmi-calculator-n-823_1V.js} +3 -3
- package/dist/_chunks/{bmi-calculator-C3roxbqD.js.map → bmi-calculator-n-823_1V.js.map} +1 -1
- package/dist/_chunks/{care-plan-card-D42WD4-T.js → care-plan-card-CJei-nl9.js} +4 -4
- package/dist/_chunks/{care-plan-card-D42WD4-T.js.map → care-plan-card-CJei-nl9.js.map} +1 -1
- package/dist/_chunks/{care-plan-entry-card-BukNI7Uy.js → care-plan-entry-card-EmfrbHu8.js} +4 -4
- package/dist/_chunks/{care-plan-entry-card-BukNI7Uy.js.map → care-plan-entry-card-EmfrbHu8.js.map} +1 -1
- package/dist/_chunks/{clinical-note-card-BYo437dU.js → clinical-note-card-gtrxv6zn.js} +2 -2
- package/dist/_chunks/{clinical-note-card-BYo437dU.js.map → clinical-note-card-gtrxv6zn.js.map} +1 -1
- package/dist/_chunks/{color-picker-9tL7pz5y.js → color-picker-B7xsn6tX.js} +186 -167
- package/dist/_chunks/color-picker-B7xsn6tX.js.map +1 -0
- package/dist/_chunks/columns-2-BTOBZbep.js +15 -0
- package/dist/_chunks/columns-2-BTOBZbep.js.map +1 -0
- package/dist/_chunks/{contact-profile-card-CCeJmjbd.js → contact-profile-card-7BMB85T6.js} +2 -2
- package/dist/_chunks/{contact-profile-card-CCeJmjbd.js.map → contact-profile-card-7BMB85T6.js.map} +1 -1
- package/dist/_chunks/{cycle-calculator-DrVXbIB4.js → cycle-calculator-BF0ointe.js} +3 -3
- package/dist/_chunks/{cycle-calculator-DrVXbIB4.js.map → cycle-calculator-BF0ointe.js.map} +1 -1
- package/dist/_chunks/{dependent-selector-CRWgieHm.js → dependent-selector-DpzGtr_J.js} +2 -2
- package/dist/_chunks/{dependent-selector-CRWgieHm.js.map → dependent-selector-DpzGtr_J.js.map} +1 -1
- package/dist/_chunks/{document-scanner-biBS_f6c.js → document-scanner-D2qehl3-.js} +53 -53
- package/dist/_chunks/{document-scanner-biBS_f6c.js.map → document-scanner-D2qehl3-.js.map} +1 -1
- package/dist/_chunks/{due-date-calculator-D4K1BnE2.js → due-date-calculator-DU9AEWNy.js} +4 -4
- package/dist/_chunks/{due-date-calculator-D4K1BnE2.js.map → due-date-calculator-DU9AEWNy.js.map} +1 -1
- package/dist/_chunks/{editable-currency-cell-renderer-CFqQc56y.js → editable-currency-cell-renderer-BVJ04DkB.js} +914 -865
- package/dist/_chunks/editable-currency-cell-renderer-BVJ04DkB.js.map +1 -0
- package/dist/_chunks/{fetal-weight-B_pBjlO7.js → fetal-weight-BVSzOhuR.js} +3 -3
- package/dist/_chunks/{fetal-weight-B_pBjlO7.js.map → fetal-weight-BVSzOhuR.js.map} +1 -1
- package/dist/_chunks/{gestational-age-calculator-BETQAVkA.js → gestational-age-calculator-DBlFdoiP.js} +4 -4
- package/dist/_chunks/{gestational-age-calculator-BETQAVkA.js.map → gestational-age-calculator-DBlFdoiP.js.map} +1 -1
- package/dist/_chunks/{hcg-doubling-8zXCJgAQ.js → hcg-doubling-if4Q8aSX.js} +3 -3
- package/dist/_chunks/{hcg-doubling-8zXCJgAQ.js.map → hcg-doubling-if4Q8aSX.js.map} +1 -1
- package/dist/_chunks/{type-DZ5OMRA2.js → image-C6RM5hfF.js} +4 -16
- package/dist/_chunks/image-C6RM5hfF.js.map +1 -0
- package/dist/_chunks/{insert-result-DIAG3ltJ.js → insert-result-njqBthzT.js} +68 -57
- package/dist/_chunks/insert-result-njqBthzT.js.map +1 -0
- package/dist/_chunks/{marketplace-app-shell-BXfRMiRk.js → marketplace-app-shell-Bu-HD3fy.js} +3 -3
- package/dist/_chunks/{marketplace-app-shell-BXfRMiRk.js.map → marketplace-app-shell-Bu-HD3fy.js.map} +1 -1
- package/dist/_chunks/{message-card-Bgcvfj6-.js → message-card-Bx4GmLvf.js} +9 -9
- package/dist/_chunks/{message-card-Bgcvfj6-.js.map → message-card-Bx4GmLvf.js.map} +1 -1
- package/dist/_chunks/{message-tray-saAVMeHP.js → message-tray-CVyJajVJ.js} +2 -2
- package/dist/_chunks/{message-tray-saAVMeHP.js.map → message-tray-CVyJajVJ.js.map} +1 -1
- package/dist/_chunks/{operator-hero-CM8949Hd.js → operator-hero-f_KaRhw5.js} +2 -2
- package/dist/_chunks/{operator-hero-CM8949Hd.js.map → operator-hero-f_KaRhw5.js.map} +1 -1
- package/dist/_chunks/{patient-search-Bw9ONucF.js → patient-search-DR9XUYRQ.js} +2 -2
- package/dist/_chunks/{patient-search-Bw9ONucF.js.map → patient-search-DR9XUYRQ.js.map} +1 -1
- package/dist/_chunks/{patient-shell-CF_qon7C.js → patient-shell-DrV_iekt.js} +2 -2
- package/dist/_chunks/{patient-shell-CF_qon7C.js.map → patient-shell-DrV_iekt.js.map} +1 -1
- package/dist/_chunks/{patient-summary-card-Bgso0p_l.js → patient-summary-card-ByfIU8N0.js} +4 -4
- package/dist/_chunks/{patient-summary-card-Bgso0p_l.js.map → patient-summary-card-ByfIU8N0.js.map} +1 -1
- package/dist/_chunks/{payment-request-card-DBz3hVDz.js → payment-request-card-yTjzKQCU.js} +3 -3
- package/dist/_chunks/{payment-request-card-DBz3hVDz.js.map → payment-request-card-yTjzKQCU.js.map} +1 -1
- package/dist/_chunks/{periodontal-chart-card-AYyHtU9K.js → periodontal-chart-card-Dh3KgvYG.js} +2 -2
- package/dist/_chunks/{periodontal-chart-card-AYyHtU9K.js.map → periodontal-chart-card-Dh3KgvYG.js.map} +1 -1
- package/dist/_chunks/{practice-results-CVAgY2RZ.js → practice-results-DND2SAt7.js} +2 -2
- package/dist/_chunks/{practice-results-CVAgY2RZ.js.map → practice-results-DND2SAt7.js.map} +1 -1
- package/dist/_chunks/{pregnancy-dating-BuzLTwjy.js → pregnancy-dating-QY-sqpvj.js} +4 -4
- package/dist/_chunks/{pregnancy-dating-BuzLTwjy.js.map → pregnancy-dating-QY-sqpvj.js.map} +1 -1
- package/dist/_chunks/{pregnancy-weight-gain-aicn7qs7.js → pregnancy-weight-gain-DOJXXNYP.js} +3 -3
- package/dist/_chunks/{pregnancy-weight-gain-aicn7qs7.js.map → pregnancy-weight-gain-DOJXXNYP.js.map} +1 -1
- package/dist/_chunks/rich-text-editor-BOQr5lHx.js +1970 -0
- package/dist/_chunks/rich-text-editor-BOQr5lHx.js.map +1 -0
- package/dist/_chunks/{scroll-area-BWqCkEGz.js → scroll-area-eccd_Uf-.js} +38 -28
- package/dist/_chunks/scroll-area-eccd_Uf-.js.map +1 -0
- package/dist/_chunks/{sidebar-DPEHzxLZ.js → sidebar-CGjIk_FQ.js} +36 -22
- package/dist/_chunks/sidebar-CGjIk_FQ.js.map +1 -0
- package/dist/_chunks/{suggestion-chip-C4kxWUIs.js → suggestion-chip-Bk4PmYTg.js} +30 -30
- package/dist/_chunks/suggestion-chip-Bk4PmYTg.js.map +1 -0
- package/dist/_chunks/{tab-bar-Xetknddo.js → tab-bar-B1ovILzh.js} +2 -2
- package/dist/_chunks/{tab-bar-Xetknddo.js.map → tab-bar-B1ovILzh.js.map} +1 -1
- package/dist/_chunks/{tag-CdA0s_VV.js → tag-BQXwuJq1.js} +41 -38
- package/dist/_chunks/tag-BQXwuJq1.js.map +1 -0
- package/dist/_chunks/{transaction-chip-BZCa6XDn.js → transaction-chip-BrW8P50O.js} +19 -19
- package/dist/_chunks/transaction-chip-BrW8P50O.js.map +1 -0
- package/dist/_chunks/trash-2-rPAKaRgB.js +18 -0
- package/dist/_chunks/trash-2-rPAKaRgB.js.map +1 -0
- package/dist/_chunks/{unit-converter-CHN2cZ4b.js → unit-converter-C1V3ACM9.js} +2 -2
- package/dist/_chunks/{unit-converter-CHN2cZ4b.js.map → unit-converter-C1V3ACM9.js.map} +1 -1
- package/dist/_chunks/{workflow-map-BX3JY1Bu.js → workflow-map-JAZryZJr.js} +137 -149
- package/dist/_chunks/workflow-map-JAZryZJr.js.map +1 -0
- package/dist/agent-catalog.json +1 -1
- package/dist/components/agenda-card/index.js +1 -1
- package/dist/components/agenda-tray/index.js +1 -1
- package/dist/components/ai-consent-banner/index.js +1 -1
- package/dist/components/ai-tools-rail/ai-tools-rail.d.ts.map +1 -1
- package/dist/components/ai-tools-rail/index.js +1 -1
- package/dist/components/anamnesis-card/index.js +1 -1
- package/dist/components/appointment-card/index.js +1 -1
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/bishop-score/index.js +1 -1
- package/dist/components/bmi-calculator/index.js +1 -1
- package/dist/components/care-plan-card/index.js +1 -1
- package/dist/components/care-plan-entry-card/index.js +1 -1
- package/dist/components/clinical-note-card/index.js +1 -1
- package/dist/components/color-picker/color-picker.d.ts.map +1 -1
- package/dist/components/color-picker/index.js +1 -1
- package/dist/components/contact-profile-card/index.js +1 -1
- package/dist/components/cycle-calculator/index.js +1 -1
- package/dist/components/data-table/cell-renderers/actions-cell-renderer.d.ts +16 -0
- package/dist/components/data-table/cell-renderers/actions-cell-renderer.d.ts.map +1 -1
- package/dist/components/data-table/cell-renderers/tooth-cell-renderer.d.ts +12 -0
- package/dist/components/data-table/cell-renderers/tooth-cell-renderer.d.ts.map +1 -0
- package/dist/components/data-table/data-table.d.ts +1 -1
- package/dist/components/data-table/index.d.ts +2 -0
- package/dist/components/data-table/index.d.ts.map +1 -1
- package/dist/components/data-table/index.js +13 -12
- package/dist/components/data-table/toolbar.d.ts +5 -1
- package/dist/components/data-table/toolbar.d.ts.map +1 -1
- package/dist/components/dependent-selector/index.js +1 -1
- package/dist/components/document-scanner/index.js +1 -1
- package/dist/components/due-date-calculator/index.js +2 -2
- package/dist/components/fetal-weight/index.js +1 -1
- package/dist/components/gestational-age-calculator/index.js +1 -1
- package/dist/components/hcg-doubling/index.js +1 -1
- package/dist/components/message-card/index.js +1 -1
- package/dist/components/message-tray/index.js +1 -1
- package/dist/components/operator-hero/index.js +1 -1
- package/dist/components/patient-search/index.js +1 -1
- package/dist/components/patient-summary-card/index.js +1 -1
- package/dist/components/payment-card/index.js +1 -1
- package/dist/components/periodontal-chart-card/index.js +1 -1
- package/dist/components/practice-results/index.js +1 -1
- package/dist/components/pregnancy-dating/index.js +1 -1
- package/dist/components/pregnancy-weight-gain/index.js +1 -1
- package/dist/components/rich-text-editor/editor-toolbar.d.ts +36 -2
- package/dist/components/rich-text-editor/editor-toolbar.d.ts.map +1 -1
- package/dist/components/rich-text-editor/index.js +1 -1
- package/dist/components/rich-text-editor/rich-text-editor.d.ts +2 -0
- package/dist/components/rich-text-editor/rich-text-editor.d.ts.map +1 -1
- package/dist/components/scroll-area/index.js +1 -1
- package/dist/components/scroll-area/scroll-area.d.ts.map +1 -1
- package/dist/components/sidebar/index.js +1 -1
- package/dist/components/sidebar/sidebar.d.ts.map +1 -1
- package/dist/components/suggestion-chip/index.js +1 -1
- package/dist/components/tab-bar/index.js +1 -1
- package/dist/components/tag/index.js +1 -1
- package/dist/components/tag/tag.d.ts.map +1 -1
- package/dist/components/transaction-chip/index.js +1 -1
- package/dist/components/transaction-chip/transaction-chip.d.ts.map +1 -1
- package/dist/components/unit-converter/index.js +1 -1
- package/dist/components/workflow/index.js +1 -1
- package/dist/i18n/locales/ar.d.ts +26 -0
- package/dist/i18n/locales/ar.d.ts.map +1 -1
- package/dist/i18n/locales/ar.js +27 -1
- package/dist/i18n/locales/ar.js.map +1 -1
- package/dist/i18n/locales/de.d.ts +26 -0
- package/dist/i18n/locales/de.d.ts.map +1 -1
- package/dist/i18n/locales/de.js +27 -1
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/el.d.ts +26 -0
- package/dist/i18n/locales/el.d.ts.map +1 -1
- package/dist/i18n/locales/el.js +27 -1
- package/dist/i18n/locales/el.js.map +1 -1
- package/dist/i18n/locales/en.d.ts +26 -0
- package/dist/i18n/locales/en.d.ts.map +1 -1
- package/dist/i18n/locales/en.js +27 -1
- package/dist/i18n/locales/en.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +26 -0
- package/dist/i18n/locales/es.d.ts.map +1 -1
- package/dist/i18n/locales/es.js +27 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +26 -0
- package/dist/i18n/locales/fr.d.ts.map +1 -1
- package/dist/i18n/locales/fr.js +27 -1
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hi.d.ts +26 -0
- package/dist/i18n/locales/hi.d.ts.map +1 -1
- package/dist/i18n/locales/hi.js +27 -1
- package/dist/i18n/locales/hi.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +26 -0
- package/dist/i18n/locales/it.d.ts.map +1 -1
- package/dist/i18n/locales/it.js +27 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/ja.d.ts +26 -0
- package/dist/i18n/locales/ja.d.ts.map +1 -1
- package/dist/i18n/locales/ja.js +27 -1
- package/dist/i18n/locales/ja.js.map +1 -1
- package/dist/i18n/locales/nl.d.ts +26 -0
- package/dist/i18n/locales/nl.d.ts.map +1 -1
- package/dist/i18n/locales/nl.js +25 -1
- package/dist/i18n/locales/nl.js.map +1 -1
- package/dist/i18n/locales/pl.d.ts +26 -0
- package/dist/i18n/locales/pl.d.ts.map +1 -1
- package/dist/i18n/locales/pl.js +27 -1
- package/dist/i18n/locales/pl.js.map +1 -1
- package/dist/i18n/locales/pt.d.ts +26 -0
- package/dist/i18n/locales/pt.d.ts.map +1 -1
- package/dist/i18n/locales/pt.js +27 -1
- package/dist/i18n/locales/pt.js.map +1 -1
- package/dist/i18n/locales/ro.d.ts +26 -0
- package/dist/i18n/locales/ro.d.ts.map +1 -1
- package/dist/i18n/locales/ro.js +27 -1
- package/dist/i18n/locales/ro.js.map +1 -1
- package/dist/i18n/locales/ru.d.ts +26 -0
- package/dist/i18n/locales/ru.d.ts.map +1 -1
- package/dist/i18n/locales/ru.js +27 -1
- package/dist/i18n/locales/ru.js.map +1 -1
- package/dist/i18n/locales/sq.d.ts +26 -0
- package/dist/i18n/locales/sq.d.ts.map +1 -1
- package/dist/i18n/locales/sq.js +27 -1
- package/dist/i18n/locales/sq.js.map +1 -1
- package/dist/i18n/locales/sv.d.ts +26 -0
- package/dist/i18n/locales/sv.d.ts.map +1 -1
- package/dist/i18n/locales/sv.js +25 -1
- package/dist/i18n/locales/sv.js.map +1 -1
- package/dist/i18n/locales/tr.d.ts +26 -0
- package/dist/i18n/locales/tr.d.ts.map +1 -1
- package/dist/i18n/locales/tr.js +27 -1
- package/dist/i18n/locales/tr.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +26 -0
- package/dist/i18n/locales/zh.d.ts.map +1 -1
- package/dist/i18n/locales/zh.js +25 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.js +509 -508
- package/dist/locales/ar.json +27 -1
- package/dist/locales/de.json +27 -1
- package/dist/locales/el.json +27 -1
- package/dist/locales/en.json +27 -1
- package/dist/locales/es.json +27 -1
- package/dist/locales/fr.json +27 -1
- package/dist/locales/hi.json +27 -1
- package/dist/locales/it.json +27 -1
- package/dist/locales/ja.json +27 -1
- package/dist/locales/nl.json +27 -1
- package/dist/locales/pl.json +27 -1
- package/dist/locales/pt.json +27 -1
- package/dist/locales/ro.json +27 -1
- package/dist/locales/ru.json +27 -1
- package/dist/locales/sq.json +27 -1
- package/dist/locales/sv.json +27 -1
- package/dist/locales/tr.json +27 -1
- package/dist/locales/zh.json +27 -1
- package/dist/patterns/alia-assistant/index.js +1 -1
- package/dist/patterns/marketplace-app-shell/index.js +1 -1
- package/dist/patterns/patient-shell/index.js +1 -1
- package/dist/tokens.css +6 -3
- package/package.json +1 -1
- package/dist/_chunks/ai-tools-rail-JnlTqfS4.js.map +0 -1
- package/dist/_chunks/badge-zsf5i5bH.js.map +0 -1
- package/dist/_chunks/color-picker-9tL7pz5y.js.map +0 -1
- package/dist/_chunks/editable-currency-cell-renderer-CFqQc56y.js.map +0 -1
- package/dist/_chunks/insert-result-DIAG3ltJ.js.map +0 -1
- package/dist/_chunks/rich-text-editor-u36FqSWz.js +0 -1190
- package/dist/_chunks/rich-text-editor-u36FqSWz.js.map +0 -1
- package/dist/_chunks/scroll-area-BWqCkEGz.js.map +0 -1
- package/dist/_chunks/sidebar-DPEHzxLZ.js.map +0 -1
- package/dist/_chunks/suggestion-chip-C4kxWUIs.js.map +0 -1
- package/dist/_chunks/tag-CdA0s_VV.js.map +0 -1
- package/dist/_chunks/transaction-chip-BZCa6XDn.js.map +0 -1
- package/dist/_chunks/type-DZ5OMRA2.js.map +0 -1
- package/dist/_chunks/workflow-map-BX3JY1Bu.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as a, jsxs as l } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as R, useMemo as B, useState as L, useRef as U, useCallback as E } from "react";
|
|
3
3
|
import { c as W } from "./index-D2ZczOXr.js";
|
|
4
4
|
import { useTranslation as D } from "react-i18next";
|
|
5
5
|
import { I as H } from "./icon-button-LqoiKcUN.js";
|
|
@@ -69,7 +69,7 @@ const O = W(
|
|
|
69
69
|
"ds:focus-visible:after:outline-[color:var(--ring)]",
|
|
70
70
|
"ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
|
|
71
71
|
"ds:forced-colors:focus-visible:after:outline-[CanvasText]"
|
|
72
|
-
].join(" "), Q =
|
|
72
|
+
].join(" "), Q = R(
|
|
73
73
|
({
|
|
74
74
|
item: e,
|
|
75
75
|
variant: d = "compact",
|
|
@@ -103,14 +103,14 @@ const O = W(
|
|
|
103
103
|
);
|
|
104
104
|
},
|
|
105
105
|
[o, e, f, w]
|
|
106
|
-
), F = e.read ? "read" : "unread",
|
|
106
|
+
), F = e.read ? "read" : "unread", _ = e.read ? "" : n("messageCard.unreadSuffix", ", unread"), P = e.subject ? n("messageCard.subjectFragment", {
|
|
107
107
|
subject: e.subject,
|
|
108
108
|
defaultValue: " — {{subject}}"
|
|
109
109
|
}) : "", C = n("messageCard.itemLabel", {
|
|
110
110
|
sender: e.sender.name,
|
|
111
|
-
subjectFragment:
|
|
111
|
+
subjectFragment: P,
|
|
112
112
|
time: S,
|
|
113
|
-
unreadSuffix:
|
|
113
|
+
unreadSuffix: _,
|
|
114
114
|
defaultValue: "Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}"
|
|
115
115
|
}), p = !!e.url && G(e.url), i = /* @__PURE__ */ a(
|
|
116
116
|
"span",
|
|
@@ -154,7 +154,7 @@ const O = W(
|
|
|
154
154
|
children: i
|
|
155
155
|
}
|
|
156
156
|
) : t = i;
|
|
157
|
-
const
|
|
157
|
+
const I = typeof e.unreadCount == "number" && e.unreadCount > 1;
|
|
158
158
|
return /* @__PURE__ */ l(
|
|
159
159
|
"div",
|
|
160
160
|
{
|
|
@@ -190,7 +190,7 @@ const O = W(
|
|
|
190
190
|
}
|
|
191
191
|
),
|
|
192
192
|
d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: t }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: t }),
|
|
193
|
-
|
|
193
|
+
I ? /* @__PURE__ */ a(
|
|
194
194
|
"span",
|
|
195
195
|
{
|
|
196
196
|
"aria-label": n("messageCard.threadCount", {
|
|
@@ -198,7 +198,7 @@ const O = W(
|
|
|
198
198
|
defaultValue_one: "{{count}} new message in thread",
|
|
199
199
|
defaultValue_other: "{{count}} new messages in thread"
|
|
200
200
|
}),
|
|
201
|
-
className: "ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]",
|
|
201
|
+
className: "ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]",
|
|
202
202
|
children: e.unreadCount
|
|
203
203
|
}
|
|
204
204
|
) : null
|
|
@@ -274,4 +274,4 @@ Q.displayName = "MessageCard";
|
|
|
274
274
|
export {
|
|
275
275
|
Q as M
|
|
276
276
|
};
|
|
277
|
-
//# sourceMappingURL=message-card-
|
|
277
|
+
//# sourceMappingURL=message-card-Bx4GmLvf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-card-Bgcvfj6-.js","sources":["../../src/components/message-card/message-card.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\nimport { isSafeEntityUrl } from '../_shared/is-safe-url';\n\n// Back-compat alias — the URL guard now lives in the shared entity-card\n// helper. Existing consumers (and this dir's tests) import isSafeMessageUrl.\nexport { isSafeEntityUrl as isSafeMessageUrl } from '../_shared/is-safe-url';\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n /** Display name — drives the avatar's deterministic colour + initials. */\n name: string;\n /** Optional avatar image URL. */\n avatarUrl?: string;\n}\n\nexport interface MessageItem {\n /** Unique identifier for the message (or thread). */\n id: string;\n /** Sender identity — avatar + bold display name. */\n sender: MessageSender;\n /** Optional subject / conversation title. Rendered bold when unread. */\n subject?: string;\n /** Last-message preview — rendered as plain text, clamped to two lines. */\n preview: string;\n /** ISO-8601 timestamp of when the message was sent. */\n sentAt: string;\n /** Whether the message has been seen. Unread items get accent styling. */\n read?: boolean;\n /** Optional deep link — when present the card row is an anchor. */\n url?: string;\n /**\n * Count of unread messages inside a thread. Rendered as an end-aligned\n * badge when greater than 1.\n */\n unreadCount?: number;\n}\n\nexport interface MessageCardProps\n extends\n Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n VariantProps<typeof cardVariants> {\n /** The message to render. */\n item: MessageItem;\n /**\n * Layout shape.\n * - `compact` — single-line row with the whole card clickable (used by\n * MessageTray).\n * - `dashboard` — bordered block with explicit CTA and mark-as-read\n * controls (used by dashboards / sidebars).\n */\n variant?: 'compact' | 'dashboard';\n /** Visual density. */\n size?: 'sm' | 'md';\n /** Fires when the row / title is activated. */\n onActivate?: (item: MessageItem) => void;\n /** Fires when the dismiss control is activated. */\n onDismiss?: (item: MessageItem) => void;\n /**\n * Label for the dashboard-variant CTA. Only rendered when `variant` is\n * `'dashboard'` and the item has a `url`.\n */\n ctaLabel?: string;\n /**\n * Label for the dashboard-variant mark-as-read link. Only rendered when\n * `variant` is `'dashboard'` and `onDismiss` is supplied.\n */\n dismissLabel?: string;\n /**\n * External exit-animation control. When supplied the card plays its\n * fade-out when this turns `true` and the consumer owns the subsequent\n * unmount (see MessageTray). If omitted, the card self-manages the\n * exit on internal dismiss.\n */\n leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n [\n 'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:transition-colors',\n 'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n 'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n 'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n 'ds:data-[leaving=true]:pointer-events-none',\n 'ds:motion-reduce:transition-none',\n 'ds:text-start',\n 'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2',\n 'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n ].join(' '),\n {\n variants: {\n variant: {\n compact: 'ds:items-start ds:group',\n dashboard:\n 'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]',\n },\n size: {\n sm: 'ds:p-[var(--spacing-sm)]',\n md: 'ds:p-[var(--spacing-md)]',\n },\n state: {\n unread: '',\n read: 'ds:bg-transparent',\n },\n },\n compoundVariants: [\n {\n variant: 'compact',\n state: 'unread',\n class: 'ds:bg-[color:var(--accent)]/5',\n },\n {\n variant: 'compact',\n state: 'read',\n class: 'ds:hover:bg-[color:var(--muted)]/40',\n },\n {\n variant: 'dashboard',\n state: 'unread',\n class: 'ds:bg-[color:var(--accent)]/5',\n },\n ],\n defaultVariants: {\n variant: 'compact',\n size: 'sm',\n state: 'read',\n },\n },\n);\n\nconst stretchedLinkClass = [\n 'ds:focus-visible:outline-none',\n \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n 'ds:after:pointer-events-auto',\n 'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n 'ds:focus-visible:after:outline-solid',\n 'ds:focus-visible:after:outline-[color:var(--ring)]',\n 'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Component */\n/* ------------------------------------------------------------------ */\n\nexport const MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n (\n {\n item,\n variant = 'compact',\n size = 'sm',\n onActivate,\n onDismiss,\n ctaLabel,\n dismissLabel,\n leaving,\n className,\n ...rest\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n\n const accessibleTime = useMemo(() => {\n const date = new Date(item.sentAt);\n if (Number.isNaN(date.getTime())) return '';\n return new Intl.DateTimeFormat(i18n.language, {\n dateStyle: 'medium',\n timeStyle: 'short',\n }).format(date);\n }, [item.sentAt, i18n.language]);\n\n const isControlledLeaving = leaving !== undefined;\n const [isLeaving, setIsLeaving] = useState(false);\n const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n const prefersReducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n const handleDismiss = useCallback(\n (event?: React.MouseEvent) => {\n // The card carries a stretched-link `::after` overlay for the\n // whole-row click target. The dismiss button is rendered above it\n // (z-index), but click events still bubble — stop propagation so the\n // wrapper's navigation does not fire alongside the dismiss action.\n event?.preventDefault();\n event?.stopPropagation();\n if (!onDismiss) return;\n if (isControlledLeaving || prefersReducedMotion) {\n onDismiss(item);\n return;\n }\n setIsLeaving(true);\n if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n const raw =\n (typeof window !== 'undefined' &&\n window\n .getComputedStyle(document.documentElement)\n .getPropertyValue('--animation-duration')) ||\n '200ms';\n const ms = raw.trim().endsWith('ms')\n ? parseFloat(raw)\n : parseFloat(raw) * 1000;\n dismissTimerRef.current = setTimeout(\n () => onDismiss(item),\n Number.isFinite(ms) ? ms : 200,\n );\n },\n [onDismiss, item, isControlledLeaving, prefersReducedMotion],\n );\n\n const state = item.read ? 'read' : 'unread';\n\n const unreadSuffix = item.read\n ? ''\n : t('messageCard.unreadSuffix', ', unread');\n const subjectFragment = item.subject\n ? t('messageCard.subjectFragment', {\n subject: item.subject,\n defaultValue: ' — {{subject}}',\n })\n : '';\n const ariaLabel = t('messageCard.itemLabel', {\n sender: item.sender.name,\n subjectFragment,\n time: accessibleTime,\n unreadSuffix,\n defaultValue:\n 'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n });\n\n const hasSafeUrl = !!item.url && isSafeEntityUrl(item.url);\n\n /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n const senderText = (\n <span\n className={[\n 'ds:flex-1 ds:min-w-0 ds:truncate',\n item.read ? 'ds:font-normal' : 'ds:font-semibold',\n ].join(' ')}\n >\n {item.sender.name}\n </span>\n );\n\n let senderNode: ReactNode;\n if (variant === 'compact' && hasSafeUrl && onActivate) {\n senderNode = (\n <a\n href={item.url}\n aria-label={ariaLabel}\n className={stretchedLinkClass + ' ds:contents'}\n onClick={(event) => {\n // Let the browser handle modifier-click (open in new tab,\n // download, etc.) and respect upstream preventDefault.\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n // When the consumer wires `onActivate`, they own routing — stop\n // the browser's default navigation so we don't full-page reload\n // out of an SPA shell or a test iframe.\n event.preventDefault();\n onActivate(item);\n }}\n >\n {senderText}\n </a>\n );\n } else if (variant === 'compact' && onActivate) {\n senderNode = (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n className={\n stretchedLinkClass +\n ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n }\n onClick={() => onActivate(item)}\n >\n {senderText}\n </button>\n );\n } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n senderNode = (\n <a\n href={item.url}\n className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n onClick={(event) => {\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n onActivate(item);\n }}\n >\n {senderText}\n </a>\n );\n } else {\n senderNode = senderText;\n }\n\n const showThreadCount =\n typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n return (\n <div\n ref={ref}\n role=\"listitem\"\n data-component=\"message-card\"\n data-component-id={item.id}\n data-read={item.read ? 'true' : 'false'}\n data-leaving={effectiveLeaving ? 'true' : undefined}\n aria-hidden={effectiveLeaving || undefined}\n className={cardVariants({ variant, size, state, className })}\n {...rest}\n >\n {/* Avatar is decorative here — the row's assembled `aria-label`\n already names the sender, so letting Avatar contribute its own\n `role=\"img\"` + `aria-label={name}` would announce the name twice\n per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n they win over Avatar's internal values) pulls the element out of\n the a11y tree entirely. */}\n <Avatar\n name={item.sender.name}\n src={item.sender.avatarUrl}\n size={size === 'md' ? 'md' : 'sm'}\n className=\"ds:shrink-0\"\n aria-hidden=\"true\"\n role=\"presentation\"\n aria-label={undefined}\n />\n\n <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n {!item.read ? (\n <span\n aria-hidden=\"true\"\n className=\"ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]\"\n />\n ) : null}\n {variant === 'dashboard' ? (\n <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n {senderNode}\n </h3>\n ) : (\n <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n {senderNode}\n </span>\n )}\n {showThreadCount ? (\n <span\n aria-label={t('messageCard.threadCount', {\n count: item.unreadCount,\n defaultValue_one: '{{count}} new message in thread',\n defaultValue_other: '{{count}} new messages in thread',\n })}\n className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n >\n {item.unreadCount}\n </span>\n ) : null}\n </div>\n\n {item.subject ? (\n <p\n className={[\n 'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n item.read ? 'ds:font-normal' : 'ds:font-semibold',\n ].join(' ')}\n >\n {item.subject}\n </p>\n ) : null}\n\n <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n {item.preview}\n </p>\n\n <Timestamp\n value={item.sentAt}\n shape=\"chip\"\n size=\"sm\"\n relativeWindow={12 * 60 * 60 * 1000}\n />\n\n {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n {ctaLabel && hasSafeUrl ? (\n <Button\n intent=\"outline\"\n size=\"sm\"\n asChild\n className=\"ds:relative ds:z-[1]\"\n >\n <a\n href={item.url}\n onClick={(event) => {\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n onActivate?.(item);\n }}\n >\n {ctaLabel}\n </a>\n </Button>\n ) : null}\n {dismissLabel && onDismiss ? (\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={handleDismiss}\n className=\"ds:relative ds:z-[1]\"\n >\n {dismissLabel}\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n\n {variant === 'compact' && onDismiss ? (\n <span className=\"ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none\">\n <IconButton\n icon={<X />}\n intent=\"ghost\"\n size=\"sm\"\n aria-label={t('messageCard.dismiss', 'Dismiss message')}\n onClick={handleDismiss}\n />\n </span>\n ) : null}\n </div>\n );\n },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","MessageCard","forwardRef","item","variant","size","onActivate","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","event","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","isSafeEntityUrl","senderText","jsx","senderNode","showThreadCount","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"message-card-Bx4GmLvf.js","sources":["../../src/components/message-card/message-card.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\nimport { isSafeEntityUrl } from '../_shared/is-safe-url';\n\n// Back-compat alias — the URL guard now lives in the shared entity-card\n// helper. Existing consumers (and this dir's tests) import isSafeMessageUrl.\nexport { isSafeEntityUrl as isSafeMessageUrl } from '../_shared/is-safe-url';\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n /** Display name — drives the avatar's deterministic colour + initials. */\n name: string;\n /** Optional avatar image URL. */\n avatarUrl?: string;\n}\n\nexport interface MessageItem {\n /** Unique identifier for the message (or thread). */\n id: string;\n /** Sender identity — avatar + bold display name. */\n sender: MessageSender;\n /** Optional subject / conversation title. Rendered bold when unread. */\n subject?: string;\n /** Last-message preview — rendered as plain text, clamped to two lines. */\n preview: string;\n /** ISO-8601 timestamp of when the message was sent. */\n sentAt: string;\n /** Whether the message has been seen. Unread items get accent styling. */\n read?: boolean;\n /** Optional deep link — when present the card row is an anchor. */\n url?: string;\n /**\n * Count of unread messages inside a thread. Rendered as an end-aligned\n * badge when greater than 1.\n */\n unreadCount?: number;\n}\n\nexport interface MessageCardProps\n extends\n Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n VariantProps<typeof cardVariants> {\n /** The message to render. */\n item: MessageItem;\n /**\n * Layout shape.\n * - `compact` — single-line row with the whole card clickable (used by\n * MessageTray).\n * - `dashboard` — bordered block with explicit CTA and mark-as-read\n * controls (used by dashboards / sidebars).\n */\n variant?: 'compact' | 'dashboard';\n /** Visual density. */\n size?: 'sm' | 'md';\n /** Fires when the row / title is activated. */\n onActivate?: (item: MessageItem) => void;\n /** Fires when the dismiss control is activated. */\n onDismiss?: (item: MessageItem) => void;\n /**\n * Label for the dashboard-variant CTA. Only rendered when `variant` is\n * `'dashboard'` and the item has a `url`.\n */\n ctaLabel?: string;\n /**\n * Label for the dashboard-variant mark-as-read link. Only rendered when\n * `variant` is `'dashboard'` and `onDismiss` is supplied.\n */\n dismissLabel?: string;\n /**\n * External exit-animation control. When supplied the card plays its\n * fade-out when this turns `true` and the consumer owns the subsequent\n * unmount (see MessageTray). If omitted, the card self-manages the\n * exit on internal dismiss.\n */\n leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n [\n 'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n 'ds:rounded-[var(--radius-sm)]',\n 'ds:transition-colors',\n 'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n 'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n 'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n 'ds:data-[leaving=true]:pointer-events-none',\n 'ds:motion-reduce:transition-none',\n 'ds:text-start',\n 'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2',\n 'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n ].join(' '),\n {\n variants: {\n variant: {\n compact: 'ds:items-start ds:group',\n dashboard:\n 'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]',\n },\n size: {\n sm: 'ds:p-[var(--spacing-sm)]',\n md: 'ds:p-[var(--spacing-md)]',\n },\n state: {\n unread: '',\n read: 'ds:bg-transparent',\n },\n },\n compoundVariants: [\n {\n variant: 'compact',\n state: 'unread',\n class: 'ds:bg-[color:var(--accent)]/5',\n },\n {\n variant: 'compact',\n state: 'read',\n class: 'ds:hover:bg-[color:var(--muted)]/40',\n },\n {\n variant: 'dashboard',\n state: 'unread',\n class: 'ds:bg-[color:var(--accent)]/5',\n },\n ],\n defaultVariants: {\n variant: 'compact',\n size: 'sm',\n state: 'read',\n },\n },\n);\n\nconst stretchedLinkClass = [\n 'ds:focus-visible:outline-none',\n \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n 'ds:after:pointer-events-auto',\n 'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n 'ds:focus-visible:after:outline-solid',\n 'ds:focus-visible:after:outline-[color:var(--ring)]',\n 'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Component */\n/* ------------------------------------------------------------------ */\n\nexport const MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n (\n {\n item,\n variant = 'compact',\n size = 'sm',\n onActivate,\n onDismiss,\n ctaLabel,\n dismissLabel,\n leaving,\n className,\n ...rest\n },\n ref,\n ) => {\n const { t, i18n } = useTranslation();\n\n const accessibleTime = useMemo(() => {\n const date = new Date(item.sentAt);\n if (Number.isNaN(date.getTime())) return '';\n return new Intl.DateTimeFormat(i18n.language, {\n dateStyle: 'medium',\n timeStyle: 'short',\n }).format(date);\n }, [item.sentAt, i18n.language]);\n\n const isControlledLeaving = leaving !== undefined;\n const [isLeaving, setIsLeaving] = useState(false);\n const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n const prefersReducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n const handleDismiss = useCallback(\n (event?: React.MouseEvent) => {\n // The card carries a stretched-link `::after` overlay for the\n // whole-row click target. The dismiss button is rendered above it\n // (z-index), but click events still bubble — stop propagation so the\n // wrapper's navigation does not fire alongside the dismiss action.\n event?.preventDefault();\n event?.stopPropagation();\n if (!onDismiss) return;\n if (isControlledLeaving || prefersReducedMotion) {\n onDismiss(item);\n return;\n }\n setIsLeaving(true);\n if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n const raw =\n (typeof window !== 'undefined' &&\n window\n .getComputedStyle(document.documentElement)\n .getPropertyValue('--animation-duration')) ||\n '200ms';\n const ms = raw.trim().endsWith('ms')\n ? parseFloat(raw)\n : parseFloat(raw) * 1000;\n dismissTimerRef.current = setTimeout(\n () => onDismiss(item),\n Number.isFinite(ms) ? ms : 200,\n );\n },\n [onDismiss, item, isControlledLeaving, prefersReducedMotion],\n );\n\n const state = item.read ? 'read' : 'unread';\n\n const unreadSuffix = item.read\n ? ''\n : t('messageCard.unreadSuffix', ', unread');\n const subjectFragment = item.subject\n ? t('messageCard.subjectFragment', {\n subject: item.subject,\n defaultValue: ' — {{subject}}',\n })\n : '';\n const ariaLabel = t('messageCard.itemLabel', {\n sender: item.sender.name,\n subjectFragment,\n time: accessibleTime,\n unreadSuffix,\n defaultValue:\n 'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n });\n\n const hasSafeUrl = !!item.url && isSafeEntityUrl(item.url);\n\n /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n const senderText = (\n <span\n className={[\n 'ds:flex-1 ds:min-w-0 ds:truncate',\n item.read ? 'ds:font-normal' : 'ds:font-semibold',\n ].join(' ')}\n >\n {item.sender.name}\n </span>\n );\n\n let senderNode: ReactNode;\n if (variant === 'compact' && hasSafeUrl && onActivate) {\n senderNode = (\n <a\n href={item.url}\n aria-label={ariaLabel}\n className={stretchedLinkClass + ' ds:contents'}\n onClick={(event) => {\n // Let the browser handle modifier-click (open in new tab,\n // download, etc.) and respect upstream preventDefault.\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n // When the consumer wires `onActivate`, they own routing — stop\n // the browser's default navigation so we don't full-page reload\n // out of an SPA shell or a test iframe.\n event.preventDefault();\n onActivate(item);\n }}\n >\n {senderText}\n </a>\n );\n } else if (variant === 'compact' && onActivate) {\n senderNode = (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n className={\n stretchedLinkClass +\n ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n }\n onClick={() => onActivate(item)}\n >\n {senderText}\n </button>\n );\n } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n senderNode = (\n <a\n href={item.url}\n className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n onClick={(event) => {\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n onActivate(item);\n }}\n >\n {senderText}\n </a>\n );\n } else {\n senderNode = senderText;\n }\n\n const showThreadCount =\n typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n return (\n <div\n ref={ref}\n role=\"listitem\"\n data-component=\"message-card\"\n data-component-id={item.id}\n data-read={item.read ? 'true' : 'false'}\n data-leaving={effectiveLeaving ? 'true' : undefined}\n aria-hidden={effectiveLeaving || undefined}\n className={cardVariants({ variant, size, state, className })}\n {...rest}\n >\n {/* Avatar is decorative here — the row's assembled `aria-label`\n already names the sender, so letting Avatar contribute its own\n `role=\"img\"` + `aria-label={name}` would announce the name twice\n per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n they win over Avatar's internal values) pulls the element out of\n the a11y tree entirely. */}\n <Avatar\n name={item.sender.name}\n src={item.sender.avatarUrl}\n size={size === 'md' ? 'md' : 'sm'}\n className=\"ds:shrink-0\"\n aria-hidden=\"true\"\n role=\"presentation\"\n aria-label={undefined}\n />\n\n <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n {!item.read ? (\n <span\n aria-hidden=\"true\"\n className=\"ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]\"\n />\n ) : null}\n {variant === 'dashboard' ? (\n <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n {senderNode}\n </h3>\n ) : (\n <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n {senderNode}\n </span>\n )}\n {showThreadCount ? (\n <span\n aria-label={t('messageCard.threadCount', {\n count: item.unreadCount,\n defaultValue_one: '{{count}} new message in thread',\n defaultValue_other: '{{count}} new messages in thread',\n })}\n className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n >\n {item.unreadCount}\n </span>\n ) : null}\n </div>\n\n {item.subject ? (\n <p\n className={[\n 'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n item.read ? 'ds:font-normal' : 'ds:font-semibold',\n ].join(' ')}\n >\n {item.subject}\n </p>\n ) : null}\n\n <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n {item.preview}\n </p>\n\n <Timestamp\n value={item.sentAt}\n shape=\"chip\"\n size=\"sm\"\n relativeWindow={12 * 60 * 60 * 1000}\n />\n\n {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n {ctaLabel && hasSafeUrl ? (\n <Button\n intent=\"outline\"\n size=\"sm\"\n asChild\n className=\"ds:relative ds:z-[1]\"\n >\n <a\n href={item.url}\n onClick={(event) => {\n if (\n event.defaultPrevented ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey\n )\n return;\n onActivate?.(item);\n }}\n >\n {ctaLabel}\n </a>\n </Button>\n ) : null}\n {dismissLabel && onDismiss ? (\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={handleDismiss}\n className=\"ds:relative ds:z-[1]\"\n >\n {dismissLabel}\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n\n {variant === 'compact' && onDismiss ? (\n <span className=\"ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none\">\n <IconButton\n icon={<X />}\n intent=\"ghost\"\n size=\"sm\"\n aria-label={t('messageCard.dismiss', 'Dismiss message')}\n onClick={handleDismiss}\n />\n </span>\n ) : null}\n </div>\n );\n },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","MessageCard","forwardRef","item","variant","size","onActivate","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","event","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","isSafeEntityUrl","senderText","jsx","senderNode","showThreadCount","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import { I as me } from "./icon-button-LqoiKcUN.js";
|
|
|
9
9
|
import { B as E } from "./button-DD_0Xdmr.js";
|
|
10
10
|
import { S as L } from "./separator-CYU_bGFn.js";
|
|
11
11
|
import { S as f } from "./skeleton-CZbwyJAA.js";
|
|
12
|
-
import { M as pe } from "./message-card-
|
|
12
|
+
import { M as pe } from "./message-card-Bx4GmLvf.js";
|
|
13
13
|
import { u as ue } from "./registry-nPAVE19X.js";
|
|
14
14
|
import { M as F } from "./mail-C8irm52s.js";
|
|
15
15
|
const ge = {
|
|
@@ -412,4 +412,4 @@ export {
|
|
|
412
412
|
be as M,
|
|
413
413
|
ge as m
|
|
414
414
|
};
|
|
415
|
-
//# sourceMappingURL=message-tray-
|
|
415
|
+
//# sourceMappingURL=message-tray-CVyJajVJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-tray-saAVMeHP.js","sources":["../../src/components/message-tray/message-tray.agent.ts","../../src/components/message-tray/message-tray.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — MessageTray. */\n/* */\n/* Tray-level surface: open/close the inbox panel, read message ids and */\n/* unread flag (never sender names / subjects / previews — those are */\n/* PHI), and route per-message operations through the curated handle. */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { MessageTrayHandle } from './message-tray';\n\nexport const messageTrayAgent: AgentAdapter<MessageTrayHandle> = {\n id: 'message-tray',\n capabilities: ['open', 'close', 'select_single', 'dismiss'],\n state: {\n items: {\n type: 'Array<{ id: string; read: boolean }>',\n descriptionKey: 'ui.agent.messageTray.state.items',\n description:\n 'Currently-displayed messages. Ids + read flag only — no PHI / no sender names.',\n read: (handle) => handle.getItems(),\n },\n unreadCount: {\n type: 'number',\n descriptionKey: 'ui.agent.messageTray.state.unreadCount',\n description: 'Badge unread count surfaced by the host.',\n read: (handle) => handle.getUnreadCount(),\n },\n isOpen: {\n type: 'boolean',\n descriptionKey: 'ui.agent.messageTray.state.isOpen',\n description: 'Whether the dropdown panel is currently open.',\n read: (handle) => handle.isOpen(),\n },\n },\n actions: {\n open: {\n safety: 'read',\n descriptionKey: 'ui.agent.messageTray.actions.open',\n description: 'Open the message panel.',\n invoke: (handle) => {\n handle.open();\n },\n },\n close: {\n safety: 'read',\n descriptionKey: 'ui.agent.messageTray.actions.close',\n description: 'Close the message panel.',\n invoke: (handle) => {\n handle.close();\n },\n },\n select_item: {\n safety: 'read',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.selectItem',\n description: 'Activate the message with the given id.',\n invoke: (handle, args: { id: string }) => {\n handle.selectItem(args.id);\n },\n },\n mark_read: {\n safety: 'write',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.markRead',\n description: 'Request the host to mark a message as read.',\n invoke: (handle, args: { id: string }) => {\n handle.markRead(args.id);\n },\n },\n dismiss: {\n safety: 'destructive',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.dismiss',\n description:\n 'Request the host to dismiss / archive the message with the given id.',\n invoke: (handle, args: { id: string }) => {\n handle.dismiss(args.id);\n },\n },\n },\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'message-tray',\n description: 'Marks the MessageTray wrapper.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description:\n 'Sourced from the id prop. Required to address a specific tray from the agent.',\n },\n item: {\n attr: 'data-message-id',\n description:\n 'Stable message id emitted on each rendered MessageCard inside the tray.',\n },\n },\n};\n","import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type HTMLAttributes,\n} from 'react';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { useControllableState } from '../../hooks/use-controllable-state';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\nimport { Mail } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Separator } from '../separator/separator';\nimport { Skeleton } from '../skeleton/skeleton';\nimport { MessageCard, type MessageItem } from '../message-card/message-card';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { messageTrayAgent } from './message-tray.agent';\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\n/**\n * Curated imperative handle for MessageTray. Exposed as the forwardRef\n * target so a future agent / MCP UI bridge can drive the tray without\n * touching the DOM. See `message-tray.agent.ts`.\n */\nexport interface MessageTrayHandle {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n getItems: () => Array<{ id: string; read: boolean }>;\n getUnreadCount: () => number;\n selectItem: (id: string) => void;\n markRead: (id: string) => void;\n dismiss: (id: string) => void;\n}\n\nexport interface MessageTrayProps\n extends\n Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onClick' | 'children' | 'role' | 'id'\n >,\n VariantProps<typeof messageTrayVariants> {\n /**\n * Stable instance id. Surfaced on the root as `data-component-id` so\n * an agent / MCP UI bridge can address this specific tray.\n */\n id?: string;\n /** Fires when the host should mark a single message as read (used by agent integration). */\n onMarkRead?: (item: MessageItem) => void;\n /** Messages rendered in the dropdown panel. */\n items: MessageItem[];\n /** Number of unread messages. Drives the badge count. */\n unreadCount?: number;\n /** Controlled open state. */\n open?: boolean;\n /** Fires when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n /** Fires when the user activates an item (click or Enter/Space). */\n onItemClick?: (item: MessageItem) => void;\n /** Fires when the user dismisses / archives a message. */\n onDismiss?: (item: MessageItem) => void;\n /** Fires when the user clicks the header \"Mark all as read\" action. */\n onMarkAllRead?: () => void;\n /** When true the panel shows skeleton placeholders. */\n loading?: boolean;\n /**\n * Advisory item count before the list scrolls. Consumers override the cap\n * via the `--message-tray-max-block-size` custom property.\n */\n maxVisible?: number;\n /** When set renders a footer link that invokes `onViewAll`. */\n viewAllLabel?: string;\n /** Fires when the footer \"View all\" link is clicked. */\n onViewAll?: () => void;\n /** Panel alignment relative to the trigger. Default `'end'`. */\n align?: 'start' | 'center' | 'end';\n /** Side of the trigger to open on. Default `'bottom'`. */\n side?: 'top' | 'bottom';\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst messageTrayVariants = cva('ds:relative ds:inline-flex ds:items-center', {\n variants: {\n size: {\n sm: '',\n md: '',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nconst panelVariants = cva(\n [\n 'ds:flex ds:flex-col',\n 'ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]',\n 'ds:border ds:border-[color:var(--card-border)]',\n 'ds:rounded-[var(--radius-md)]',\n 'ds:shadow-[var(--shadow-lg)]',\n 'ds:z-[var(--z-popover)]',\n // Width: fluid below the design cap so narrow viewports keep a visible\n // gutter on both sides (shadow included). Cap slightly wider than\n // NotificationTray because message rows carry subject + preview.\n 'ds:w-[min(26rem,calc(100vw-2*var(--spacing-md)))]',\n // Height: below the `sm` breakpoint the panel takes a near-full-screen\n // sheet shape so the user gets room to triage an inbox without\n // scrolling a tiny popover. `6rem` reserves space for the Header\n // (≈4rem) plus the sideOffset + collisionPadding (≈2rem). Above `sm`\n // it returns to `h-auto` so the list's own cap governs the height.\n 'ds:h-[calc(100dvh-6rem)] ds:sm:h-auto',\n 'ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out',\n 'ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0',\n 'ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95',\n 'ds:motion-reduce:transition-none ds:motion-reduce:animate-none',\n 'ds:focus-visible:outline-none',\n 'ds:forced-colors:border-[CanvasText]',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'ds:p-[var(--spacing-xs)]',\n md: 'ds:p-[var(--spacing-sm)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n);\n\nconst badgeVariants = cva(\n [\n 'ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]',\n 'ds:inline-flex ds:items-center ds:justify-center',\n 'ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]',\n 'ds:rounded-[var(--radius-full)]',\n 'ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]',\n 'ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none',\n 'ds:pointer-events-none ds:select-none',\n 'ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]',\n ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Helpers */\n/* ------------------------------------------------------------------ */\n\nfunction formatBadgeCount(count: number, overflowLabel: string): string {\n return count > 99 ? overflowLabel : String(count);\n}\n\nfunction SkeletonRow() {\n return (\n <div\n aria-hidden=\"true\"\n className=\"ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]\"\n >\n <Skeleton variant=\"circular\" size=\"sm\" />\n <div className=\"ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n <Skeleton variant=\"text\" size=\"md\" width=\"60%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"80%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"95%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"30%\" />\n </div>\n </div>\n );\n}\n\nfunction EmptyPanel() {\n const { t } = useTranslation();\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className=\"ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center\"\n >\n <span\n aria-hidden=\"true\"\n className=\"ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5\"\n >\n <Mail />\n </span>\n <p className=\"type-title-item ds:text-[color:var(--foreground)]\">\n {t('messageTray.noMessages', 'No messages')}\n </p>\n <p className=\"type-meta ds:text-[color:var(--muted-foreground)]\">\n {t('messageTray.noMessagesDescription', 'Your inbox is clear.')}\n </p>\n </div>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\nexport const MessageTray = forwardRef<HTMLDivElement, MessageTrayProps>(\n (\n {\n id,\n items,\n unreadCount,\n open,\n onOpenChange,\n onItemClick,\n onDismiss,\n onMarkRead,\n onMarkAllRead,\n loading = false,\n maxVisible,\n viewAllLabel,\n onViewAll,\n align = 'end',\n side = 'bottom',\n size = 'md',\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation();\n\n const [isOpenRaw, handleOpenChange] = useControllableState<boolean>({\n value: open,\n defaultValue: false,\n onChange: onOpenChange,\n });\n const isOpen = isOpenRaw ?? false;\n\n /* Exit-animation list — same AnimatePresence-style bookkeeping as\n * NotificationTray. See that component for rationale. */\n type Displayed = { item: MessageItem; leaving: boolean };\n const [displayed, setDisplayed] = useState<Displayed[]>(() =>\n items.map((item) => ({ item, leaving: false })),\n );\n\n const animationDurationMs = useCallback((): number => {\n if (typeof window === 'undefined') return 200;\n const raw = window\n .getComputedStyle(document.documentElement)\n .getPropertyValue('--animation-duration');\n if (!raw) return 200;\n const trimmed = raw.trim();\n const n = parseFloat(trimmed);\n if (!Number.isFinite(n)) return 200;\n return trimmed.endsWith('ms') ? n : n * 1000;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n setDisplayed((prev) => {\n const nextIds = new Set(items.map((i) => i.id));\n const prevIds = new Set(prev.map((d) => d.item.id));\n\n const merged: Displayed[] = prev.map((d) => {\n if (nextIds.has(d.item.id)) {\n const fresh = items.find((i) => i.id === d.item.id);\n return fresh\n ? { item: fresh, leaving: false }\n : { ...d, leaving: true };\n }\n return { ...d, leaving: true };\n });\n\n for (const i of items) {\n if (!prevIds.has(i.id)) merged.push({ item: i, leaving: false });\n }\n return merged;\n });\n }, [items]);\n\n useEffect(() => {\n if (!displayed.some((d) => d.leaving)) return;\n const ms = animationDurationMs();\n const timer = setTimeout(() => {\n setDisplayed((prev) => prev.filter((d) => !d.leaving));\n }, ms);\n return () => clearTimeout(timer);\n }, [displayed, animationDurationMs]);\n\n const liveRegionRef = useRef<HTMLDivElement | null>(null);\n const lastTopIdRef = useRef<string | undefined>(items[0]?.id);\n\n useEffect(() => {\n const topId = items[0]?.id;\n const prev = lastTopIdRef.current;\n if (prev && topId && prev !== topId && liveRegionRef.current) {\n const newest = items[0];\n if (newest && !newest.read) {\n liveRegionRef.current.textContent = t('messageTray.newMessage', {\n sender: newest.sender.name,\n defaultValue: 'New message from {{sender}}',\n });\n }\n }\n lastTopIdRef.current = topId;\n }, [items, t]);\n\n const displayCount = unreadCount ?? 0;\n const triggerAriaLabel =\n displayCount > 0\n ? t('messageTray.triggerLabel', {\n count: displayCount,\n defaultValue: 'Messages, {{count}} unread',\n })\n : t('messageTray.triggerLabelNone', 'Messages, none unread');\n\n const badgeLabel = formatBadgeCount(\n displayCount,\n t('messageTray.badgeCountOverflow', '99+'),\n );\n\n const panelClass = panelVariants({ size });\n\n /* Curated imperative handle for agent integration. See\n * message-tray.agent.ts. */\n const itemsRef = useRef<MessageItem[]>(items);\n itemsRef.current = items;\n const unreadRef = useRef<number | undefined>(unreadCount);\n unreadRef.current = unreadCount;\n const isOpenRef = useRef<boolean>(isOpen);\n isOpenRef.current = isOpen;\n\n const handle = useMemo<MessageTrayHandle>(\n () => ({\n open: () => handleOpenChange(true),\n close: () => handleOpenChange(false),\n isOpen: () => isOpenRef.current,\n getItems: () =>\n itemsRef.current.map((i) => ({ id: i.id, read: !!i.read })),\n getUnreadCount: () =>\n unreadRef.current ?? itemsRef.current.filter((i) => !i.read).length,\n selectItem: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onItemClick?.(found);\n },\n markRead: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onMarkRead?.(found);\n },\n dismiss: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onDismiss?.(found);\n },\n }),\n [handleOpenChange, onItemClick, onMarkRead, onDismiss],\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, []);\n useAgentRegistration(messageTrayAgent, handle, id);\n\n return (\n <div\n ref={rootRef}\n data-component=\"message-tray\"\n data-component-id={id}\n className={[messageTrayVariants({ size }), className]\n .filter(Boolean)\n .join(' ')}\n {...rest}\n >\n <RadixPopover.Root open={isOpen} onOpenChange={handleOpenChange}>\n <RadixPopover.Trigger asChild>\n <IconButton\n icon={<Mail />}\n intent=\"outline\"\n size={size === 'sm' ? 'sm' : 'md'}\n aria-label={triggerAriaLabel}\n aria-haspopup=\"dialog\"\n />\n </RadixPopover.Trigger>\n {displayCount > 0 ? (\n <span\n aria-hidden=\"true\"\n data-testid=\"message-tray-badge\"\n className={badgeVariants()}\n >\n {badgeLabel}\n </span>\n ) : null}\n <div\n ref={liveRegionRef}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"ds:sr-only\"\n />\n <RadixPopover.Portal>\n <RadixPopover.Content\n role=\"dialog\"\n aria-label={t('messageTray.panelTitle', 'Messages')}\n side={side}\n align={align}\n sideOffset={8}\n // `spacing-md` (16px) keeps Radix's collision-avoidance from\n // flush-mounting the panel against the viewport edge when the\n // trigger is near the inline-end of a narrow screen.\n collisionPadding={16}\n className={panelClass}\n >\n <div className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]\">\n <h3 className=\"ds:m-0 type-title-card ds:text-[color:var(--foreground)]\">\n {t('messageTray.panelTitle', 'Messages')}\n </h3>\n {onMarkAllRead && items.some((item) => !item.read) ? (\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={onMarkAllRead}\n className=\"ds:text-[length:var(--font-size-xs)]\"\n >\n {t('messageTray.markAllRead', 'Mark all as read')}\n </Button>\n ) : null}\n </div>\n <Separator />\n <div\n // Only carry `role=\"list\"` when there are list children —\n // axe's `aria-required-children` rule fires on an empty\n // list. The loading skeleton + populated rendering both\n // produce role=\"listitem\" descendants below.\n role={displayed.length > 0 ? 'list' : undefined}\n data-max-visible={maxVisible}\n // Below `sm` the panel is a near-full-screen sheet (see\n // `panelVariants`) and the list expands to fill the\n // remaining space with `flex-1`. Above `sm` the list\n // caps at the `--message-tray-max-block-size` custom\n // property so the popover stays compact.\n className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]\"\n >\n {loading ? (\n <>\n <SkeletonRow />\n <SkeletonRow />\n <SkeletonRow />\n </>\n ) : displayed.length === 0 ? (\n <EmptyPanel />\n ) : (\n displayed.map(({ item, leaving }) => (\n <MessageCard\n key={item.id}\n item={item}\n variant=\"compact\"\n leaving={leaving}\n onActivate={onItemClick}\n onDismiss={onDismiss}\n data-message-id={item.id}\n />\n ))\n )}\n </div>\n {viewAllLabel ? (\n <>\n <Separator />\n <div className=\"ds:pt-[var(--spacing-xs)]\">\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={onViewAll}\n className=\"ds:w-full ds:justify-center\"\n >\n {viewAllLabel}\n </Button>\n </div>\n </>\n ) : null}\n </RadixPopover.Content>\n </RadixPopover.Portal>\n </RadixPopover.Root>\n </div>\n );\n },\n);\n\nMessageTray.displayName = 'MessageTray';\n"],"names":["messageTrayAgent","handle","args","messageTrayVariants","cva","panelVariants","badgeVariants","formatBadgeCount","count","overflowLabel","SkeletonRow","jsxs","jsx","Skeleton","EmptyPanel","t","useTranslation","Mail","MessageTray","forwardRef","id","items","unreadCount","open","onOpenChange","onItemClick","onDismiss","onMarkRead","onMarkAllRead","loading","maxVisible","viewAllLabel","onViewAll","align","side","size","className","rest","ref","isOpenRaw","handleOpenChange","useControllableState","isOpen","displayed","setDisplayed","useState","item","animationDurationMs","useCallback","raw","trimmed","useIsomorphicLayoutEffect","prev","nextIds","prevIds","d","merged","fresh","i","useEffect","ms","timer","liveRegionRef","useRef","lastTopIdRef","_a","topId","newest","displayCount","triggerAriaLabel","badgeLabel","panelClass","itemsRef","unreadRef","isOpenRef","useMemo","targetId","found","rootRef","useImperativeHandle","useAgentRegistration","RadixPopover","IconButton","Button","Separator","Fragment","leaving","MessageCard"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"message-tray-CVyJajVJ.js","sources":["../../src/components/message-tray/message-tray.agent.ts","../../src/components/message-tray/message-tray.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — MessageTray. */\n/* */\n/* Tray-level surface: open/close the inbox panel, read message ids and */\n/* unread flag (never sender names / subjects / previews — those are */\n/* PHI), and route per-message operations through the curated handle. */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { MessageTrayHandle } from './message-tray';\n\nexport const messageTrayAgent: AgentAdapter<MessageTrayHandle> = {\n id: 'message-tray',\n capabilities: ['open', 'close', 'select_single', 'dismiss'],\n state: {\n items: {\n type: 'Array<{ id: string; read: boolean }>',\n descriptionKey: 'ui.agent.messageTray.state.items',\n description:\n 'Currently-displayed messages. Ids + read flag only — no PHI / no sender names.',\n read: (handle) => handle.getItems(),\n },\n unreadCount: {\n type: 'number',\n descriptionKey: 'ui.agent.messageTray.state.unreadCount',\n description: 'Badge unread count surfaced by the host.',\n read: (handle) => handle.getUnreadCount(),\n },\n isOpen: {\n type: 'boolean',\n descriptionKey: 'ui.agent.messageTray.state.isOpen',\n description: 'Whether the dropdown panel is currently open.',\n read: (handle) => handle.isOpen(),\n },\n },\n actions: {\n open: {\n safety: 'read',\n descriptionKey: 'ui.agent.messageTray.actions.open',\n description: 'Open the message panel.',\n invoke: (handle) => {\n handle.open();\n },\n },\n close: {\n safety: 'read',\n descriptionKey: 'ui.agent.messageTray.actions.close',\n description: 'Close the message panel.',\n invoke: (handle) => {\n handle.close();\n },\n },\n select_item: {\n safety: 'read',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.selectItem',\n description: 'Activate the message with the given id.',\n invoke: (handle, args: { id: string }) => {\n handle.selectItem(args.id);\n },\n },\n mark_read: {\n safety: 'write',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.markRead',\n description: 'Request the host to mark a message as read.',\n invoke: (handle, args: { id: string }) => {\n handle.markRead(args.id);\n },\n },\n dismiss: {\n safety: 'destructive',\n argsType: '{ id: string }',\n descriptionKey: 'ui.agent.messageTray.actions.dismiss',\n description:\n 'Request the host to dismiss / archive the message with the given id.',\n invoke: (handle, args: { id: string }) => {\n handle.dismiss(args.id);\n },\n },\n },\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'message-tray',\n description: 'Marks the MessageTray wrapper.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description:\n 'Sourced from the id prop. Required to address a specific tray from the agent.',\n },\n item: {\n attr: 'data-message-id',\n description:\n 'Stable message id emitted on each rendered MessageCard inside the tray.',\n },\n },\n};\n","import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type HTMLAttributes,\n} from 'react';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { useControllableState } from '../../hooks/use-controllable-state';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\nimport { Mail } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Separator } from '../separator/separator';\nimport { Skeleton } from '../skeleton/skeleton';\nimport { MessageCard, type MessageItem } from '../message-card/message-card';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { messageTrayAgent } from './message-tray.agent';\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\n/**\n * Curated imperative handle for MessageTray. Exposed as the forwardRef\n * target so a future agent / MCP UI bridge can drive the tray without\n * touching the DOM. See `message-tray.agent.ts`.\n */\nexport interface MessageTrayHandle {\n open: () => void;\n close: () => void;\n isOpen: () => boolean;\n getItems: () => Array<{ id: string; read: boolean }>;\n getUnreadCount: () => number;\n selectItem: (id: string) => void;\n markRead: (id: string) => void;\n dismiss: (id: string) => void;\n}\n\nexport interface MessageTrayProps\n extends\n Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onClick' | 'children' | 'role' | 'id'\n >,\n VariantProps<typeof messageTrayVariants> {\n /**\n * Stable instance id. Surfaced on the root as `data-component-id` so\n * an agent / MCP UI bridge can address this specific tray.\n */\n id?: string;\n /** Fires when the host should mark a single message as read (used by agent integration). */\n onMarkRead?: (item: MessageItem) => void;\n /** Messages rendered in the dropdown panel. */\n items: MessageItem[];\n /** Number of unread messages. Drives the badge count. */\n unreadCount?: number;\n /** Controlled open state. */\n open?: boolean;\n /** Fires when the open state changes. */\n onOpenChange?: (open: boolean) => void;\n /** Fires when the user activates an item (click or Enter/Space). */\n onItemClick?: (item: MessageItem) => void;\n /** Fires when the user dismisses / archives a message. */\n onDismiss?: (item: MessageItem) => void;\n /** Fires when the user clicks the header \"Mark all as read\" action. */\n onMarkAllRead?: () => void;\n /** When true the panel shows skeleton placeholders. */\n loading?: boolean;\n /**\n * Advisory item count before the list scrolls. Consumers override the cap\n * via the `--message-tray-max-block-size` custom property.\n */\n maxVisible?: number;\n /** When set renders a footer link that invokes `onViewAll`. */\n viewAllLabel?: string;\n /** Fires when the footer \"View all\" link is clicked. */\n onViewAll?: () => void;\n /** Panel alignment relative to the trigger. Default `'end'`. */\n align?: 'start' | 'center' | 'end';\n /** Side of the trigger to open on. Default `'bottom'`. */\n side?: 'top' | 'bottom';\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA */\n/* ------------------------------------------------------------------ */\n\nconst messageTrayVariants = cva('ds:relative ds:inline-flex ds:items-center', {\n variants: {\n size: {\n sm: '',\n md: '',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nconst panelVariants = cva(\n [\n 'ds:flex ds:flex-col',\n 'ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]',\n 'ds:border ds:border-[color:var(--card-border)]',\n 'ds:rounded-[var(--radius-md)]',\n 'ds:shadow-[var(--shadow-lg)]',\n 'ds:z-[var(--z-popover)]',\n // Width: fluid below the design cap so narrow viewports keep a visible\n // gutter on both sides (shadow included). Cap slightly wider than\n // NotificationTray because message rows carry subject + preview.\n 'ds:w-[min(26rem,calc(100vw-2*var(--spacing-md)))]',\n // Height: below the `sm` breakpoint the panel takes a near-full-screen\n // sheet shape so the user gets room to triage an inbox without\n // scrolling a tiny popover. `6rem` reserves space for the Header\n // (≈4rem) plus the sideOffset + collisionPadding (≈2rem). Above `sm`\n // it returns to `h-auto` so the list's own cap governs the height.\n 'ds:h-[calc(100dvh-6rem)] ds:sm:h-auto',\n 'ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out',\n 'ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0',\n 'ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95',\n 'ds:motion-reduce:transition-none ds:motion-reduce:animate-none',\n 'ds:focus-visible:outline-none',\n 'ds:forced-colors:border-[CanvasText]',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'ds:p-[var(--spacing-xs)]',\n md: 'ds:p-[var(--spacing-sm)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n);\n\nconst badgeVariants = cva(\n [\n 'ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]',\n 'ds:inline-flex ds:items-center ds:justify-center',\n 'ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]',\n 'ds:rounded-[var(--radius-full)]',\n 'ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]',\n 'ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none',\n 'ds:pointer-events-none ds:select-none',\n 'ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]',\n ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Helpers */\n/* ------------------------------------------------------------------ */\n\nfunction formatBadgeCount(count: number, overflowLabel: string): string {\n return count > 99 ? overflowLabel : String(count);\n}\n\nfunction SkeletonRow() {\n return (\n <div\n aria-hidden=\"true\"\n className=\"ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]\"\n >\n <Skeleton variant=\"circular\" size=\"sm\" />\n <div className=\"ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n <Skeleton variant=\"text\" size=\"md\" width=\"60%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"80%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"95%\" />\n <Skeleton variant=\"text\" size=\"sm\" width=\"30%\" />\n </div>\n </div>\n );\n}\n\nfunction EmptyPanel() {\n const { t } = useTranslation();\n return (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className=\"ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center\"\n >\n <span\n aria-hidden=\"true\"\n className=\"ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5\"\n >\n <Mail />\n </span>\n <p className=\"type-title-item ds:text-[color:var(--foreground)]\">\n {t('messageTray.noMessages', 'No messages')}\n </p>\n <p className=\"type-meta ds:text-[color:var(--muted-foreground)]\">\n {t('messageTray.noMessagesDescription', 'Your inbox is clear.')}\n </p>\n </div>\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\nexport const MessageTray = forwardRef<HTMLDivElement, MessageTrayProps>(\n (\n {\n id,\n items,\n unreadCount,\n open,\n onOpenChange,\n onItemClick,\n onDismiss,\n onMarkRead,\n onMarkAllRead,\n loading = false,\n maxVisible,\n viewAllLabel,\n onViewAll,\n align = 'end',\n side = 'bottom',\n size = 'md',\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation();\n\n const [isOpenRaw, handleOpenChange] = useControllableState<boolean>({\n value: open,\n defaultValue: false,\n onChange: onOpenChange,\n });\n const isOpen = isOpenRaw ?? false;\n\n /* Exit-animation list — same AnimatePresence-style bookkeeping as\n * NotificationTray. See that component for rationale. */\n type Displayed = { item: MessageItem; leaving: boolean };\n const [displayed, setDisplayed] = useState<Displayed[]>(() =>\n items.map((item) => ({ item, leaving: false })),\n );\n\n const animationDurationMs = useCallback((): number => {\n if (typeof window === 'undefined') return 200;\n const raw = window\n .getComputedStyle(document.documentElement)\n .getPropertyValue('--animation-duration');\n if (!raw) return 200;\n const trimmed = raw.trim();\n const n = parseFloat(trimmed);\n if (!Number.isFinite(n)) return 200;\n return trimmed.endsWith('ms') ? n : n * 1000;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n setDisplayed((prev) => {\n const nextIds = new Set(items.map((i) => i.id));\n const prevIds = new Set(prev.map((d) => d.item.id));\n\n const merged: Displayed[] = prev.map((d) => {\n if (nextIds.has(d.item.id)) {\n const fresh = items.find((i) => i.id === d.item.id);\n return fresh\n ? { item: fresh, leaving: false }\n : { ...d, leaving: true };\n }\n return { ...d, leaving: true };\n });\n\n for (const i of items) {\n if (!prevIds.has(i.id)) merged.push({ item: i, leaving: false });\n }\n return merged;\n });\n }, [items]);\n\n useEffect(() => {\n if (!displayed.some((d) => d.leaving)) return;\n const ms = animationDurationMs();\n const timer = setTimeout(() => {\n setDisplayed((prev) => prev.filter((d) => !d.leaving));\n }, ms);\n return () => clearTimeout(timer);\n }, [displayed, animationDurationMs]);\n\n const liveRegionRef = useRef<HTMLDivElement | null>(null);\n const lastTopIdRef = useRef<string | undefined>(items[0]?.id);\n\n useEffect(() => {\n const topId = items[0]?.id;\n const prev = lastTopIdRef.current;\n if (prev && topId && prev !== topId && liveRegionRef.current) {\n const newest = items[0];\n if (newest && !newest.read) {\n liveRegionRef.current.textContent = t('messageTray.newMessage', {\n sender: newest.sender.name,\n defaultValue: 'New message from {{sender}}',\n });\n }\n }\n lastTopIdRef.current = topId;\n }, [items, t]);\n\n const displayCount = unreadCount ?? 0;\n const triggerAriaLabel =\n displayCount > 0\n ? t('messageTray.triggerLabel', {\n count: displayCount,\n defaultValue: 'Messages, {{count}} unread',\n })\n : t('messageTray.triggerLabelNone', 'Messages, none unread');\n\n const badgeLabel = formatBadgeCount(\n displayCount,\n t('messageTray.badgeCountOverflow', '99+'),\n );\n\n const panelClass = panelVariants({ size });\n\n /* Curated imperative handle for agent integration. See\n * message-tray.agent.ts. */\n const itemsRef = useRef<MessageItem[]>(items);\n itemsRef.current = items;\n const unreadRef = useRef<number | undefined>(unreadCount);\n unreadRef.current = unreadCount;\n const isOpenRef = useRef<boolean>(isOpen);\n isOpenRef.current = isOpen;\n\n const handle = useMemo<MessageTrayHandle>(\n () => ({\n open: () => handleOpenChange(true),\n close: () => handleOpenChange(false),\n isOpen: () => isOpenRef.current,\n getItems: () =>\n itemsRef.current.map((i) => ({ id: i.id, read: !!i.read })),\n getUnreadCount: () =>\n unreadRef.current ?? itemsRef.current.filter((i) => !i.read).length,\n selectItem: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onItemClick?.(found);\n },\n markRead: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onMarkRead?.(found);\n },\n dismiss: (targetId: string) => {\n const found = itemsRef.current.find((i) => i.id === targetId);\n if (found) onDismiss?.(found);\n },\n }),\n [handleOpenChange, onItemClick, onMarkRead, onDismiss],\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(ref, () => rootRef.current as HTMLDivElement, []);\n useAgentRegistration(messageTrayAgent, handle, id);\n\n return (\n <div\n ref={rootRef}\n data-component=\"message-tray\"\n data-component-id={id}\n className={[messageTrayVariants({ size }), className]\n .filter(Boolean)\n .join(' ')}\n {...rest}\n >\n <RadixPopover.Root open={isOpen} onOpenChange={handleOpenChange}>\n <RadixPopover.Trigger asChild>\n <IconButton\n icon={<Mail />}\n intent=\"outline\"\n size={size === 'sm' ? 'sm' : 'md'}\n aria-label={triggerAriaLabel}\n aria-haspopup=\"dialog\"\n />\n </RadixPopover.Trigger>\n {displayCount > 0 ? (\n <span\n aria-hidden=\"true\"\n data-testid=\"message-tray-badge\"\n className={badgeVariants()}\n >\n {badgeLabel}\n </span>\n ) : null}\n <div\n ref={liveRegionRef}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"ds:sr-only\"\n />\n <RadixPopover.Portal>\n <RadixPopover.Content\n role=\"dialog\"\n aria-label={t('messageTray.panelTitle', 'Messages')}\n side={side}\n align={align}\n sideOffset={8}\n // `spacing-md` (16px) keeps Radix's collision-avoidance from\n // flush-mounting the panel against the viewport edge when the\n // trigger is near the inline-end of a narrow screen.\n collisionPadding={16}\n className={panelClass}\n >\n <div className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]\">\n <h3 className=\"ds:m-0 type-title-card ds:text-[color:var(--foreground)]\">\n {t('messageTray.panelTitle', 'Messages')}\n </h3>\n {onMarkAllRead && items.some((item) => !item.read) ? (\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={onMarkAllRead}\n className=\"ds:text-[length:var(--font-size-xs)]\"\n >\n {t('messageTray.markAllRead', 'Mark all as read')}\n </Button>\n ) : null}\n </div>\n <Separator />\n <div\n // Only carry `role=\"list\"` when there are list children —\n // axe's `aria-required-children` rule fires on an empty\n // list. The loading skeleton + populated rendering both\n // produce role=\"listitem\" descendants below.\n role={displayed.length > 0 ? 'list' : undefined}\n data-max-visible={maxVisible}\n // Below `sm` the panel is a near-full-screen sheet (see\n // `panelVariants`) and the list expands to fill the\n // remaining space with `flex-1`. Above `sm` the list\n // caps at the `--message-tray-max-block-size` custom\n // property so the popover stays compact.\n className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]\"\n >\n {loading ? (\n <>\n <SkeletonRow />\n <SkeletonRow />\n <SkeletonRow />\n </>\n ) : displayed.length === 0 ? (\n <EmptyPanel />\n ) : (\n displayed.map(({ item, leaving }) => (\n <MessageCard\n key={item.id}\n item={item}\n variant=\"compact\"\n leaving={leaving}\n onActivate={onItemClick}\n onDismiss={onDismiss}\n data-message-id={item.id}\n />\n ))\n )}\n </div>\n {viewAllLabel ? (\n <>\n <Separator />\n <div className=\"ds:pt-[var(--spacing-xs)]\">\n <Button\n intent=\"link\"\n size=\"sm\"\n onClick={onViewAll}\n className=\"ds:w-full ds:justify-center\"\n >\n {viewAllLabel}\n </Button>\n </div>\n </>\n ) : null}\n </RadixPopover.Content>\n </RadixPopover.Portal>\n </RadixPopover.Root>\n </div>\n );\n },\n);\n\nMessageTray.displayName = 'MessageTray';\n"],"names":["messageTrayAgent","handle","args","messageTrayVariants","cva","panelVariants","badgeVariants","formatBadgeCount","count","overflowLabel","SkeletonRow","jsxs","jsx","Skeleton","EmptyPanel","t","useTranslation","Mail","MessageTray","forwardRef","id","items","unreadCount","open","onOpenChange","onItemClick","onDismiss","onMarkRead","onMarkAllRead","loading","maxVisible","viewAllLabel","onViewAll","align","side","size","className","rest","ref","isOpenRaw","handleOpenChange","useControllableState","isOpen","displayed","setDisplayed","useState","item","animationDurationMs","useCallback","raw","trimmed","useIsomorphicLayoutEffect","prev","nextIds","prevIds","d","merged","fresh","i","useEffect","ms","timer","liveRegionRef","useRef","lastTopIdRef","_a","topId","newest","displayCount","triggerAriaLabel","badgeLabel","panelClass","itemsRef","unreadRef","isOpenRef","useMemo","targetId","found","rootRef","useImperativeHandle","useAgentRegistration","RadixPopover","IconButton","Button","Separator","Fragment","leaving","MessageCard"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { forwardRef as R, useId as A, useRef as O } from "react";
|
|
|
3
3
|
import { c as P } from "./index-D2ZczOXr.js";
|
|
4
4
|
import { useTranslation as z } from "react-i18next";
|
|
5
5
|
import { A as j } from "./avatar-BNQNhoyL.js";
|
|
6
|
-
import { B as I } from "./badge-
|
|
6
|
+
import { B as I } from "./badge-CqGsX32l.js";
|
|
7
7
|
import { C as T } from "./card-DPmk26CL.js";
|
|
8
8
|
import { R as B } from "./rating-BRD7O74e.js";
|
|
9
9
|
import { u as F } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
|
|
@@ -195,4 +195,4 @@ export {
|
|
|
195
195
|
M as O,
|
|
196
196
|
V as o
|
|
197
197
|
};
|
|
198
|
-
//# sourceMappingURL=operator-hero-
|
|
198
|
+
//# sourceMappingURL=operator-hero-f_KaRhw5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"operator-hero-CM8949Hd.js","sources":["../../src/components/operator-hero/operator-hero.agent.ts","../../src/components/operator-hero/operator-hero.tsx"],"sourcesContent":["import type { AgentAdapter } from '../../agent/types';\nimport type { OperatorHeroHandle } from './operator-hero';\n\nexport const operatorHeroAgent: AgentAdapter<OperatorHeroHandle> = {\n id: 'operator-hero',\n capabilities: ['view_change'],\n state: {\n name: {\n type: 'string',\n descriptionKey: 'ui.agent.operatorHero.state.name',\n description: 'Operator display name currently rendered.',\n read: (handle) => handle.getName(),\n },\n hasColor: {\n type: 'boolean',\n descriptionKey: 'ui.agent.operatorHero.state.hasColor',\n description:\n 'Whether a calendar-colour identity dot is rendered. Structural flag only — never the colour id or any PHI.',\n read: (handle) => handle.getHasColor(),\n },\n },\n actions: {},\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'operator-hero',\n description: 'Marks the OperatorHero root region.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n};\n","import {\n forwardRef,\n useId,\n useRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Avatar } from '../avatar/avatar';\nimport { Badge } from '../badge/badge';\nimport { Card } from '../card/card';\nimport { Rating } from '../rating/rating';\nimport { colorIdToToken } from '../_shared/entity-card';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { operatorHeroAgent } from './operator-hero.agent';\n\n/* -------------------------------------------------------------------- */\n/* OperatorHero */\n/* */\n/* The operator-page counterpart to the consumer-side `<PracticeHero>` */\n/* / `<PracticeProfileHero>` pattern. Differences from the practice */\n/* hero (per the spec): */\n/* */\n/* - Avatar instead of a full hero image background */\n/* - Ratings + reviews summary rendered inline */\n/* - Slightly shorter vertically — no cover strip, denser padding */\n/* */\n/* Use case: individual operator profile page (`/dentista/<slug>/ */\n/* operatori/<name>`), pair with `<ContactProfileCard>` below to fill */\n/* in the operator's contact + profession info. */\n/* -------------------------------------------------------------------- */\n\n/* -------------------------------------------------------------------- */\n/* CVA */\n/* -------------------------------------------------------------------- */\n\nconst rootVariants = cva('ds:w-full ds:text-[color:var(--foreground)]', {\n variants: {\n // Density toggle. Default `comfortable` matches the practice hero's\n // visual weight minus the cover strip. `compact` is for embedded\n // surfaces (booking aside, ROI Dashboard practice panel) where the\n // hero needs to fit in <12rem vertical.\n density: {\n comfortable: '',\n compact: '',\n },\n // Matches the kit's other `surface` props (Booking, ReviewsPanel,\n // ContactProfileCard). `'elevated'` wraps in `<Card>`.\n surface: {\n flat: '',\n elevated: '',\n },\n },\n defaultVariants: {\n density: 'comfortable',\n surface: 'elevated',\n },\n});\n\n/* -------------------------------------------------------------------- */\n/* Public types */\n/* -------------------------------------------------------------------- */\n\nexport interface OperatorHeroBadge {\n /** Display key — i18n is up to the consumer. */\n key: string;\n /** Display label. */\n label: string;\n /** Badge variant — falls back to `neutral`. */\n variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error';\n}\n\nexport interface OperatorHeroRating {\n /** Mean rating, 0–5. */\n value: number;\n /** Total number of reviews. */\n count: number;\n}\n\nexport interface OperatorHeroHandle {\n getName: () => string;\n /** Structural flag — whether a calendar-colour dot is rendered. No PHI. */\n getHasColor: () => boolean;\n}\n\nexport interface OperatorHeroProps extends Omit<\n ComponentPropsWithoutRef<'div'>,\n 'aria-label' | 'children'\n> {\n /** Operator's display name. Rendered as the H1 heading. */\n name: string;\n /**\n * Optional calendar-colour identity for the operator. AlfaDocs assigns each\n * operator a numeric colour id; when present, a small colour dot is rendered\n * next to the name, tinted via `colorIdToToken(colorId)` (a `var(--…)` palette\n * token — never a literal). The id itself is a structural identifier, not PHI.\n */\n colorId?: string;\n /** Specialty / tagline subtitle (e.g. \"Dermatologa · 12 anni di esperienza\"). */\n tagline?: string;\n /**\n * Optional photo / avatar URL. The kit always renders an `<Avatar>` —\n * when `imageUrl` is missing the avatar falls back to initials.\n */\n imageUrl?: string;\n /** Rating summary — when present, renders a Rating + numeric breakdown line. */\n rating?: OperatorHeroRating;\n /**\n * Optional badge row beneath the rating. Use sparingly — 1–3 chips\n * suit the hero's density; longer lists belong in `<ContactProfileCard>`.\n */\n badges?: OperatorHeroBadge[];\n\n /* ----- Slots ----- */\n\n /**\n * Rendered at the inline-end of the heading row (right side on LTR).\n * Use for a \"Book with this operator\" `<Button>` or a \"Back to\n * practice\" link.\n */\n actionSlot?: ReactNode;\n\n /* ----- Styling ----- */\n\n /**\n * `comfortable` (default) — matches the practice hero's visual\n * weight minus the cover strip. `compact` halves the vertical\n * padding for embedded surfaces.\n */\n density?: 'comfortable' | 'compact';\n /**\n * `elevated` (default) wraps in `<Card variant=\"elevated\">`. `flat`\n * drops the Card — use inside another card / sheet.\n */\n surface?: 'flat' | 'elevated';\n\n /* ----- a11y ----- */\n\n 'aria-label'?: string;\n id?: string;\n}\n\n/* -------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------- */\n\nexport const OperatorHero = forwardRef<HTMLDivElement, OperatorHeroProps>(\n (\n {\n name,\n colorId,\n tagline,\n imageUrl,\n rating,\n badges,\n actionSlot,\n density = 'comfortable',\n surface = 'elevated',\n 'aria-label': ariaLabel,\n id,\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation();\n const headingId = useId();\n const resolvedAriaLabel = ariaLabel ?? t('operatorHero.regionLabel');\n\n // Calendar-colour dot. Tint via a component-scoped CSS custom property set\n // imperatively on a ref — mirrors the Avatar `--avatar-color-override`\n // idiom so no `style={{…}}` attribute lands on the JSX (constraint §4).\n const hasColor = colorId !== undefined && colorId !== null;\n const dotRef = useRef<HTMLSpanElement>(null);\n\n useAgentRegistration(\n operatorHeroAgent,\n { getName: () => name, getHasColor: () => hasColor },\n id,\n );\n useIsomorphicLayoutEffect(() => {\n const el = dotRef.current;\n if (!el) return;\n if (hasColor) {\n el.style.setProperty('--operator-hero-color', colorIdToToken(colorId));\n } else {\n el.style.removeProperty('--operator-hero-color');\n }\n }, [hasColor, colorId]);\n\n const ratingLabel = rating\n ? t('operatorHero.ratingLabel', {\n value: rating.value.toFixed(1),\n count: rating.count,\n })\n : undefined;\n\n // Padding scales with density. Comfortable matches the practice\n // hero's `pt-xl pb-md` minus the cover strip; compact halves it.\n const bodyPaddingClass =\n density === 'comfortable'\n ? 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]'\n : 'ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]';\n\n // Avatar size keys off density. Comfortable = 2xl (~72px) to read\n // as the page hero. Compact = xl (~56px) for embedded use.\n const avatarSize = density === 'comfortable' ? '2xl' : 'xl';\n\n // Heading scale tracks density too. Comfortable uses the kit's\n // page-title token; compact drops to title-card so the operator\n // name doesn't dominate an embedded surface.\n const headingClass =\n density === 'comfortable' ? 'type-title-page' : 'type-title-card';\n\n const inner = (\n <div\n className={[\n 'ds:flex ds:items-start ds:gap-[var(--spacing-lg)]',\n bodyPaddingClass,\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n ].join(' ')}\n >\n <Avatar\n size={avatarSize}\n name={name}\n src={imageUrl}\n className=\"ds:shrink-0\"\n />\n <div className=\"ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]\">\n <div className=\"ds:flex ds:items-start ds:gap-[var(--spacing-md)] ds:flex-wrap\">\n <h1\n id={headingId}\n className={`${headingClass} ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--foreground)]`}\n >\n {hasColor ? (\n <span\n ref={dotRef}\n role=\"img\"\n aria-label={t('operatorHero.colorLabel', 'Calendar colour')}\n className=\"ds:inline-block ds:size-[var(--spacing-sm)] ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[var(--operator-hero-color)]\"\n />\n ) : null}\n {name}\n </h1>\n {actionSlot ? (\n <div className=\"ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]\">\n {actionSlot}\n </div>\n ) : null}\n </div>\n {tagline ? (\n <p className=\"type-body ds:m-0 ds:text-[color:var(--foreground)]\">\n {tagline}\n </p>\n ) : null}\n {rating ? (\n <div\n className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\"\n aria-label={ratingLabel}\n >\n <Rating\n value={rating.value}\n max={5}\n size={density === 'comfortable' ? 'md' : 'sm'}\n />\n <span className=\"type-body-sm ds:text-[color:var(--muted-foreground)]\">\n {rating.value.toFixed(1)} · {rating.count}\n </span>\n </div>\n ) : null}\n {badges && badges.length > 0 ? (\n <div\n role=\"list\"\n className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)] ds:mt-[var(--spacing-2xs)]\"\n >\n {badges.map((badge) => (\n <Badge\n key={badge.key}\n variant={badge.variant ?? 'neutral'}\n role=\"listitem\"\n >\n {badge.label}\n </Badge>\n ))}\n </div>\n ) : null}\n </div>\n </div>\n );\n\n return (\n <div\n ref={ref}\n role=\"region\"\n aria-label={resolvedAriaLabel}\n aria-labelledby={headingId}\n data-component=\"operator-hero\"\n data-component-id={id}\n data-density={density}\n id={id}\n className={rootVariants({ surface, density, className })}\n {...rest}\n >\n {surface === 'elevated' ? (\n <Card variant=\"elevated\">{inner}</Card>\n ) : (\n inner\n )}\n </div>\n );\n },\n);\n\nOperatorHero.displayName = 'OperatorHero';\n\nexport type OperatorHeroDensity = NonNullable<\n VariantProps<typeof rootVariants>['density']\n>;\n"],"names":["operatorHeroAgent","handle","rootVariants","cva","OperatorHero","forwardRef","name","colorId","tagline","imageUrl","rating","badges","actionSlot","density","surface","ariaLabel","id","className","rest","ref","t","useTranslation","headingId","useId","resolvedAriaLabel","hasColor","dotRef","useRef","useAgentRegistration","useIsomorphicLayoutEffect","el","colorIdToToken","ratingLabel","bodyPaddingClass","avatarSize","headingClass","inner","jsxs","jsx","Avatar","Rating","badge","Badge","Card"],"mappings":";;;;;;;;;;;AAGO,MAAMA,IAAsD;AAAA,EACjE,IAAI;AAAA,EACJ,cAAc,CAAC,aAAa;AAAA,EAC5B,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,MAAM,CAACC,MAAWA,EAAO,QAAA;AAAA,IAAQ;AAAA,IAEnC,UAAU;AAAA,MACR,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,aACE;AAAA,MACF,MAAM,CAACA,MAAWA,EAAO,YAAA;AAAA,IAAY;AAAA,EACvC;AAAA,EAEF,SAAS,CAAA;AAAA,EACT,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GCIMC,IAAeC,EAAI,+CAA+C;AAAA,EACtE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA,IAIX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,CAAC,GAyFYC,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,cAAcC;AAAA,IACd,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAYC,EAAA,GACZC,IAAoBT,KAAaK,EAAE,0BAA0B,GAK7DK,IAAoClB,KAAY,MAChDmB,IAASC,EAAwB,IAAI;AAE3C,IAAAC;AAAA,MACE5B;AAAA,MACA,EAAE,SAAS,MAAMM,GAAM,aAAa,MAAMmB,EAAA;AAAA,MAC1CT;AAAA,IAAA,GAEFa,EAA0B,MAAM;AAC9B,YAAMC,IAAKJ,EAAO;AAClB,MAAKI,MACDL,IACFK,EAAG,MAAM,YAAY,yBAAyBC,EAAexB,CAAO,CAAC,IAErEuB,EAAG,MAAM,eAAe,uBAAuB;AAAA,IAEnD,GAAG,CAACL,GAAUlB,CAAO,CAAC;AAEtB,UAAMyB,IAActB,IAChBU,EAAE,4BAA4B;AAAA,MAC5B,OAAOV,EAAO,MAAM,QAAQ,CAAC;AAAA,MAC7B,OAAOA,EAAO;AAAA,IAAA,CACf,IACD,QAIEuB,IACJpB,MAAY,gBACR,wDACA,uDAIAqB,IAAarB,MAAY,gBAAgB,QAAQ,MAKjDsB,IACJtB,MAAY,gBAAgB,oBAAoB,mBAE5CuB,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACAJ;AAAA,UACA;AAAA,QAAA,EACA,KAAK,GAAG;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAK;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAML;AAAA,cACN,MAAA5B;AAAA,cACA,KAAKG;AAAA,cACL,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAA4B,EAAC,OAAA,EAAI,WAAU,uEACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAIf;AAAA,kBACJ,WAAW,GAAGa,CAAY;AAAA,kBAEzB,UAAA;AAAA,oBAAAV,IACC,gBAAAa;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,KAAKZ;AAAA,wBACL,MAAK;AAAA,wBACL,cAAYN,EAAE,2BAA2B,iBAAiB;AAAA,wBAC1D,WAAU;AAAA,sBAAA;AAAA,oBAAA,IAEV;AAAA,oBACHd;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFM,IACC,gBAAA0B,EAAC,OAAA,EAAI,WAAU,6EACZ,aACH,IACE;AAAA,YAAA,GACN;AAAA,YACC9B,IACC,gBAAA8B,EAAC,KAAA,EAAE,WAAU,sDACV,aACH,IACE;AAAA,YACH5B,IACC,gBAAA2B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAYL;AAAA,gBAEZ,UAAA;AAAA,kBAAA,gBAAAM;AAAA,oBAACE;AAAA,oBAAA;AAAA,sBACC,OAAO9B,EAAO;AAAA,sBACd,KAAK;AAAA,sBACL,MAAMG,MAAY,gBAAgB,OAAO;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAE3C,gBAAAwB,EAAC,QAAA,EAAK,WAAU,wDACb,UAAA;AAAA,oBAAA3B,EAAO,MAAM,QAAQ,CAAC;AAAA,oBAAE;AAAA,oBAAIA,EAAO;AAAA,kBAAA,EAAA,CACtC;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,IAEA;AAAA,YACHC,KAAUA,EAAO,SAAS,IACzB,gBAAA2B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET,UAAA3B,EAAO,IAAI,CAAC8B,MACX,gBAAAH;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBAEC,SAASD,EAAM,WAAW;AAAA,oBAC1B,MAAK;AAAA,oBAEJ,UAAAA,EAAM;AAAA,kBAAA;AAAA,kBAJFA,EAAM;AAAA,gBAAA,CAMd;AAAA,cAAA;AAAA,YAAA,IAED;AAAA,UAAA,EAAA,CACN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIJ,WACE,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,MAAK;AAAA,QACL,cAAYK;AAAA,QACZ,mBAAiBF;AAAA,QACjB,kBAAe;AAAA,QACf,qBAAmBN;AAAA,QACnB,gBAAcH;AAAA,QACd,IAAAG;AAAA,QACA,WAAWd,EAAa,EAAE,SAAAY,GAAS,SAAAD,GAAS,WAAAI,GAAW;AAAA,QACtD,GAAGC;AAAA,QAEH,gBAAY,aACX,gBAAAoB,EAACK,KAAK,SAAQ,YAAY,aAAM,IAEhCP;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAhC,EAAa,cAAc;"}
|
|
1
|
+
{"version":3,"file":"operator-hero-f_KaRhw5.js","sources":["../../src/components/operator-hero/operator-hero.agent.ts","../../src/components/operator-hero/operator-hero.tsx"],"sourcesContent":["import type { AgentAdapter } from '../../agent/types';\nimport type { OperatorHeroHandle } from './operator-hero';\n\nexport const operatorHeroAgent: AgentAdapter<OperatorHeroHandle> = {\n id: 'operator-hero',\n capabilities: ['view_change'],\n state: {\n name: {\n type: 'string',\n descriptionKey: 'ui.agent.operatorHero.state.name',\n description: 'Operator display name currently rendered.',\n read: (handle) => handle.getName(),\n },\n hasColor: {\n type: 'boolean',\n descriptionKey: 'ui.agent.operatorHero.state.hasColor',\n description:\n 'Whether a calendar-colour identity dot is rendered. Structural flag only — never the colour id or any PHI.',\n read: (handle) => handle.getHasColor(),\n },\n },\n actions: {},\n domHooks: {\n root: {\n attr: 'data-component',\n value: 'operator-hero',\n description: 'Marks the OperatorHero root region.',\n },\n instanceId: {\n attr: 'data-component-id',\n sourceProp: 'id',\n description: 'Sourced from the id prop.',\n },\n },\n};\n","import {\n forwardRef,\n useId,\n useRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Avatar } from '../avatar/avatar';\nimport { Badge } from '../badge/badge';\nimport { Card } from '../card/card';\nimport { Rating } from '../rating/rating';\nimport { colorIdToToken } from '../_shared/entity-card';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { operatorHeroAgent } from './operator-hero.agent';\n\n/* -------------------------------------------------------------------- */\n/* OperatorHero */\n/* */\n/* The operator-page counterpart to the consumer-side `<PracticeHero>` */\n/* / `<PracticeProfileHero>` pattern. Differences from the practice */\n/* hero (per the spec): */\n/* */\n/* - Avatar instead of a full hero image background */\n/* - Ratings + reviews summary rendered inline */\n/* - Slightly shorter vertically — no cover strip, denser padding */\n/* */\n/* Use case: individual operator profile page (`/dentista/<slug>/ */\n/* operatori/<name>`), pair with `<ContactProfileCard>` below to fill */\n/* in the operator's contact + profession info. */\n/* -------------------------------------------------------------------- */\n\n/* -------------------------------------------------------------------- */\n/* CVA */\n/* -------------------------------------------------------------------- */\n\nconst rootVariants = cva('ds:w-full ds:text-[color:var(--foreground)]', {\n variants: {\n // Density toggle. Default `comfortable` matches the practice hero's\n // visual weight minus the cover strip. `compact` is for embedded\n // surfaces (booking aside, ROI Dashboard practice panel) where the\n // hero needs to fit in <12rem vertical.\n density: {\n comfortable: '',\n compact: '',\n },\n // Matches the kit's other `surface` props (Booking, ReviewsPanel,\n // ContactProfileCard). `'elevated'` wraps in `<Card>`.\n surface: {\n flat: '',\n elevated: '',\n },\n },\n defaultVariants: {\n density: 'comfortable',\n surface: 'elevated',\n },\n});\n\n/* -------------------------------------------------------------------- */\n/* Public types */\n/* -------------------------------------------------------------------- */\n\nexport interface OperatorHeroBadge {\n /** Display key — i18n is up to the consumer. */\n key: string;\n /** Display label. */\n label: string;\n /** Badge variant — falls back to `neutral`. */\n variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error';\n}\n\nexport interface OperatorHeroRating {\n /** Mean rating, 0–5. */\n value: number;\n /** Total number of reviews. */\n count: number;\n}\n\nexport interface OperatorHeroHandle {\n getName: () => string;\n /** Structural flag — whether a calendar-colour dot is rendered. No PHI. */\n getHasColor: () => boolean;\n}\n\nexport interface OperatorHeroProps extends Omit<\n ComponentPropsWithoutRef<'div'>,\n 'aria-label' | 'children'\n> {\n /** Operator's display name. Rendered as the H1 heading. */\n name: string;\n /**\n * Optional calendar-colour identity for the operator. AlfaDocs assigns each\n * operator a numeric colour id; when present, a small colour dot is rendered\n * next to the name, tinted via `colorIdToToken(colorId)` (a `var(--…)` palette\n * token — never a literal). The id itself is a structural identifier, not PHI.\n */\n colorId?: string;\n /** Specialty / tagline subtitle (e.g. \"Dermatologa · 12 anni di esperienza\"). */\n tagline?: string;\n /**\n * Optional photo / avatar URL. The kit always renders an `<Avatar>` —\n * when `imageUrl` is missing the avatar falls back to initials.\n */\n imageUrl?: string;\n /** Rating summary — when present, renders a Rating + numeric breakdown line. */\n rating?: OperatorHeroRating;\n /**\n * Optional badge row beneath the rating. Use sparingly — 1–3 chips\n * suit the hero's density; longer lists belong in `<ContactProfileCard>`.\n */\n badges?: OperatorHeroBadge[];\n\n /* ----- Slots ----- */\n\n /**\n * Rendered at the inline-end of the heading row (right side on LTR).\n * Use for a \"Book with this operator\" `<Button>` or a \"Back to\n * practice\" link.\n */\n actionSlot?: ReactNode;\n\n /* ----- Styling ----- */\n\n /**\n * `comfortable` (default) — matches the practice hero's visual\n * weight minus the cover strip. `compact` halves the vertical\n * padding for embedded surfaces.\n */\n density?: 'comfortable' | 'compact';\n /**\n * `elevated` (default) wraps in `<Card variant=\"elevated\">`. `flat`\n * drops the Card — use inside another card / sheet.\n */\n surface?: 'flat' | 'elevated';\n\n /* ----- a11y ----- */\n\n 'aria-label'?: string;\n id?: string;\n}\n\n/* -------------------------------------------------------------------- */\n/* Component */\n/* -------------------------------------------------------------------- */\n\nexport const OperatorHero = forwardRef<HTMLDivElement, OperatorHeroProps>(\n (\n {\n name,\n colorId,\n tagline,\n imageUrl,\n rating,\n badges,\n actionSlot,\n density = 'comfortable',\n surface = 'elevated',\n 'aria-label': ariaLabel,\n id,\n className,\n ...rest\n },\n ref,\n ) => {\n const { t } = useTranslation();\n const headingId = useId();\n const resolvedAriaLabel = ariaLabel ?? t('operatorHero.regionLabel');\n\n // Calendar-colour dot. Tint via a component-scoped CSS custom property set\n // imperatively on a ref — mirrors the Avatar `--avatar-color-override`\n // idiom so no `style={{…}}` attribute lands on the JSX (constraint §4).\n const hasColor = colorId !== undefined && colorId !== null;\n const dotRef = useRef<HTMLSpanElement>(null);\n\n useAgentRegistration(\n operatorHeroAgent,\n { getName: () => name, getHasColor: () => hasColor },\n id,\n );\n useIsomorphicLayoutEffect(() => {\n const el = dotRef.current;\n if (!el) return;\n if (hasColor) {\n el.style.setProperty('--operator-hero-color', colorIdToToken(colorId));\n } else {\n el.style.removeProperty('--operator-hero-color');\n }\n }, [hasColor, colorId]);\n\n const ratingLabel = rating\n ? t('operatorHero.ratingLabel', {\n value: rating.value.toFixed(1),\n count: rating.count,\n })\n : undefined;\n\n // Padding scales with density. Comfortable matches the practice\n // hero's `pt-xl pb-md` minus the cover strip; compact halves it.\n const bodyPaddingClass =\n density === 'comfortable'\n ? 'ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]'\n : 'ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]';\n\n // Avatar size keys off density. Comfortable = 2xl (~72px) to read\n // as the page hero. Compact = xl (~56px) for embedded use.\n const avatarSize = density === 'comfortable' ? '2xl' : 'xl';\n\n // Heading scale tracks density too. Comfortable uses the kit's\n // page-title token; compact drops to title-card so the operator\n // name doesn't dominate an embedded surface.\n const headingClass =\n density === 'comfortable' ? 'type-title-page' : 'type-title-card';\n\n const inner = (\n <div\n className={[\n 'ds:flex ds:items-start ds:gap-[var(--spacing-lg)]',\n bodyPaddingClass,\n 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n ].join(' ')}\n >\n <Avatar\n size={avatarSize}\n name={name}\n src={imageUrl}\n className=\"ds:shrink-0\"\n />\n <div className=\"ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]\">\n <div className=\"ds:flex ds:items-start ds:gap-[var(--spacing-md)] ds:flex-wrap\">\n <h1\n id={headingId}\n className={`${headingClass} ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--foreground)]`}\n >\n {hasColor ? (\n <span\n ref={dotRef}\n role=\"img\"\n aria-label={t('operatorHero.colorLabel', 'Calendar colour')}\n className=\"ds:inline-block ds:size-[var(--spacing-sm)] ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[var(--operator-hero-color)]\"\n />\n ) : null}\n {name}\n </h1>\n {actionSlot ? (\n <div className=\"ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]\">\n {actionSlot}\n </div>\n ) : null}\n </div>\n {tagline ? (\n <p className=\"type-body ds:m-0 ds:text-[color:var(--foreground)]\">\n {tagline}\n </p>\n ) : null}\n {rating ? (\n <div\n className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\"\n aria-label={ratingLabel}\n >\n <Rating\n value={rating.value}\n max={5}\n size={density === 'comfortable' ? 'md' : 'sm'}\n />\n <span className=\"type-body-sm ds:text-[color:var(--muted-foreground)]\">\n {rating.value.toFixed(1)} · {rating.count}\n </span>\n </div>\n ) : null}\n {badges && badges.length > 0 ? (\n <div\n role=\"list\"\n className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)] ds:mt-[var(--spacing-2xs)]\"\n >\n {badges.map((badge) => (\n <Badge\n key={badge.key}\n variant={badge.variant ?? 'neutral'}\n role=\"listitem\"\n >\n {badge.label}\n </Badge>\n ))}\n </div>\n ) : null}\n </div>\n </div>\n );\n\n return (\n <div\n ref={ref}\n role=\"region\"\n aria-label={resolvedAriaLabel}\n aria-labelledby={headingId}\n data-component=\"operator-hero\"\n data-component-id={id}\n data-density={density}\n id={id}\n className={rootVariants({ surface, density, className })}\n {...rest}\n >\n {surface === 'elevated' ? (\n <Card variant=\"elevated\">{inner}</Card>\n ) : (\n inner\n )}\n </div>\n );\n },\n);\n\nOperatorHero.displayName = 'OperatorHero';\n\nexport type OperatorHeroDensity = NonNullable<\n VariantProps<typeof rootVariants>['density']\n>;\n"],"names":["operatorHeroAgent","handle","rootVariants","cva","OperatorHero","forwardRef","name","colorId","tagline","imageUrl","rating","badges","actionSlot","density","surface","ariaLabel","id","className","rest","ref","t","useTranslation","headingId","useId","resolvedAriaLabel","hasColor","dotRef","useRef","useAgentRegistration","useIsomorphicLayoutEffect","el","colorIdToToken","ratingLabel","bodyPaddingClass","avatarSize","headingClass","inner","jsxs","jsx","Avatar","Rating","badge","Badge","Card"],"mappings":"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"}
|
|
@@ -705,7 +705,7 @@ function Ee({ cards: e }) {
|
|
|
705
705
|
// the 100% accent surface and fails AA on the 15% tint.
|
|
706
706
|
// Use `--foreground` which contrasts with the
|
|
707
707
|
// mostly-background mix in both light and dark themes.
|
|
708
|
-
/* @__PURE__ */ a("span", { className: "type-meta ds:ms-auto ds:inline-flex ds:items-center ds:rounded-[var(--radius-full)] ds:bg-[color-mix(in_srgb,var(--accent)_15%,var(--background))] ds:text-[color:var(--foreground)] ds:font-[var(--font-weight-semibold)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: t.badge })
|
|
708
|
+
/* @__PURE__ */ a("span", { className: "type-meta ds:ms-auto ds:inline-flex ds:items-center ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--foreground)] ds:bg-[color-mix(in_srgb,var(--accent)_15%,var(--background))] ds:text-[color:var(--foreground)] ds:font-[var(--font-weight-semibold)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: t.badge })
|
|
709
709
|
) : null
|
|
710
710
|
] }),
|
|
711
711
|
/* @__PURE__ */ a("span", { className: "type-label ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)]", children: t.label }),
|
|
@@ -1155,4 +1155,4 @@ export {
|
|
|
1155
1155
|
Oe as P,
|
|
1156
1156
|
ye as p
|
|
1157
1157
|
};
|
|
1158
|
-
//# sourceMappingURL=patient-search-
|
|
1158
|
+
//# sourceMappingURL=patient-search-DR9XUYRQ.js.map
|