import{C as e,E as t,F as n,I as r,O as i,S as a,W as o,Y as s,a as c,c as l,d as u,dt as d,g as f,h as p,i as m,j as h,k as g,l as _,lt as v,m as y,p as b,s as x,t as S,u as C,ut as w,w as ee}from"./_plugin-vue_export-helper-CnSQ-FNj.js";import{a as T,i as E,o as D,s as O}from"./index-KHHWwfaX.js";var k=E(`devices`,()=>{let e=o([]),t=o(!1),n=o(null);async function r(){t.value=!0,n.value=null;try{let t=await fetch(`/api/devices`);if(!t.ok)throw Error(`Failed to load devices`);e.value=await t.json()}catch(e){n.value=e instanceof Error?e.message:`Unknown error`}finally{t.value=!1}}async function i(t,n){let r=await fetch(`/api/devices/${t}`,{method:`PATCH`,headers:{"Content-Type":`application/json`},body:JSON.stringify(n)});if(!r.ok)throw Error(`Failed to update device`);let i=await r.json(),a=e.value.findIndex(e=>e.id===t);return a!==-1&&(e.value[a]=i),i}return{devices:e,loading:t,error:n,fetchDevices:r,updateDevice:i}}),A={key:0,class:`btn__spinner`,"aria-hidden":`true`},j=S(f({__name:`BaseButton`,props:{variant:{default:`primary`},tag:{default:`button`},type:{default:`button`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},setup(e){return(n,i)=>(t(),_(h(e.tag),a({type:e.tag===`button`?e.type:void 0,disabled:e.disabled||e.loading,class:[`btn`,`btn--${e.variant}`,{"btn--loading":e.loading}]},n.$attrs),{default:r(()=>[e.loading?(t(),u(`span`,A)):C(``,!0),g(n.$slots,`default`,{},void 0,!0)]),_:3},16,[`type`,`disabled`,`class`]))}}),[[`__scopeId`,`data-v-7d3f1e61`]]),M={key:0,class:`frame-card__status-badge`,"aria-live":`polite`},N=[`src`,`alt`],P={key:1,class:`frame-card__empty-preview`,"aria-hidden":`true`},F={class:`frame-card__body`},I={class:`frame-card__name`},L={key:0,class:`frame-card__count`},R={key:0},z={key:1,"aria-hidden":`true`},B=S(f({__name:`FrameCard`,props:{deviceId:{},name:{},size:{},status:{},orientation:{},thumbnailUrl:{},photoCount:{}},emits:[`add-photo`,`edit`],setup(e){let n=e,i=x(()=>n.size===`large`?{aspectRatio:n.orientation===`portrait`?`3/5`:`5/3`}:{});return(n,a)=>(t(),u(`div`,{class:v([`frame-card`,`frame-card--${e.size}`,e.status!==`ok`&&`frame-card--${e.status}`])},[e.status===`ok`?C(``,!0):(t(),u(`div`,M,[a[2]||=l(`span`,{class:`frame-card__status-dot`,"aria-hidden":`true`},null,-1),y(` `+d(e.status===`offline`?`Offline`:`Sync issue`),1)])),e.size===`large`?(t(),u(`button`,{key:1,class:`frame-card__settings-btn`,type:`button`,"aria-label":`Frame settings`,onClick:a[0]||=t=>n.$emit(`edit`,e.deviceId)},[...a[3]||=[l(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.5`,"aria-hidden":`true`},[l(`circle`,{cx:`12`,cy:`12`,r:`3`}),l(`path`,{d:`M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z`})],-1)]])):C(``,!0),l(`div`,{class:`frame-card__preview`,style:w(i.value)},[e.thumbnailUrl?(t(),u(`img`,{key:0,src:e.thumbnailUrl,alt:`Current photo on ${e.name}`,class:`frame-card__img`},null,8,N)):(t(),u(`div`,P,[...a[4]||=[l(`svg`,{width:`32`,height:`32`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`1.5`},[l(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`}),l(`circle`,{cx:`8.5`,cy:`8.5`,r:`1.5`}),l(`polyline`,{points:`21,15 16,10 5,21`})],-1)]]))],4),l(`div`,F,[l(`p`,I,d(e.name),1),e.size===`compact`?(t(),u(`p`,L,d(e.photoCount)+` `+d(e.photoCount===1?`photo`:`photos`),1)):C(``,!0),p(j,{variant:e.size===`large`?`primary`:`icon-pill`,"aria-label":(e.size,`Add photo to ${e.name}`),class:`frame-card__add-btn`,onClick:a[1]||=t=>n.$emit(`add-photo`,e.deviceId)},{default:r(()=>[e.size===`large`?(t(),u(`span`,R,`+ Add Photo`)):(t(),u(`span`,z,`+`))]),_:1},8,[`variant`,`aria-label`])])],2))}}),[[`__scopeId`,`data-v-6b5d66c8`]]),te=[`aria-label`],V=S(f({__name:`BaseBottomSheet`,props:{modelValue:{type:Boolean},label:{}},emits:[`update:modelValue`],setup(i,{emit:a}){let s=i,d=a,f=o(null),m=null;function h(){d(`update:modelValue`,!1)}return n(()=>s.modelValue,async t=>{t?(m=document.activeElement,await e(),f.value?.focus()):(m?.focus(),m=null)}),(e,n)=>(t(),_(c,{to:`body`},[p(T,{name:`sheet`},{default:r(()=>[i.modelValue?(t(),u(`div`,{key:0,class:`sheet-overlay`,role:`dialog`,"aria-label":i.label,"aria-modal":`true`,onClick:O(h,[`self`]),onKeydown:D(h,[`esc`])},[l(`div`,{ref_key:`sheetRef`,ref:f,class:`sheet`,tabindex:`-1`},[n[0]||=l(`div`,{class:`sheet__handle`,"aria-hidden":`true`},null,-1),g(e.$slots,`default`,{},void 0,!0)],512)],40,te)):C(``,!0)]),_:3})]))}}),[[`__scopeId`,`data-v-81ce2dd1`]]),H=[`id`,`value`,`type`],U=[`for`],W=[`id`],G=S(f({__name:`BaseInput`,props:{modelValue:{default:``},label:{},type:{default:`text`},error:{},id:{}},emits:[`update:modelValue`,`blur`],setup(e,{emit:n}){let r=e,i=n,o=x(()=>r.id??`input-${Math.random().toString(36).slice(2)}`);return(n,r)=>(t(),u(`div`,{class:v([`input-wrap`,{"input-wrap--error":!!e.error,"input-wrap--filled":!!e.modelValue}])},[l(`input`,a({id:o.value},n.$attrs,{value:e.modelValue,type:e.type,class:`input-wrap__field`,placeholder:` `,onInput:r[0]||=e=>i(`update:modelValue`,e.target.value),onBlur:r[1]||=e=>i(`blur`,e)}),null,16,H),l(`label`,{for:o.value,class:`input-wrap__label`},d(e.label),9,U),e.error?(t(),u(`p`,{key:0,id:`${o.value}-error`,class:`input-wrap__error`,role:`alert`},d(e.error),9,W)):C(``,!0)],2))}}),[[`__scopeId`,`data-v-28da7c7d`]]),K={class:`orientation-picker`,role:`radiogroup`,"aria-label":`Display orientation`},q=[`aria-checked`,`aria-label`,`onClick`],J=[`viewBox`],Y=[`stroke`,`fill`],X=[`fill`],Z={class:`orientation-opt__label`},Q={class:`orientation-opt__sub`},ne=S(f({__name:`OrientationPicker`,props:{modelValue:{}},emits:[`update:modelValue`],setup(e){let n=[{value:`landscape`,label:`Landscape`,sub:`Ribbon at bottom`,viewBox:`0 0 48 48`,rect:{x:4,y:12,width:40,height:24},ribbon:{x:20,y:36,width:8,height:5}},{value:`portrait`,label:`Portrait`,sub:`Ribbon on left`,viewBox:`0 0 48 48`,rect:{x:12,y:4,width:24,height:40},ribbon:{x:7,y:20,width:5,height:8}}];return(r,o)=>(t(),u(`div`,K,[(t(),u(m,null,i(n,n=>l(`button`,{key:n.value,type:`button`,role:`radio`,"aria-checked":e.modelValue===n.value,"aria-label":n.label,class:v([`orientation-opt`,{"orientation-opt--active":e.modelValue===n.value}]),onClick:e=>r.$emit(`update:modelValue`,n.value)},[(t(),u(`svg`,{class:`orientation-opt__diagram`,viewBox:n.viewBox,fill:`none`,"aria-hidden":`true`},[l(`rect`,a({ref_for:!0},n.rect,{rx:`2`,stroke:e.modelValue===n.value?`var(--color-primary)`:`currentColor`,"stroke-width":`1.5`,fill:e.modelValue===n.value?`color-mix(in srgb, var(--color-primary) 12%, transparent)`:`var(--color-surface-2)`}),null,16,Y),l(`rect`,a({ref_for:!0},n.ribbon,{fill:e.modelValue===n.value?`var(--color-primary)`:`var(--color-text-muted)`,rx:`1`}),null,16,X)],8,J)),l(`span`,Z,d(n.label),1),l(`span`,Q,d(n.sub),1)],10,q)),64))]))}}),[[`__scopeId`,`data-v-679dae08`]]),re={class:`home-view`},ie={key:0,class:`home-view__loading`,"aria-live":`polite`},ae={key:1,class:`home-view__empty`},oe={key:2,class:`home-view__single`},$={key:3,class:`home-view__list`},se={class:`home-view__sheet-field`},ce={class:`home-view__sheet-field`},le=S(f({__name:`HomeView`,setup(e){let n=k();ee(()=>n.fetchDevices());function a(e){console.log(`add-photo`,e)}let c=o(!1),f=o(!1),h=o(null),g=o(``),v=o(`landscape`);function x(e){let t=n.devices.find(t=>t.id===e);t&&(h.value=t,g.value=t.name,v.value=t.orientation,c.value=!0)}async function S(){if(h.value){f.value=!0;try{await n.updateDevice(h.value.id,{name:g.value.trim()||h.value.name,orientation:v.value}),c.value=!1}finally{f.value=!1}}}return(e,o)=>(t(),u(m,null,[l(`main`,re,[s(n).loading?(t(),u(`div`,ie,` Loading… `)):s(n).devices.length===0?(t(),u(`div`,ae,[...o[3]||=[b(`<div class="home-view__empty-card" data-v-c5988696><svg class="home-view__empty-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" data-v-c5988696><rect x="3" y="3" width="18" height="18" rx="2" data-v-c5988696></rect><circle cx="8.5" cy="8.5" r="1.5" data-v-c5988696></circle><polyline points="21,15 16,10 5,21" data-v-c5988696></polyline></svg><p class="home-view__empty-title" data-v-c5988696>Set up your first frame</p><p class="home-view__empty-sub" data-v-c5988696> Power on your pictureFrame device and scan the QR code it displays to get started. </p></div>`,1)]])):s(n).devices.length===1?(t(),u(`div`,oe,[p(B,{deviceId:s(n).devices[0].id,name:s(n).devices[0].name,size:`large`,status:`ok`,orientation:s(n).devices[0].orientation,onAddPhoto:a,onEdit:x},null,8,[`deviceId`,`name`,`orientation`])])):(t(),u(`div`,$,[(t(!0),u(m,null,i(s(n).devices,e=>(t(),_(B,{key:e.id,deviceId:e.id,name:e.name,size:`compact`,status:`ok`,orientation:e.orientation,onAddPhoto:a,onEdit:x},null,8,[`deviceId`,`name`,`orientation`]))),128))]))]),p(V,{modelValue:c.value,"onUpdate:modelValue":o[2]||=e=>c.value=e,label:`Frame settings`},{default:r(()=>[o[5]||=l(`h2`,{class:`home-view__sheet-title`},`Frame settings`,-1),l(`div`,se,[p(G,{modelValue:g.value,"onUpdate:modelValue":o[0]||=e=>g.value=e,label:`Frame name`,maxlength:`100`},null,8,[`modelValue`])]),l(`div`,ce,[o[4]||=l(`p`,{class:`home-view__sheet-label`},`Orientation`,-1),p(ne,{modelValue:v.value,"onUpdate:modelValue":o[1]||=e=>v.value=e},null,8,[`modelValue`])]),p(j,{variant:`primary`,class:`home-view__sheet-save`,disabled:f.value,onClick:S},{default:r(()=>[y(d(f.value?`Saving…`:`Save`),1)]),_:1},8,[`disabled`])]),_:1},8,[`modelValue`])],64))}}),[[`__scopeId`,`data-v-c5988696`]]);export{le as default};