{"version":3,"file":"QuickSignalChanges.nkuTSFa9.mjs","names":["_Fragment","p","useState"],"sources":["https:/framerusercontent.com/modules/BX6IuQH5520CaGMfrVlY/xf6PJ6tblZrd67MhUZv0/QuickSignalChanges.js"],"sourcesContent":["// Get Started: https://www.framer.com/developers\n//\n// \"Latest updates\" — Lead & Stack (in-place accordion)\n// Drop-in replacement for the QuickSignalChanges code component.\n//\n// Design: linkedinV3/Latest Updates - Lead & Stack.html (Powder pink + deep red variant)\n// - One DOM node per item that restyles between a collapsed row and an expanded\n// colour card. Header geometry is CONSTANT between states (logo + title never\n// resize) so nothing reflows mid-animation. Only the colour card fills in and\n// the body / read-link fade-and-slide in on a single eased curve, lightly\n// staggered — the way polished accordions behave.\n// - Accordion: exactly one item is open at all times. First item open by default.\n// - TODAY badge: deep red + white when collapsed, flips to powder pink + red on\n// the open card.\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";import{addPropertyControls,ControlType,useTracking}from\"framer\";//\n// Tracking event names — preserved verbatim from the original QuickSignalChanges\n// component so analytics stay continuous after the swap (yes, \"singals\" is a\n// pre-existing typo; keep it so historical events still match).\n//\nconst TRACK={expand:\"singals-read-more-click\",readFull:\"read-full-signal-click\",cta:\"latest-updates-cta-click\",companyFollow:\"signal-company-click\",leaderFollow:\"signal-personnel-click\"};// CSS custom-property maps. Typed loosely (string→string) and cast to\n// CSSProperties at the point of use, since React's CSSProperties doesn't model\n// `--foo` keys.\nconst THEMES={olive:{\"--lead-bg\":\"#3E5234\",\"--lead-fg\":\"#ffffff\",\"--lead-sub\":\"rgba(255,255,255,.74)\",\"--lead-accent\":\"#E7E8BB\",\"--device\":\"rgba(231,232,187,.16)\",\"--read\":\"#ffffff\",\"--tick\":\"#3E5234\"},black:{\"--lead-bg\":\"#0d0d0c\",\"--lead-fg\":\"#ffffff\",\"--lead-sub\":\"rgba(242,242,240,.66)\",\"--lead-accent\":\"#E7E8BB\",\"--device\":\"rgba(231,232,187,.12)\",\"--read\":\"#ffffff\",\"--tick\":\"#3E5234\"},lgreen:{\"--lead-bg\":\"#E7E8BB\",\"--lead-fg\":\"#222a18\",\"--lead-sub\":\"rgba(34,42,24,.72)\",\"--lead-accent\":\"#3E5234\",\"--device\":\"rgba(62,82,52,.12)\",\"--read\":\"#2f3d27\",\"--tick\":\"#3E5234\"},pink:{\"--lead-bg\":\"#FFD3C8\",\"--lead-fg\":\"#3a1416\",\"--lead-sub\":\"rgba(58,20,22,.68)\",\"--lead-accent\":\"#B7141E\",\"--device\":\"rgba(183,20,30,.1)\",\"--read\":\"#9c1019\",\"--tick\":\"#B7141E\"}};//\n// Scoped stylesheet. Everything lives under .lus so it can't leak into the\n// rest of the Framer page. This carries the pseudo-element dividers, the\n// height (grid-template-rows) reveal, the staggered fades and the blink\n// animation — all of which inline styles can't express.\n//\nconst STYLE=`\n@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');\n\n.lus{ --serif:'Lora',Georgia,serif; --sans:'DM Sans',-apple-system,sans-serif;\n --red:#B7141E; --pink:#FFD3C8;\n font-family:var(--sans); color:#1b1812; -webkit-font-smoothing:antialiased; }\n.lus *{ box-sizing:border-box; }\n\n.lus .feed{ background:#fff; border-radius:18px; overflow:hidden; }\n\n.lus .head{ display:flex; align-items:center; justify-content:space-between; padding:26px 26px 14px; }\n.lus .head .h{ font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:-.015em; color:#15140f; }\n.lus .head .live{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#8a8a82; }\n.lus .head .live .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); }\n\n.lus .list{ padding:6px 12px 0; }\n\n.lus .item{ position:relative; border-radius:14px; overflow:hidden; transition:background .42s cubic-bezier(.4,0,.15,1); background:transparent; }\n.lus .item:not(.open):not(:last-child)::after{ content:\"\"; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:#efeeea; }\n.lus .item.open{ background:var(--lead-bg); }\n.lus .item .device{ position:absolute; right:-52px; bottom:-52px; width:168px; height:168px; border-radius:168px 0 0 0; background:var(--device); pointer-events:none; opacity:0; transition:opacity .4s ease; }\n.lus .item.open .device{ opacity:1; }\n\n.lus .item .header{ position:relative; width:100%; display:grid; grid-template-columns:44px 1fr 18px; gap:12px; align-items:start; background:none; border:0; text-align:left; font-family:inherit; cursor:pointer; padding:16px 16px; }\n.lus .item.open .header{ cursor:pointer; }\n.lus a.title-link{ cursor:pointer; }\n\n.lus .item .logo{ width:44px; height:44px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; border:1px solid #eceae2; overflow:hidden; background:#fff; color:#15140f; transition:border-color .35s ease,box-shadow .35s ease; }\n.lus .item.open .logo{ border-color:transparent; box-shadow:0 2px 10px rgba(0,0,0,.16); }\n.lus .item .logo img{ width:100%; height:100%; object-fit:cover; display:block; }\n\n.lus .item .meta{ display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap; }\n.lus .item .today{ display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--red); padding:3px 8px 3px 7px; border-radius:5px; transition:background .35s ease,color .35s ease; }\n.lus .item .today .pip{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.9); animation:lus-blink 2.4s ease-out infinite; }\n@keyframes lus-blink{ 0%,100%{opacity:.45} 50%{opacity:1} }\n.lus .item.open .today{ background:var(--pink); color:var(--red); }\n.lus .item.open .today .pip{ background:var(--red); }\n.lus .item .tk{ font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9a9a92; transition:color .35s ease; }\n.lus .item .tm{ font-size:9.5px; font-weight:600; letter-spacing:.08em; color:#c0c0b8; transition:color .35s ease; }\n.lus .item.open .tk{ color:var(--lead-sub); }\n.lus .item.open .tm{ color:var(--lead-sub); }\n\n.lus .item .title{ font-family:var(--serif); font-weight:400; font-size:16px; line-height:1.34; letter-spacing:-.006em; margin:0; color:#15140f; text-wrap:pretty; transition:color .35s ease; }\n.lus .item.open .title{ color:var(--lead-fg); }\n.lus .item:not(.open):hover .title{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }\n/* open card: the headline is a real link to the signal */\n.lus a.title-link{ text-decoration:none; color:inherit; cursor:pointer; }\n.lus a.title-link:hover{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }\n\n/* chevron sits softly visible at rest so collapsed rows read as tappable on\n touch (no hover there); it deepens + nudges on hover and fades out when open */\n.lus .item .chev{ justify-self:end; align-self:center; display:inline-flex; color:#a7a79d; font-size:15px; transition:transform .3s ease,color .3s ease; }\n.lus .item:not(.open):hover .chev{ color:var(--tick); transform:translateX(3px); }\n/* when open the chevron flips to a top-right collapse control */\n.lus .item.open .chev{ align-self:start; margin-top:3px; color:var(--lead-sub); }\n.lus .item.open .header:hover .chev{ color:var(--lead-fg); }\n\n.lus .item .reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.4,0,.15,1); }\n.lus .item.open .reveal{ grid-template-rows:1fr; }\n.lus .item .reveal-inner{ position:relative; z-index:1; min-height:0; overflow:hidden; }\n.lus .item .reveal-pad{ padding:4px 18px 22px 18px; }\n/* staggered reveal: body → follow cluster → footer */\n.lus .item .body,.lus .item .follow-block,.lus .item .card-foot{ opacity:0; transform:translateY(8px); transition:opacity .3s ease,transform .42s cubic-bezier(.4,0,.15,1); }\n.lus .item.open .body{ opacity:1; transform:none; transition-delay:.1s; }\n.lus .item.open .follow-block{ opacity:1; transform:none; transition-delay:.16s; }\n.lus .item.open .card-foot{ opacity:1; transform:none; transition-delay:.22s; }\n.lus .item .body{ font-size:14px; line-height:1.62; color:var(--lead-sub); margin:0; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }\n.lus .item .read{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--read); cursor:pointer; text-decoration:none; }\n.lus .item .read .arr{ transition:transform .2s; }\n.lus .item .read:hover .arr{ transform:translateX(4px); }\n\n/* expanded card — leaders to follow + company follow */\n.lus .item .follow-block{ margin-top:18px; }\n.lus .item .follow-label{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lead-sub); margin:0 0 11px; }\n.lus .item .chips{ display:flex; flex-wrap:wrap; gap:14px 16px; }\n.lus .item .chip{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }\n.lus .item .chip .av{ position:relative; width:32px; height:32px; border-radius:50%; flex:none; }\n.lus .item .chip .av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }\n.lus .item .chip .add{ position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--lead-fg); color:var(--lead-bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; line-height:1; border:2px solid var(--lead-bg); transition:transform .15s ease; }\n.lus .item .chip:hover .add{ transform:scale(1.14); }\n.lus .item .chip .nm{ font-size:13px; font-weight:600; color:var(--lead-fg); white-space:nowrap; }\n.lus .item .chip:hover .nm{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; }\n\n/* soft tonal pill — a low-opacity tint of the brand foreground: present and\n friendly, with no hard fill competing with the read-full CTA. Flush-left so\n its box aligns with the leaders label + chips above it. */\n.lus .item .follow-co{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:999px; background:color-mix(in srgb, var(--lead-fg) 12%, transparent); color:var(--lead-fg); font-size:15px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; transition:background .16s ease; }\n.lus .item .follow-co:hover{ background:color-mix(in srgb, var(--lead-fg) 18%, transparent); }\n.lus .item .follow-co .pl{ font-size:16px; line-height:1; font-weight:600; }\n/* separator between the leaders cluster and the company-follow pill */\n.lus .item .follow-sep{ display:block; height:1px; background:var(--lead-fg); opacity:.12; margin:16px 0; }\n\n/* footer: read-full is its own closing CTA, detached by a hairline and pushed\n to the opposite edge from the follow pill so the two never blend */\n.lus .item .card-foot{ display:flex; flex-direction:column; margin-top:18px; }\n.lus .item .sep{ height:1px; background:var(--lead-fg); opacity:.14; margin-bottom:16px; }\n.lus .item .card-foot .read{ align-self:flex-end; }\n\n.lus .cta{ padding:16px 16px 22px; }\n.lus .cta a{ display:block; text-align:center; text-decoration:none; width:100%; font-family:var(--sans); font-size:15px; font-weight:600; background:#fff; border:1.5px solid #15140f; border-radius:12px; padding:14px; color:#15140f; cursor:pointer; transition:.16s; }\n.lus .cta a:hover{ background:#15140f; color:#fff; }\n\n/* empty / error state */\n.lus .empty{ padding:26px 18px 34px; text-align:center; color:#8a8a82; font-size:13.5px; line-height:1.5; }\n\n/* skeleton */\n.lus .sk{ background:#e9e8e2; border-radius:6px; animation:lus-sk 1.5s ease-in-out infinite; }\n@keyframes lus-sk{ 0%,100%{opacity:1} 50%{opacity:.45} }\n\n/* keyboard focus — visible on light rows and the coloured open card */\n.lus .header:focus-visible,.lus a.title-link:focus-visible,.lus .item .read:focus-visible,.lus .item .chip:focus-visible,.lus .item .follow-co:focus-visible,.lus .cta a:focus-visible{ outline:2px solid var(--tick); outline-offset:2px; border-radius:8px; }\n\n/* honour the OS \"reduce motion\" setting */\n@media (prefers-reduced-motion: reduce){\n .lus *,.lus *::before,.lus *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\n}\n`;//\n// Date / display helpers\n//\nfunction parseDate(dateString){if(!dateString)return null;const t=new Date(dateString).getTime();return Number.isNaN(t)?null:t;}// Drives the highlighted badge: true when the item was published today\n// (local date), regardless of time of day.\nfunction isToday(dateString){const t=parseDate(dateString);if(t===null)return false;const date=new Date(t);const now=new Date;return date.getDate()===now.getDate()&&date.getMonth()===now.getMonth()&&date.getFullYear()===now.getFullYear();}// Human relative time (\"just now\", \"12 min ago\", \"3h ago\"), falling back to an\n// absolute date once an item is a week or more old.\nfunction relativeTime(dateString){const t=parseDate(dateString);if(t===null)return\"\";const mins=Math.round((Date.now()-t)/6e4);if(mins<1)return\"just now\";if(mins<60)return`${mins} min ago`;const hrs=Math.round(mins/60);if(hrs<24)return`${hrs}h ago`;const days=Math.round(hrs/24);if(days<7)return`${days}d ago`;return new Date(t).toLocaleDateString(\"en-US\",{month:\"short\",day:\"numeric\"});}function initials(name){if(!name)return\"•\";const parts=name.trim().split(/\\s+/);if(parts.length===1)return parts[0].slice(0,2).toUpperCase();return(parts[0][0]+parts[1][0]).toUpperCase();}//\n// One feed row — collapses to a row, expands to the colour card.\n//\nfunction FeedItem({item,open,baseUrl,readFullText,bodyLines,preserveLineBreaks,bodyMaxCh,freshLabel,timeDisplay,showFollow,followLabel,followVerb,onToggle,onReadFull,onFollowCompany,onFollowLeader}){const company=item.relatedCompanies?.[0];const tickerName=company?.ticker||company?.fullName||item.ticker||\"\";const avatar=company?.avatarUrl;const fresh=isToday(item.publishedAt);const when=relativeTime(item.publishedAt);const signalLink=`https://${baseUrl}/app/companies/signals?ids=[\"${item.id}\"]`;const leaders=item.relatedPersonnel||[];const personFallback=`https://${baseUrl}/statics/img/person-no-avatar.png`;const hasFollow=showFollow&&(leaders.length>0||!!company);// The header is the row's hit target (a div with button semantics so the\n// open card's title can be a real — anchors can't nest in a