https://bloom.diy/_next/static/chunks/5961.02cd9f5b0ada0f79.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5961],{24616:(e,t,s)=>{s.d(t,{n:()=>f});var n=s(69496),a=s(37172),r=s(7035),l=s(64494),o=s(59651),c=s(98170),i=s(77612),d=s(64666),m=s(49221),x=s(71833);function u(e,t){let s=Math.max(0,e-t);return s<1e3?"+".concat(Math.round(s),"ms"):s<6e4?"+".concat((s/1e3).toFixed(1),"s"):"+".concat(Math.floor(s/6e4),"m ").concat(Math.round(s%6e4/1e3),"s")}function p(e){let{title:t,detail:s,badge:a,severity:r,children:o,testId:c,interactionProps:d}=e;return(0,n.jsxs)("details",{"data-testid":c,className:"group",...d,children:[(0,n.jsxs)("summary",{className:"flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-md px-2 marker:hidden hover:bg-bloom-fill-secondary",children:[(0,n.jsx)(l.V,{className:"size-5 shrink-0 text-bloom-text-tertiary transition-transform group-open:rotate-90"}),(0,n.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,n.jsx)("p",{className:"truncate text-sm font-medium text-bloom-text-primary",children:t}),(0,n.jsx)("p",{className:"truncate text-xs text-bloom-text-tertiary",children:s})]}),(0,n.jsx)("span",{className:(0,i.cn)("shrink-0 rounded px-1.5 py-0.5 text-xs font-medium tabular-nums","invalid"===r?"bg-bloom-red/10 text-bloom-red":"warning"===r?"bg-bloom-orange/10 text-bloom-orange":"bg-bloom-fill-secondary text-bloom-text-secondary"),children:a})]}),(0,n.jsx)("div",{className:"mb-1 ml-7 rounded-md bg-bloom-fill-secondary/70 px-3 py-3",children:o})]})}function h(e){let{onCopy:t,label:s}=e,[l,i]=(0,a.useState)("idle");return(0,n.jsx)("button",{type:"button","aria-label":"copied"===l?"".concat(s," copied"):"failed"===l?"".concat(s," failed"):s,title:"copied"===l?"Copied":"failed"===l?"Copy failed":s,className:"flex size-8 items-center justify-center rounded-md text-bloom-text-tertiary hover:bg-bloom-fill-tertiary hover:text-bloom-text-primary",onClick:async()=>{try{await t(),i("copied")}catch(e){i("failed")}window.setTimeout(()=>i("idle"),1200)},children:"copied"===l?(0,n.jsx)(r.s,{className:"size-5"}):"failed"===l?(0,n.jsx)(c.D,{className:"size-5 text-bloom-red"}):(0,n.jsx)(o.o,{className:"size-5"})})}function b(e){var t;let{issue:s,summary:a}=e;return(0,n.jsxs)(p,{title:s.title,detail:"".concat(s.category," \xb7 latest ").concat(u(s.latestSeenAtMs,a.startedAtMs)),badge:s.occurrenceCount>1?"\xd7".concat(s.occurrenceCount):s.severity,severity:s.severity,testId:(0,d.VH)(s.code),children:[(0,n.jsx)("p",{className:"text-sm leading-5 text-bloom-text-secondary",children:s.detail}),(0,n.jsxs)("dl",{className:"mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs",children:[(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Target"}),(0,n.jsx)("dd",{className:"truncate text-right font-mono text-bloom-text-primary",children:null!=(t=s.targetId)?t:"Canvas"}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"First seen"}),(0,n.jsx)("dd",{className:"text-right tabular-nums text-bloom-text-primary",children:u(s.firstSeenAtMs,a.startedAtMs)}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Latest"}),(0,n.jsx)("dd",{className:"text-right tabular-nums text-bloom-text-primary",children:u(s.latestSeenAtMs,a.startedAtMs)})]}),(0,n.jsx)("div",{className:"mt-2 flex justify-end",children:(0,n.jsx)(h,{label:"Copy issue",onCopy:()=>(0,m.of)(a,s)})})]})}function y(e){var t;let{event:s}=e,a=s.values.map(e=>Number.isInteger(e)?String(e):e.toFixed(2)).join(", ");return(0,n.jsxs)("dl",{className:"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs",children:[(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Target"}),(0,n.jsx)("dd",{className:"truncate text-right font-mono text-bloom-text-primary",children:null!=(t=s.targetId)?t:"Canvas"}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Values"}),(0,n.jsx)("dd",{className:"break-all text-right font-mono text-bloom-text-primary",children:a})]})}function j(e){let{group:t,summary:s}=e,a=t.events[0],r=t.events.reduce((e,t)=>e+t.occurrenceCount,0);return(0,n.jsx)(p,{title:a.title,detail:"".concat(a.detail," \xb7 ").concat(u(a.atMs,s.startedAtMs)),badge:r>1?"\xd7".concat(r):a.category,severity:a.severity,children:(0,n.jsx)("div",{className:"space-y-3",children:t.events.map(e=>(0,n.jsxs)("div",{className:"border-l border-bloom-border/60 pl-3 first:border-l-0 first:pl-0",children:[(0,n.jsxs)("div",{className:"mb-1 flex items-center justify-between gap-2 text-xs",children:[(0,n.jsx)("span",{className:"truncate text-bloom-text-secondary",children:e.detail}),(0,n.jsx)("span",{className:"shrink-0 tabular-nums text-bloom-text-tertiary",children:u(e.atMs,s.startedAtMs)})]}),(0,n.jsx)(y,{event:e})]},e.id))})})}function g(e){let t=e.source;if(null===t)return null===e.ownerName?"Source unavailable":"Owner ".concat(e.ownerName);let s=null===t.lineNumber?t.fileName:"".concat(t.fileName,":").concat(t.lineNumber);return null===e.ownerName?s:"".concat(s," \xb7 owner ").concat(e.ownerName)}function N(e){let{entry:t,diagnostics:s}=e,r=(0,a.useRef)(null),l=(0,a.useRef)(!1),o=(0,a.useRef)(!1),c=()=>{var e;l.current||o.current?null!=r.current||(r.current=(0,x.Om)(t.key)):(null==(e=r.current)||e.call(r),r.current=null)};return(0,a.useEffect)(()=>()=>{var e;null==(e=r.current)||e.call(r),r.current=null}

1,[t.key]),(0,n.jsxs)(p,{title:t.componentName,detail:"".concat(t.redundantRenderCount," no-change renders \xb7 ").concat(g(t)),badge:"\xd7".concat(t.redundantRenderCount),severity:t.severity,testId:"canvas-analytics-react-render-".concat(t.sampleFiberId),interactionProps:{onPointerEnter:()=>{l.current=!0,c()},onPointerLeave:()=>{l.current=!1,c()},onFocus:()=>{o.current=!0,c()},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(o.current=!1,c())}},children:[(0,n.jsxs)("dl",{className:"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs",children:[(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"All renders"}),(0,n.jsx)("dd",{className:"text-right tabular-nums text-bloom-text-primary",children:t.renderCount}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"No-change renders"}),(0,n.jsx)("dd",{className:"text-right tabular-nums text-bloom-text-primary",children:t.redundantRenderCount}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Latest duration"}),(0,n.jsxs)("dd",{className:"text-right tabular-nums text-bloom-text-primary",children:[t.latestDurationMs.toFixed(2)," ms"]}),(0,n.jsx)("dt",{className:"text-bloom-text-tertiary",children:"Instances"}),(0,n.jsx)("dd",{className:"truncate text-right font-mono text-bloom-text-primary",children:t.fiberCount})]}),(0,n.jsx)("p",{className:"mt-2 break-all font-mono text-xs text-bloom-text-secondary",children:g(t)}),(0,n.jsx)("p",{className:"mt-2 text-xs leading-5 text-bloom-text-secondary",children:"No observable props, state, or context changed. This component should normally avoid rendering."}),(0,n.jsx)("div",{className:"mt-2 flex justify-end",children:(0,n.jsx)(h,{label:"Copy ".concat(t.componentName," render diagnostic"),onCopy:()=>(0,m.K0)(t,s)})})]})}function f(e){let{summary:t,reactRenders:s,maxEvents:r=50,emptyLabel:l="No recent activity"}=e,o=(0,a.useMemo)(()=>(function(e,t){let s=[];for(let a of e.slice(-t).toReversed()){var n;let e="".concat(a.kind,":").concat(null!=(n=a.targetId)?n:"",":").concat(a.severity),t=s.at(-1);(null==t?void 0:t.signature)===e?s[s.length-1]={...t,events:[...t.events,a]}:s.push({key:a.id,signature:e,events:[a]})}return s})(t.recentEvents,r),[r,t.recentEvents]),c=(0,a.useMemo)(()=>(0,x.R2)(s,r),[r,s]);return 0===t.issues.length&&0===c.length&&0===o.length?(0,n.jsxs)("div",{className:"rounded-lg bg-bloom-fill-tertiary px-3 py-3",children:[(0,n.jsx)("p",{className:"text-sm font-medium text-bloom-text-primary",children:l}),(0,n.jsx)("p",{className:"mt-0.5 text-xs text-bloom-text-secondary",children:"New warnings and meaningful canvas changes will appear here."})]}):(0,n.jsxs)("div",{className:"space-y-4",children:[c.length>0?(0,n.jsxs)("section",{children:[(0,n.jsxs)("div",{className:"mb-1 flex items-center justify-between px-1.5",children:[(0,n.jsx)("p",{className:"text-sm font-medium text-bloom-text-secondary",children:"React render warnings"}),(0,n.jsx)("span",{className:"text-xs tabular-nums text-bloom-text-tertiary",children:c.length})]}),(0,n.jsx)("div",{className:"space-y-0.5 rounded-lg bg-bloom-fill-tertiary/70 p-1",children:c.map(e=>(0,n.jsx)(N,{entry:e,diagnostics:s},e.key))})]}):null,t.issues.length>0?(0,n.jsxs)("section",{children:[(0,n.jsxs)("div",{className:"mb-1 flex items-center justify-between px-1.5",children:[(0,n.jsx)("p",{className:"text-sm font-medium text-bloom-text-secondary",children:"Warnings"}),(0,n.jsx)("span",{className:"text-xs tabular-nums text-bloom-text-tertiary",children:t.issues.length})]}),(0,n.jsx)("div",{className:"space-y-0.5 rounded-lg bg-bloom-fill-tertiary/70 p-1",children:t.issues.map(e=>(0,n.jsx)(b,{issue:e,summary:t},e.id))})]}):null,o.length>0?(0,n.jsxs)("section",{children:[(0,n.jsxs)("div",{className:"mb-1 flex items-center justify-between px-1.5",children:[(0,n.jsx)("p",{className:"text-sm font-medium text-bloom-text-secondary",children:"Recent activity"}),(0,n.jsxs)("span",{className:"text-xs tabular-nums text-bloom-text-tertiary",children:["latest ",Math.min(r,t.recentEvents.length)]})]}),(0,n.jsx)("div",{className:"space-y-0.5 rounded-lg bg-bloom-fill-tertiary/70 p-1",children:o.map(e=>(0,n.jsx)(j,{group:e,summary:t},e.key))})]}):null]})}},48482:(e,t,s)=>{s.d(t,{G:()=>c});var n=s(69496),a=s(64494),r=s(77612);

1function l(e){let{component:t}=e,s=["start","preview","commit","settle"].map(e=>{let s=t.phases[e],n=s.renderAttempts+s.parentElementConstructions+s.comparatorMisses;return 0===n?null:"".concat(e," ").concat(n)}).filter(e=>null!==e).join(" \xb7 ");return(0,n.jsxs)("div",{className:"grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 py-2 text-xs",children:[(0,n.jsxs)("div",{className:"min-w-0",children:[(0,n.jsx)("p",{className:"truncate font-medium text-bloom-text-primary",children:t.displayName}),(0,n.jsxs)("p",{className:"truncate font-mono text-bloom-text-tertiary",children:["target"===t.relation?"Selected frame":"Unrelated frame"," \xb7 ",t.instanceKey]}),0===s.length?null:(0,n.jsxs)("p",{className:"truncate text-bloom-text-tertiary",children:["Activity by phase \xb7 ",s]})]}),(0,n.jsxs)("span",{className:"tabular-nums text-bloom-text-secondary",title:"Component render attempts and parent keyed-element constructions",children:[t.renderAttempts," renders \xb7 ",t.parentElementConstructions," builds"]}),(0,n.jsxs)("span",{className:"tabular-nums text-bloom-text-secondary",title:"Memo comparator bailouts",children:[t.comparatorBailouts,"/",t.comparatorCalls," bailed"]})]})}function o(e){var t;let{component:s}=e,a=null===s.source?null:"".concat(s.source.fileName).concat(null===s.source.lineNumber?"":":".concat(s.source.lineNumber)),r=[0===s.changedProps.length?null:"props ".concat(s.changedProps.join(", ")).concat(s.changedPropsTruncated?", …":""),0===s.stateChangeCount?null:"state ".concat(s.stateChangeCount),0===s.mountCount?null:"mount ".concat(s.mountCount),0===s.unattributedRenderCount?null:"other ".concat(s.unattributedRenderCount)].filter(e=>null!==e);return(0,n.jsxs)("div",{className:"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 py-2 text-xs",children:[(0,n.jsxs)("div",{className:"min-w-0",children:[(0,n.jsx)("p",{className:"truncate font-medium text-bloom-text-primary",children:s.displayName}),(0,n.jsxs)("p",{className:"truncate font-mono text-bloom-text-tertiary",children:["target"===s.actionRelation?"Action target":"unrelated"===s.actionRelation?"Unrelated":"Unclassified"," \xb7 ",null!=(t=s.instanceKey)?t:"No instance key",null===s.ownerName?"":" \xb7 owner ".concat(s.ownerName)]}),null===a?null:(0,n.jsx)("p",{className:"truncate font-mono text-bloom-text-tertiary",children:a}),0===r.length?null:(0,n.jsxs)("p",{className:"truncate text-bloom-text-tertiary",children:["Changed: ",r.join(" \xb7 ")]})]}),(0,n.jsxs)("span",{className:"text-right tabular-nums text-bloom-text-secondary",children:[s.committedFiberCount," changed",(0,n.jsx)("br",{}),s.actualDurationMs.toFixed(1)," ms"]})]})}function c(e){let{report:t}=e,s="fail"===t.status||"invalid"===t.status;return(0,n.jsxs)("div",{"data-testid":"canvas-render-contract-report",className:"space-y-2.5",children:[(0,n.jsxs)("div",{className:"flex items-start justify-between gap-3",children:[(0,n.jsxs)("div",{className:"min-w-0",children:[(0,n.jsx)("p",{className:"text-sm font-medium text-bloom-text-primary",children:"Latest render check"}),(0,n.jsx)("p",{className:"mt-0.5 truncate text-xs text-bloom-text-tertiary",children:"canvas-pan"===t.actionId?"Canvas pan":"canvas-zoom"===t.actionId?"Canvas zoom":"root-property-edit"===t.actionId?"Property edit \xb7 ".concat(t.property," \xb7 ").concat(t.targetFrameId):"Root resize \xb7 ".concat(t.property," \xb7 ").concat(t.targetFrameId)})]}),(0,n.jsx)("span",{className:(0,r.cn)("shrink-0 text-xs font-medium",s?"text-bloom-orange":"text-bloom-green"),children:"pass"===t.status?"Passed":"fail"===t.status?"".concat(t.issues.length," warning").concat(1===t.issues.length?"":"s"):"Invalid"})]}),null===t.deepAttribution?null:(0,n.jsxs)("details",{className:"group border-t border-bloom-border/60 pt-2","data-testid":"canvas-render-contract-deep-attribution",children:[(0,n.jsxs)("summary",{className:"flex cursor-pointer list-none items-center gap-2 text-xs font-medium text-bloom-text-secondary marker:hidden",children:[(0,n.jsx)(a.V,{className:"size-4 shrink-0 transition-transform group-open:rotate-90"}),(0,n.jsxs)("span",{children:["Deep React attribution \xb7"," ","complete"===t.deepAttribution.status?"".concat(t.deepAttribution.commitCount," commits \xb7 ").concat(t.deepAttribution.changedFiberCount," changed fibers"):"Incomplete"]})]}),(0,n.jsxs)("div",{className:"ml-6 mt-2",children:["invalid"===t.deepAttribution.status?(0,n.jsx)("p",{className:"text-xs text-bloom-orange",children:t.deepAttribution.invalidReasons.join(", ")}):null,(0,n.jsx)("div",{className:"divide-y divide-bloom-border/50",children:t.deepAttribution.components.slice(0,20).map(e=>{var t,s;return(0,n.jsx)(o,{component:e},"".concat(e.displayName,":").concat(null!=(t=e.instanceKey)?t:"",":").concat(null!=(s=e.ownerName)?s:""))})})]})]}),t.issues.map(e=>(0,n.jsxs)("details",{"data-testid":"canvas-render-contract-issue-".concat(e.id),className:"group border-t border-bloom-border/60 pt-2",open:!0,children:[(0,n.jsxs)("summary",{className:"flex cursor-pointer list-none items-start gap-2 marker:hidden",children:[(0,n.jsx)(a.V,{className:"mt-0.5 size-4 shrink-0 text-bloom-orange transition-transform group-open:rotate-90"}),(0,n.jsxs)("span",{className:"min-w-0",children:[(0,n.jsxs)("span",{className:"block text-xs font-medium text-bloom-text-primary",children:["Unexpected ",e.component.displayName," ","unexpected-render"===e.code?"render":"parent construction"]}),(0,n.jsx)("span",{className:"block truncate font-mono text-xs text-bloom-text-tertiary",children:e.component.instanceKey})]})]}),(0,n.jsxs)("div",{className:"ml-6 mt-2 space-y-1.5 text-xs text-bloom-text-secondary",children:[(0,n.jsx)("p",{children:e.invariant}),(0,n.jsxs)("p",{children:["Changed props:"," ",e.observed.changedProps.length>0?e.observed.changedProps.join(", "):"none recorded"]}),(0,n.jsx)("p",{className:"break-all font-mono text-bloom-text-tertiary",children:e.firstInspection.map(e=>"".concat(e.file,"#").concat(e.exportName)).join(" \xb7 ")})]})]},e.id)),(0,n.jsxs)("details",{className:"group border-t border-bloom-border/60 pt-2",children:[(0,n.jsxs)("summary",{className:"flex cursor-pointer list-none items-center gap-2 text-xs font-medium text-bloom-text-secondary marker:hidden",children:[(0,n.jsx)(a.V,{className:"size-4 shrink-0 transition-transform group-open:rotate-90"}),t.components.length," component instances"]}),(0,n.jsx)("div",{className:"mt-1 divide-y divide-bloom-border/50",children:t.components.map(e=>

1(0,n.jsx)(l,{component:e},"".concat(e.componentId,":").concat(e.instanceKey)))})]})]})}},64981:(e,t,s)=>{s.d(t,{B:()=>c});var n=s(69496),a=s(37172),r=s(98783),l=s(77612),o=s(79931);function c(e){let{compact:t=!1,disabled:s=!1}=e,c=(0,a.useSyncExternalStore)(o.xP,o.ji,o.qI).reactRenders,i="unavailable"===c.status;return(0,n.jsxs)("label",{className:(0,l.cn)("flex items-center justify-between gap-3",t?"min-h-9 px-2":"rounded-lg bg-bloom-fill-tertiary px-4 py-3"),children:[(0,n.jsxs)("span",{className:"min-w-0",children:[(0,n.jsx)("span",{className:"block text-sm font-medium text-bloom-text-primary",children:"Render highlights"}),t?null:(0,n.jsx)("span",{className:"mt-0.5 block text-xs text-bloom-text-tertiary",children:i?"Unavailable until the next page load":"incomplete"===c.status?"Incomplete: ".concat(c.lastFailure):c.armed?"".concat(c.commitCount," React commits observed"):"Off"})]}),(0,n.jsx)(r.d,{"aria-label":"Render highlights",checked:c.armed,disabled:s||i,onCheckedChange:o.Tm})]})}}}]);