https://olungu.com/assets/ext-blocking-page-dummy-eZxeKHQ3.js

1import{r as o,j as e}from"./vendor-react-D4-TdOQA.js";import{L as T}from"./main-7SZktB1p.js";import{e as R,I as $}from"./ext-dummy-theme-5OTV7AKz.js";import{T as L}from"./Textarea-hg06oGO0.js";import{c as s}from"./utils-1m5-6-ca.js";import{q as z,r as W,s as _}from"./vendor-icons-C3j_Meru.js";function H(l){const i=window.matchMedia("(prefers-color-scheme: dark)");return i.addEventListener("change",l),()=>i.removeEventListener("change",l)}function O(){return window.matchMedia("(prefers-color-scheme: dark)").matches}function Z(){const[l,i]=o.useState("analytics"),[d,m]=o.useState("system"),f=o.useSyncExternalStore(H,O,()=>!0),h=d==="system"?f?"dark":"light":d,r=h==="light",t=o.useMemo(()=>R(r),[r]),v=r?"text-[#B91C1C]":"text-[#FCA5A5]",y=r?"bg-[#DC2626]":"bg-[#FB7185]",F=r?"text-[#B91C1C]":"text-[#FCA5A5]",w=r?"border-0 bg-[#D6FF54] font-bold text-[#1A1A1A] hover:bg-[#C4F032]":"border border-[#D6FF54]/35 bg-[#D6FF54] font-bold text-[#1A1A1A] hover:bg-[#BFEA38]",C=r?"accent-[#DC2626]":"accent-[#FB7185]",x=r?"border-0 bg-[#16A34A] font-bold text-white hover:bg-[#15803D]":"border border-[#22C55E]/35 bg-[#15803D] font-bold text-white hover:bg-[#166534]",c=r?"border border-[#DC2626] bg-transparent font-semibold text-[#B91C1C] hover:bg-[#FEF2F2]":"border border-[#FB7185]/40 bg-transparent font-semibold text-[#FDA4AF] hover:bg-[#4C0519]/30",[p,u]=o.useState(15),[b,j]=o.useState(""),k=o.useMemo(()=>Array.from({length:24},(a,n)=>n),[]),N=o.useMemo(()=>["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],[]),D=o.useMemo(()=>["S","M","T","W","T","F","S"],[]),S=o.useMemo(()=>[{label:"Oct",weekIndex:0},{label:"Nov",weekIndex:3},{label:"Dec",weekIndex:8},{label:"Jan",weekIndex:12},{label:"Feb",weekIndex:16},{label:"Mar",weekIndex:20},{label:"Apr",weekIndex:25}],[]),M=o.useMemo(()=>Array.from({length:26},(a,n)=>Array.from({length:7},(A,g)=>n*7+g<3?null:n<20?0:n===20?g%2===0?2:1:n===21?g===1||g===4?0:1:n===22?g<5?4:3:n===23?g===0?2:4:n===24?g===2?1:3:n===25&&g===0||n===25&&g===1?0:4)),[]),E=s("flex w-full max-w-none flex-col gap-5 sm:gap-6",r?"text-[#1A1A1A]":"text-zinc-100","px-5 py-6 sm:px-6 sm:py-7");return e.jsx("div",{"data-ext-theme":h,style:{colorScheme:r?"light":"dark"},className:t.page,children:e.jsxs("div",{className:E,children:[e.jsxs("p",{className:s("w-full text-center text-[12px] leading-relaxed",t.muted),children:["Legacy blocked-page structure with"," ",e.jsx("code",{className:t.code,children:"ext-dashboard-dummy"})," design tokens."," ",e.jsx(T,{to:"/ext-dashboard-dummy",className:t.link,children:"Dashboard dummy"})]}),e.jsx("div",{className:s("mr-1 flex items-center gap-1 border-r pr-3",t.hairline),role:"group","aria-label":"Theme",children:[["light",z],["dark",W],["system",_]].map(([a,n])=>{const A=a==="system"?d==="system":d===a;return e.jsx("button",{type:"button",title:`${a} theme`,"aria-pressed":A,onClick:()=>m(a),className:s("inline-flex size-10 items-center justify-center border border-transparent transition-colors",t.radiusControl,A?t.themeActive:t.themeIdle),children:e.jsx(n,{size:16,strokeWidth:2})},a)})}),l==="analytics"?e.jsxs(e.Fragment,{children:[e.jsxs("header",{className:s("flex flex-wrap items-start justify-between gap-4",t.radiusBlock,"px-5 py-5 md:px-6 md:py-6",t.card),"data-ext-blocking-mock":"true",children:[e.jsxs("div",{className:"min-w-0 max-w-2xl flex-1 space-y-2",children:[e.jsx("h1",{className:s("text-xl font-bold tracking-tight md:text-2xl",t.fgStrong),children:"Blocked by Olungu"}),e.jsx("p",{className:s("font-mono text-[11px] font-bold uppercase tracking-[0.08em]",t.muted),children:"Why blocked"}),e.jsx("p",{className:s("text-[13px] leading-relaxed",t.fg),children:"Blocked by Focus Guard AI-added rules."})]}),e.jsxs("div",{className:"flex flex-wrap items-center justify-end gap-2 sm:gap-3",children:[e.jsx("button",{type:"button",onClick:()=>i("break"),className:s("px-5 py-3 text-[13px] transition-colors",t.radiusControl,x),children:"Need a break?"}),e.jsx("button",{type:"button",onClick:()=>i("dispute"),className:s("px-5 py-3 text-[13px] transition-colors",t.radiusControl,c),children:"Misclassified?"})]})]}

1),e.jsx("p",{className:s("rounded-[18px] border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-700 md:rounded-[20px]",!r&&"border-red-500/25 bg-red-500/10 text-red-200"),role:"alert",children:"Dummy error slot — this appears if manual unblock fails."}),e.jsx("section",{className:"grid grid-cols-2 gap-3 lg:grid-cols-4",children:[["Today","14"],["This week","304"],["This month","2.2k"],["All time","2.3k"]].map(([a,n])=>e.jsxs("div",{className:s("flex flex-col items-center gap-1 px-4 py-4 text-center",t.radiusRow,t.inset),children:[e.jsx("div",{className:s("text-2xl font-bold tabular-nums",v),children:n}),e.jsx("div",{className:s("font-mono text-[11px] font-bold uppercase tracking-[0.06em]",t.muted),children:a})]},a))}),e.jsxs("section",{className:"grid min-h-0 gap-4 lg:grid-cols-[minmax(0,0.86fr)_minmax(0,1.14fr)]",children:[e.jsxs("div",{className:"flex min-h-0 min-w-0 flex-col gap-4",children:[e.jsxs("div",{className:s("flex min-h-[170px] flex-col p-4 md:p-5",t.radiusBlock,t.card),children:[e.jsx("h2",{className:s("mb-3 font-mono text-[11px] font-bold uppercase tracking-[0.07em]",t.muted),children:"Top blocked domains"}),e.jsx("div",{className:s("flex flex-1 flex-col gap-2 text-[13px]",t.fg),children:[["ndtv.com",92],["youtube.com",100],["instagram.com",78],["x.com",73],["reddit.com",41],["news.ycombinator.com",26],["facebook.com",33]].map(([a,n])=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:s("w-[132px] shrink-0 truncate text-right font-mono text-[11px]",t.muted2),children:a}),e.jsx("div",{className:s("h-[18px] min-w-0 flex-1 overflow-hidden rounded-md",r?"bg-[#F3F4F6]":"bg-white/[0.06]"),children:e.jsx("div",{className:s("h-full rounded-md",y),style:{width:`${n}%`}})}),e.jsx("span",{className:s("w-8 shrink-0 text-right font-mono text-[11px] tabular-nums",F),children:Math.round(n/10)})]},a))})]}),e.jsxs("div",{className:s("flex flex-1 flex-col p-4 md:p-5",t.radiusBlock,t.card),children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between gap-3",children:[e.jsx("h2",{className:s("font-mono text-[11px] font-bold uppercase tracking-[0.07em]",t.muted),children:"Daily focus streak"}),e.jsx("span",{className:s("font-mono text-[11px]",t.muted2),children:"21/180 days met"})]}),e.jsx("div",{className:"flex w-full min-w-0 justify-start pb-1",children:e.jsx(q,{streakMonthLabels:S,streakWeekdays:D,streakWeeks:M,isLight:r,thMuted2Class:t.muted2})}),e.jsxs("div",{className:s("mt-4 flex items-center justify-end gap-1.5 font-mono text-[10px]",t.muted2),children:[e.jsx("span",{children:"Less"}),[0,1,2,3,4].map(a=>e.jsx("span",{className:"size-3.5 rounded-[4px] border",style:B(a,!1,r)},`legend-${a}`)),e.jsx("span",{children:"More"})]})]})]}),e.jsxs("div",{className:s("flex min-h-0 min-w-0 flex-col p-3.5 md:p-4",t.radiusBlock,t.card),children:[e.jsx("h2",{className:s("mb-1 font-mono text-[11px] font-bold uppercase tracking-[0.07em]",t.muted),children:"Distraction heatmap"}),e.jsx("p",{className:s("mb-3 font-mono text-[10px] font-bold uppercase tracking-[0.06em]",t.muted2),children:"Hour of day"}),e.jsxs("div",{className:"flex min-h-0 min-w-0 flex-1 gap-1 sm:gap-1.5",children:[e.jsx("div",{className:"flex shrink-0 items-center justify-center pb-2",children:e.jsx("span",{className:s("max-w-[0.75rem] rotate-180 font-mono text-[8px] font-bold uppercase leading-tight tracking-[0.04em] [writing-mode:vertical-lr] sm:max-w-none sm:text-[10px] sm:tracking-[0.05em]",t.muted2),children:"Day of week"})}),e.jsxs("div",{className:"grid min-h-0 min-w-0 flex-1 grid-cols-[minmax(0,1.25rem)_repeat(24,minmax(0,1fr))] grid-rows-[minmax(0,0.75rem)_repeat(7,minmax(0,1fr))] gap-px sm:gap-[2px]",children:[e.jsx("span",{className:"min-w-0"}),k.map(a=>e.jsx("div",{className:s("flex min-w-0 items-end justify-center font-mono text-[6px] tabular-nums leading-none sm:text-[8px] md:text-[9px]",t.muted2),children:a},`hour-${a}`)),N.map((a,n)=>e.jsx(P,{label:a,dayIndex:n,hours:k,isLight:r},a))]})]})]})]})]}):l==="break"?e.jsxs("section",{className:s("flex flex-col gap-4",t.radiusBlock,"px-5 py-5 md:px-6 md:py-6",t.breakBanner),children:[e.jsxs("div",{className:"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:t.breakKicker,children:"Tracked break"}),e.jsx("h2",{className:s("mt-1 text-lg font-bold tracking-tight md:text-xl",t.fgStrong),children:"Pause guard without losing the day ledger"}),e.jsx("p",{className:s("mt-2 max-w-3xl text-[13px] leading-relaxed",t.muted),children:"Break t

1ime is earned from today's focus and logged separately so guard allowance stays honest for the rest of the day."})]}),e.jsx("div",{className:"flex flex-wrap gap-2 lg:justify-end",children:[["96","min focused"],["14","min break used"],["35","min total break earned"]].map(([a,n])=>e.jsxs("span",{className:s("inline-flex items-center gap-1.5 rounded-[18px] border px-3 py-2 text-[12px]",t.inset,t.muted),children:[e.jsx("strong",{className:s("tabular-nums",t.fg),children:a}),n]},n))})]}),e.jsxs("div",{className:s("px-4 py-4 text-[13px] leading-relaxed",t.radiusRow,t.dashedNote),children:[e.jsx("p",{className:s("font-mono text-[11px] font-bold uppercase tracking-[0.06em]",t.fg),children:"Available today"}),e.jsx("p",{className:"mt-2",children:"Choose any break length up to your remaining allowance. Today's allowance comes only from today's focus and shrinks as break time is actually used."})]}),e.jsx("div",{className:s("flex flex-col gap-4 p-4 md:p-5",t.radiusRow,t.card),children:e.jsxs("div",{className:"grid gap-4 lg:grid-cols-[120px_minmax(0,1fr)_auto] lg:items-end",children:[e.jsxs("label",{className:s("flex flex-col gap-2 text-[13px]",t.muted),children:[e.jsx("span",{className:"font-mono text-[11px] font-bold uppercase tracking-wider",children:"Minutes"}),e.jsx($,{type:"number",min:1,max:35,value:p,onChange:a=>u(Number(a.target.value)),className:s("tabular-nums",t.input)})]}),e.jsxs("div",{className:"flex min-w-0 flex-col gap-3",children:[e.jsxs("div",{className:"flex items-end justify-between gap-3",children:[e.jsx("span",{className:s("font-mono text-[11px] font-bold uppercase tracking-wider",t.muted2),children:"Requested break"}),e.jsxs("strong",{className:s("font-mono text-sm tabular-nums",t.fg),children:[p," min"]})]}),e.jsx("input",{type:"range",min:1,max:35,value:p,onChange:a=>u(Number(a.target.value)),className:s("w-full",C)})]}),e.jsxs("button",{type:"button",className:s("h-11 w-full px-6 text-[13px] font-bold transition-colors lg:w-auto",t.radiusControl,x),children:["Start ",p," min break"]})]})}),e.jsx("p",{className:s("text-[13px]",t.fg),children:"21 min still available today."}),e.jsxs("div",{className:s("flex flex-col gap-1 border-t pt-3 text-[11px] md:flex-row md:justify-between",t.hairline,t.muted),children:[e.jsx("span",{className:"font-mono font-semibold uppercase tracking-[0.06em]",children:"Midnight reset"}),e.jsx("span",{children:"Break allowance resets at midnight in your local time."})]})]}):e.jsxs("section",{className:s("flex flex-col gap-4",t.radiusBlock,"px-5 py-5 md:px-6 md:py-6",t.card),children:[e.jsxs("div",{children:[e.jsx("p",{className:t.breakKicker,children:"Dispute review"}),e.jsx("h2",{className:s("mt-2 text-lg font-bold tracking-tight md:text-xl",t.fgStrong),children:"Tell Olungu why this page should stay open"}),e.jsx("p",{className:s("mt-2 max-w-3xl text-[13px] leading-relaxed",t.muted),children:"Give enough context for a focused review. The best disputes tie the page directly to your current task instead of describing it in general terms."})]}),e.jsxs("div",{className:s("px-4 py-4 text-[13px]",t.radiusRow,t.dashedNote),children:[e.jsx("p",{className:s("font-mono text-[11px] font-bold uppercase tracking-[0.06em]",t.fg),children:"Review context"}),e.jsxs("div",{className:"mt-3 grid gap-2",children:[e.jsxs("div",{className:"flex flex-col gap-1 md:flex-row md:gap-3",children:[e.jsx("span",{className:s("w-[118px] shrink-0 font-mono text-[11px] font-bold uppercase tracking-wider",t.muted2),children:"Task context"}),e.jsx("span",{className:s("text-[13px]",t.fg),children:"ship checkout bugfix for production"})]}),e.jsxs("div",{className:"flex flex-col gap-1 md:flex-row md:gap-3",children:[e.jsx("span",{className:s("w-[118px] shrink-0 font-mono text-[11px] font-bold uppercase tracking-wider",t.muted2),children:"Distractions"}),e.jsx("span",{className:s("text-[13px]",t.fg),children:"short-form video loops, doomscrolling on social feeds"})]})]}),e.jsx("p",{className:s("mt-3 text-[13px] leading-relaxed",t.muted),children:"Explain how this exact page supports the task above. Mention the concrete content on the page and why blocking it would interrupt useful work."})]}),e.jsxs("div",{className:s("flex flex-col gap-3 p-4 md:p-5",t.radiusRow,t.inset),children:[e.jsxs("div",{className:"flex items-baseline justify-between gap-3",children:[e.jsx("span",{className:s("font-mono text-[11px] font-bold uppercase tracking-wider",t.muted2),children:"Dispute explanation"}),e.jsxs("strong",{className:s("font-mono text-xs tabular-nums",t.muted),children:[b.trim().length,"/500"]})]}),e.jsx(L,{rows:4,maxLength:500,value:b,onChange:a=>j(a.target.value),placeholder:"Be specific — e.g., 'This video is a React tutorial that c

1overs hooks, which I'm currently learning'",className:t.textarea})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx("button",{type:"button",disabled:!b.trim(),className:s("px-6 py-3 text-[13px] font-bold transition-colors disabled:cursor-not-allowed disabled:opacity-50",t.radiusControl,w),children:"Submit dispute"}),e.jsx("button",{type:"button",onClick:()=>i("analytics"),className:s("px-6 py-3 text-[13px] font-semibold transition-colors",t.radiusControl,t.secondaryBtn),children:"Cancel"})]}),e.jsxs("div",{className:s("flex flex-col gap-1 border-t pt-3 text-[11px] md:flex-row md:justify-between",t.hairline,t.muted),children:[e.jsx("span",{className:"font-mono font-semibold uppercase tracking-[0.06em]",children:"Review flow"}),e.jsx("span",{children:"If accepted, this page will reopen immediately and Olungu will redirect you back into your work."})]})]}),e.jsxs("footer",{className:s("flex flex-wrap items-center justify-center gap-2 border-t pt-4 text-[11px]",t.hairline,t.muted),children:[e.jsx("span",{className:"font-mono font-semibold uppercase tracking-[0.06em]",children:"Dev views"}),["analytics","break","dispute"].map(a=>e.jsx("button",{type:"button","aria-pressed":l===a,onClick:()=>i(a),className:s("px-3 py-2 font-semibold capitalize transition-colors",t.radiusControl,l===a?t.themeActive:t.themeIdle),children:a},a))]})]})})}function q({streakMonthLabels:l,streakWeekdays:i,streakWeeks:d,isLight:m,thMuted2Class:f}){const h=o.useRef(null),r=o.useRef(null),[t,v]=o.useState(1),[y,F]=o.useState(void 0),[w,C]=o.useState(void 0);return o.useLayoutEffect(()=>{const x=h.current,c=r.current;if(!x||!c)return;const p=()=>{const b=x.parentElement?.clientWidth??x.clientWidth??0,j=c.scrollWidth,k=c.scrollHeight,N=j<=0?1:Math.min(1,b/j);v(N),F(j*N),C(k*N)},u=new ResizeObserver(p);return x.parentElement&&u.observe(x.parentElement),u.observe(c),p(),()=>u.disconnect()},[d.length]),e.jsx("div",{ref:h,className:"max-w-full shrink-0 overflow-hidden",style:y!==void 0&&w!==void 0?{width:y,height:w}:void 0,children:e.jsxs("div",{ref:r,className:"inline-block origin-top-left will-change-transform",style:{transform:`scale(${t})`},children:[e.jsx("div",{className:"mb-2 flex gap-1 pl-7",children:d.map((x,c)=>{const p=l.find(u=>u.weekIndex===c);return e.jsx("span",{className:s("w-4 font-mono text-[8px]",f),children:p?.label??""},`month-${c}`)})}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("div",{className:"grid grid-rows-7 gap-[6px] pt-px",children:i.map((x,c)=>e.jsx("span",{className:s("flex size-4 items-center justify-center font-mono text-[9px]",f),children:x},`dow-${c}`))}),e.jsx("div",{className:"flex gap-[6px]",children:d.map((x,c)=>e.jsx("div",{className:"grid grid-rows-7 gap-[6px]",children:x.map((p,u)=>p===null?e.jsx("span",{className:"size-4 rounded-[5px] bg-transparent"},`empty-${c}-${u}`):e.jsx("span",{className:"size-4 rounded-[5px] border",style:B(p,c===25&&u===0,m)},`cell-${c}-${u}`))},`week-${c}`))})]})]})})}function P({label:l,dayIndex:i,hours:d,isLight:m}){return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s("flex min-w-0 items-center justify-end overflow-hidden text-ellipsis pr-px font-mono text-[5px] leading-none sm:pr-0.5 sm:text-[6px] md:text-[7px]",m?"text-[#71717A]":"text-zinc-500"),children:l}),d.map(f=>{const h=(i*7+f)%5,r=G(h,m);return e.jsx("div",{className:"rounded-[3px] border",style:{background:r,borderColor:m?"rgba(229,231,235,0.9)":"rgba(255,255,255,0.08)"},title:`${l} ${f}:00`},`${l}-${f}`)})]})}function G(l,i){if(i){const m=["#F3F4F6","#FEF2F2","#FECACA","#F87171","#DC2626"];return m[l]??m[0]}const d=["rgba(39,39,42,0.85)","rgba(248,113,113,0.12)","rgba(248,113,113,0.24)","rgba(248,113,113,0.42)","rgba(252,165,165,0.58)"];return d[l]??d[0]}function B(l,i,d){if(d){const h=[{bg:"#F9FAFB",border:"#E5E7EB"},{bg:"#F0FDF4",border:"#BBF7D0"},{bg:"#DCFCE7",border:"#86EFAC"},{bg:"#BBF7D0",border:"#4ADE80"},{bg:"#A7F3D0",border:"#10B981"}],r=h[l]??h[0];return{borderColor:r.border,background:r.bg,boxShadow:i?"0 0 0 2px #34D399":"none"}}const m=[{bg:"rgba(24,24,27,0.9)",border:"rgba(255,255,255,0.1)"},{bg:"rgba(16,185,129,0.12)",border:"rgba(52,211,153,0.28)"},{bg:"rgba(16,185,129,0.2)",border:"rgba(52,211,153,0.4)"},{bg:"rgba(16,185,129,0.3)",border:"rgba(110,231,183,0.52)"},{bg:"rgba(52,211,153,0.42)",border:"rgba(167,243,208,0.65)"}],f=m[l]??m[0];return{borderColor:f.border,background:f.bg,boxShadow:i?"0 0 0 2px rgba(52,211,153,0.72)":"none"}}export{Z as component};