@hazem3500/komo 0.9.32 → 0.9.33
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/{chunk-MU3NFN44.js → chunk-VF4VW5JQ.js} +1 -1
- package/dist/chunk-ZJWJEB5S.js +1 -0
- package/dist/design-comment-NXUBOTV3.js +1 -0
- package/dist/design-mode.js +1 -1
- package/dist/index.js +1 -1
- package/dist/{inline-text-editor-VIICPLUY.js → inline-text-editor-WCVLLHZQ.js} +1 -1
- package/dist/node.mjs +1 -1
- package/dist/react.js +1 -1
- package/dist/server.js +1 -1
- package/dist/setup.js +1 -1
- package/package.json +1 -1
- package/server/setup-client.txt +39 -38
- package/dist/chunk-LDZL6B65.js +0 -1
- package/dist/design-comment-SBTYFBOV.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=e.ownerDocument.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();){let e=t.currentNode;n.push([e,e.data])}return n}function n(t,n){for(let[r,l]of t)(!r.isConnected||n.contains(r))&&!r.parentElement?.closest(e)&&r.data!==l&&(r.data=l)}function r(e,t,r){n(t,e);let l=new MutationObserver(()=>{!e.isConnected||t.some(([t])=>!e.contains(t))?(l.disconnect(),r?.()):(n(t,e),o())}),o=()=>{l.disconnect(),l.observe(e,{childList:!0,characterData:!0,subtree:!0});for(let t=e.parentNode;t;t=t.parentNode??(t instanceof ShadowRoot?t.host:null))l.observe(t,{childList:!0})};return o(),()=>l.disconnect()}function l(l,o,s,a){if(!l.isConnected)return;let i=t(l);if(i.map(([,e])=>e).join("")!==o)return;let c=0,d=o.length;for(;c<o.length&&c<s.length&&o[c]===s[c];)c++;for(;d>c&&s.length-(o.length-d)>c&&o[d-1]===s[s.length-(o.length-d)-1];)d--;let f=s.slice(c,s.length-(o.length-d)),u=[],h=0,m=!1;for(let[t,n]of i){let r=h+n.length;if(c===d?!m&&c>=h&&c<=r&&!t.parentElement?.closest(e):c<r&&d>h){if(t.parentElement?.closest(e))return;let r=Math.max(0,c-h),l=Math.min(n.length,Math.max(r,d-h));u.push([t,n.slice(0,r)+(m?"":f)+n.slice(l)]),m=!0}else u.push([t,n]);h=r}if(!m)return;let p=r(l,u,a);return()=>{p(),n(i,l)}}function o(){let e=new Map,l=[],o=new Map,s=new Map,a=e=>{o.get(e)?.(),o.delete(e)},i=(e,t)=>{a(e),o.set(e,r(e,t))},c=t=>{a(t),e.delete(t),s.delete(t)};return{pause:a,resume(e){let t=s.get(e);t&&i(e,t)},record(n){if(n.reactProp||n.before===n.after)return;e.has(n.element)||e.set(n.element,{text:n.before,nodes:n.nodes??t(n.element)}),l.push(n);let r=t(n.element);s.set(n.element,r),i(n.element,r)},remember(n,r){e.has(n)||e.set(n,{text:r,nodes:t(n)})},original:t=>e.get(t)?.text,reconcile(t,n){e.get(t)?.text===n&&c(t)},reset(t){a(t),n(e.get(t)?.nodes??[],t),c(t);for(let e=l.length-1;e>=0;e--)l[e].element===t&&l.splice(e,1)},proposal(t){let n=e.get(t)?.text,r=s.get(t)?.map(([,e])=>e).join("")??t.textContent??"";return void 0!==n&&n!==r?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(r)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let e of o.keys())a(e);for(let[t,{nodes:r}]of e)n(r,t);e.clear(),s.clear(),l.length=0},showBefore(t,r=!0){for(let[l,o]of e)t&&!r?(a(l),n(o.nodes,l)):i(l,t?o.nodes:s.get(l)??o.nodes)},undo(){let r=l.pop();if(!r)return null;if(a(r.element),n(r.nodes??[],r.element),e.get(r.element)?.text===r.before)c(r.element);else{let e=t(r.element);s.set(r.element,e),i(r.element,e)}return r.element}}}export{e as a,t as b,n as c,r as d,l as e,o as f};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{e}from"./chunk-ZJWJEB5S.js";import{f as t}from"./chunk-5BPQP3VG.js";import{a as n}from"./chunk-RPY7OOOR.js";var r=/^Proposed (.+?) changes? \(preview only\)$/,a={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function o(e){return e.split("\n").some(e=>r.test(e))}function i(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function s(e,t){let n=/^Shared theme (\S+) \((--[\w-]+)\): (.*?) → (.*?)(?:; preview scope .*)?$/.exec(e);if(n)return{label:n[1],token:n[1],before:n[3],after:n[4],apply:{kind:"variable",property:n[2]}};if(n=/^Element ([\w-]+): (.*?) → (.*?)(?: \[([^\]]+)\])*$/.exec(e),n){let t=/\[([\w.-]+)\]/.exec(e.slice(e.indexOf("→")))?.[1];return{label:n[1],before:n[2],after:n[3],...t&&!t.includes(" ")?{token:t}:{},apply:{kind:"style",property:n[1]}}}if(n=/^- (.+?): (.*) → (.*?)(?: \[([^\]]+)\])?$/.exec(e),!n)return null;let[,r,a,o,s]=n;return"inline text"===t?{label:"Text",before:i(a),after:i(o),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:i(a),after:i(o),...s&&"custom value"!==s?{token:s}:{}}:{label:r,before:a,after:o,apply:{kind:"style",property:r}}}function l(e){let t=[];for(let n of e.split(/\n{2,}/)){let e=n.split("\n"),o=r.exec(e[0]??"");if(!o){n.trim()&&t.push({text:n.trim()});continue}let i=o[1],l={title:a[i]??`${i[0].toUpperCase()}${i.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))l.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: \((.+)\))?$/.exec(t.slice(11));l.component=e,n&&(l.source=n)}else if(t.startsWith("Source: "))l.source=t.slice(8);else{let e=t.includes("→")?s(t,i):null;e&&e.before!==e.after&&l.changes.push(e)}l.changes.length?t.push(l):t.push({text:n.trim()})}return t}function d(e){let t=l(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,a=n.reduce((e,t)=>e+t.changes.length,0),o=n.find(e=>e.target)?.target,i=`Design change · ${a} ${1===a?"edit":"edits"}${o?` on ${p(o)}`:""}`;return r?`${r}\n${i}`:i}function p(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var c=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,f=new Map,g=new Set,u=new Set,m="Preview unavailable: the target or its text has changed.";function h(e){g.add(e),C(e);for(let t of u){if(t.dataset.previewKey!==e||!t.isConnected)continue;t.querySelectorAll("button").forEach((e,t)=>{e.setAttribute("aria-pressed",String(0===t)),1===t&&(e.disabled=!0)});let n=t.closest(".design-comment")?.querySelector('[role="status"]');n&&(n.textContent=m,n.hidden=!1)}}var y=new Map;function x(e){let t=y.get(e);t&&(clearTimeout(t.timer),y.delete(e),t.finish())}function b(r,a,o,i=!1){if(g.has(r))return!1;x(r);let s=[],l=[],d=[],p=!1;for(let c of a){let a=o(c.target);for(let o of c.changes)if(o.apply&&"(unset)"!==o.after)if("variable"===o.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(o.apply.property);e.style.setProperty(o.apply.property,o.after),s.push(()=>t?e.style.setProperty(o.apply.property,t):e.style.removeProperty(o.apply.property))}else if(n(a)&&"style"===o.apply.kind){let e=a.style.getPropertyValue(o.apply.property),n=a.style.getPropertyPriority(o.apply.property),r=!a.hasAttribute("style"),s=o.apply.property,p=()=>"(unset)"!==o.before&&(a.style.setProperty(s,o.before,"important"),!0);i&&p()&&getComputedStyle(a).getPropertyValue(s),a.style.setProperty(s,o.after,"important"),d.push(p),l.push(()=>{e?a.style.setProperty(o.apply.property,e,n):a.style.removeProperty(o.apply.property),r&&t(a)})}else if("text"===o.apply.kind){let t=a instanceof HTMLElement?e(a,o.before,o.after,()=>h(r)):void 0;t?s.push(t):p=!0}}if(p){for(let e of[...s,...l].reverse())e();return!1}return s.length+l.length&&f.set(r,{restore:s,restoreStyles:l,pinBefore:d}),s.length+l.length>0}var w,v=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],k="cubic-bezier(.22, 1, .36, 1)";function E(e,t){let n=new Set;for(let r of e)for(let e of r.changes)if("style"===e.apply?.kind)n.add(e.apply.property);else if("variable"===e.apply?.kind)v.forEach(e=>n.add(e));else if("text"===e.apply?.kind){let e=t(r.target);e instanceof HTMLElement&&e.animate?.([{opacity:1},{opacity:.25,offset:.4},{opacity:1}],{duration:360,easing:k})}if(!n.size)return;w&&(clearTimeout(w.timer),w.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${k} !important; transition-delay: 0s !important; }`,document.head.append(r),w={style:r,timer:setTimeout(()=>{r.remove(),w=void 0},480)}}function C(e,t=!1){x(e);let n=f.get(e);if(!n)return;f.delete(e);for(let e of n.restore.reverse())e();let r=()=>{for(let e of n.restoreStyles.reverse())e()};if(!t||!n.pinBefore.length)return r();for(let e of n.pinBefore)e();y.set(e,{finish:r,timer:setTimeout(()=>x(e),480)})}function S(e){return f.has(e)||y.has(e)}function P(e=new Set){e.has("draft")||(A=void 0);for(let t of[...y.keys()])e.has(t)||x(t);for(let t of[...f.keys()])e.has(t)||C(t);for(let t of g)e.has(t)||g.delete(t)}function $(e){return"text"===e.apply?.kind||!(e.apply||e.token||c.test(e.before)||c.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function N(e,t){let n=0;for(;n<e.length&&n<t.length&&e[n]===t[n];)n++;let r=0;for(;r<e.length-n&&r<t.length-n&&e[e.length-1-r]===t[t.length-1-r];)r++;for(;n>0&&!/\s/.test(e[n-1]);)n--;for(;r>0&&!/\s/.test(e[e.length-r]);)r--;let a=e.slice(0,n),o=e.slice(e.length-r),i=document.createElement("p");i.className="design-diff",i.append(a.length>48?`…${a.slice(-40)}`:a);let s=e.slice(n,e.length-r),l=t.slice(n,t.length-r);return s&&i.append(Object.assign(document.createElement("del"),{textContent:s})),l&&i.append(Object.assign(document.createElement("ins"),{textContent:l})),i.append(o.length>48?`${o.slice(0,40)}…`:o),i}function O(e,t){let n=document.createElement("span");n.className="design-value";let r=/^var\((--[\w-]+)\)$/.exec(e);if(t&&r)return n.append(Object.assign(document.createElement("span"),{className:"design-token",textContent:t})),n;if(c.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function j(e,t,n){let r=l(t),a=r.filter(e=>"changes"in e),o=document.createElement("div");o.className="design-comment",o.append(Object.assign(document.createElement("style"),{textContent:'\n.design-comment { display: grid; gap: 8px; margin: 2px 0 6px; }\n.design-note { margin: 0; white-space: pre-wrap; }\n.design-card { border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; overflow: hidden; font-size: 12px; }\n.design-card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 8px 7px 12px; }\n.design-card-label { display: grid; min-width: 0; gap: 1px; }\n.design-card-title { font-weight: 600; color: #eee; white-space: nowrap; }\n.design-card-target { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8a8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }\n.design-toggle { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 7px; background: #ffffff0a; flex: none; }\n.design-toggle button { border: 0; padding: 0 8px; height: 22px; border-radius: 5px; font: inherit; font-size: 11px; color: #9a9a9a; background: none; cursor: pointer; }\n.design-toggle button[aria-pressed="true"] { color: #fff; background: #ffffff1a; }\n.design-toggle button:disabled { opacity: .45; cursor: not-allowed; }\n.design-rows { display: grid; border-top: 1px solid #ffffff0a; }\n.design-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; }\n.design-row + .design-row { border-top: 1px solid #ffffff06; }\n.design-row[hidden] { display: none; }\n.design-row-prose { grid-template-columns: 1fr; gap: 3px; }\n.design-diff { margin: 0; line-height: 1.5; color: #ddd; overflow-wrap: anywhere; }\n.design-diff del, .design-diff ins { border-radius: 3px; padding: 0 2px; }\n.design-diff del { color: #f6a19a; background: #f28b8224; text-decoration-color: #f6a19a99; }\n.design-diff ins { color: #b9e6ad; background: #8fd69424; text-decoration: none; }\n.design-prop { color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-values { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: #eee; }\n.design-before { color: #858585; text-decoration: line-through; text-decoration-color: #85858599; }\n.design-arrow { color: #666; }\n.design-value { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }\n.design-swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff26; }\n.design-token { padding: 1px 6px; border-radius: 5px; color: var(--accent, #bda6ef); background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent); }\n.design-more { border: 0; width: 100%; padding: 7px 12px; text-align: left; font: inherit; font-size: 11px; color: #9a9a9a; background: none; border-top: 1px solid #ffffff06; cursor: pointer; }\n.design-more:hover, .design-toggle button:hover { color: #fff; }\n.design-source { padding: 0 12px 8px; color: #777; font-size: 11px; }\n[data-compact] { gap: 6px; margin: 11px 0 0; }\n[data-compact] .design-card-head, [data-compact] .design-row, [data-compact] > .design-source { min-height: 0; padding: 4px 10px; }\n[data-compact]:hover > .design-source { color: #eee; text-decoration: underline; }\n'}));let i=document.createElement("p");i.className="design-source",i.setAttribute("role","status"),i.hidden=!g.has(n.key),i.textContent=m;let s=!!n.compact;s&&(o.dataset.compact="");let d=s?3:1/0,c=0,h=a.some(e=>e.changes.some(e=>e.apply)),y=[],x=()=>{let e=f.has(n.key);for(let t of y)t.querySelectorAll("button").forEach((t,n)=>t.setAttribute("aria-pressed",String(1===n?e:!e)))};for(let e of r){if("text"in e){let t=document.createElement("p");t.className="design-note",n.note(t,e.text),o.append(t);continue}if(d<=0){c+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let l=document.createElement("div");l.className="design-card-label",l.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let w=e.target?p(e.target):e.component;if(w){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:w});e.target&&(t.title=e.target),l.append(t)}if(r.append(l),h&&!y.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.dataset.previewKey=n.key,e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,r]of["Before","After"].entries()){let o=Object.assign(document.createElement("button"),{type:"button",textContent:r,title:`${r} · ${t?"→":"←"} or B`});1===t&&(o.disabled=g.has(n.key)),o.addEventListener("click",()=>{let e=1===t;if(e===f.has(n.key))return;let r=n.resolve(a.find(e=>e.target)?.target);e&&r?.scrollIntoView({block:"center",behavior:"smooth"});let o="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;o||E(a,n.resolve),e?(i.hidden=b(n.key,a,n.resolve,!o),i.textContent=m):C(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),x()}),e.append(o)}y.push(e);for(let e of u)e.isConnected||u.delete(e);u.add(e),r.append(e)}t.append(r);let v=document.createElement("div");v.className="design-rows";let k=4;e.changes.forEach((t,n)=>{if(d<=0)return void c++;s&&d--;let r=document.createElement("div");r.className="design-row",r.hidden=!s&&n>=k&&e.changes.length>k+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,$(t))return r.classList.add("design-row-prose"),r.append(a,N(t.before,t.after)),void v.append(r);let o=document.createElement("span");o.className="design-values";let i=O(t.before);i.classList.add("design-before"),o.append(i,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),O(t.after,t.token)),r.append(a,o),v.append(r)}),t.append(v);let S=v.querySelectorAll("[hidden]").length;if(S){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${S} more`});e.addEventListener("click",()=>{v.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!s&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),o.append(t)}c&&o.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${c} more`})),o.append(i),x(),e.replaceChildren(o),y.length&&(T||(T=!0,document.addEventListener("keydown",e=>{let t="ArrowLeft"===e.key?0:"ArrowRight"===e.key?1:"b"===e.key.toLowerCase()?-1:null;if(null===t||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.isComposing)return;let n=e.composedPath()[0];if(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select")))return;let r=[...u].reverse().find(e=>e.isConnected),a=r?.querySelectorAll("button"),o=-1===t?r?.querySelector('button[aria-pressed="false"]'):a?.[t];o&&(e.preventDefault(),o.click())})))}var A,T=!1;function L(e,t,n){A!==t&&(C("draft"),g.delete("draft"),A=t,b("draft",l(t).filter(e=>"changes"in e),n)),j(e,t,{key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{o as isDesignComment,S as isPreviewing,l as parseDesignComment,j as renderDesignComment,L as renderDraftProposal,P as resetDesignPreviews,p as shortTarget,d as summarizeDesignComment};
|
package/dist/design-mode.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,b as t,e as n,f as i,h as o}from"./chunk-5BPQP3VG.js";import{a as s,b as a}from"./chunk-RPY7OOOR.js";import{a as d}from"./chunk-53M6AOAX.js";import{j as r,k as l}from"./chunk-PLSWBSSX.js";var c=(e,t)=>Object.assign(r("button",e,t),{type:"button"}),p=e=>"function"==typeof matchMedia&&matchMedia(e).matches,g=()=>p("(prefers-reduced-motion: reduce)");function u(u){let h=r("style");h.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let m=null,f=import("./design-panel-ISV2MKNX.js").then(e=>{h.textContent+=e.designPanelStyles,m=e},()=>{D.textContent="Design controls unavailable · try again"}),b=r("aside","design-inspector");b.setAttribute("role","dialog"),b.setAttribute("aria-label","Design mode inspector"),b.setAttribute("aria-hidden","true"),b.hidden=!0;let v=r("div","design-outline");v.setAttribute("aria-hidden","true");let x=r("div","design-outline design-outline--prospective");x.setAttribute("aria-hidden","true"),x.dataset.kind="hover",x.hidden=!0;let y=r("div","design-inspector__heading"),_=null,w=c("design-inspector__back");w.hidden=!0,w.append(l("chevron")),w.addEventListener("click",()=>_?.run());let E=c("design-inspector__parent");E.hidden=!0;let k=r("span","design-inspector__target"),C=r("small"),L=c("design-inspector__close");L.setAttribute("aria-label","Exit design mode"),L.append(l("close"));let A=c("design-inspector__fold");A.append(l("chevron"));let P=r("div","design-inspector__identity");P.append(E,k,C),y.append(w,P,A,L);let T=r("div","design-inspector__controls"),M=r("div","design-inspector__bar"),S=r("span","design-inspector__count");S.title="Runtime preview · Undo, Reset or reload to restore";let D=r("p","design-inspector__status");D.setAttribute("role","status");let R=r("div","design-inspector__actions"),z=e=>{let t=c("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},H=z("Undo"),B=z("Reset"),I=z("Copy CSS");I.append(l("copy"));let K=c("","Comment"),j=c("design-text-edit","Edit text");j.title="Edit text",j.setAttribute("aria-label","Edit selected text inline"),R.append(H,B,I,K);let O=r("div","design-inspector__compare");O.setAttribute("role","group"),O.setAttribute("aria-label","Compare with the page");let F=["Before","After"].map((e,t)=>{let n=c("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>xe(!t)),O.append(n),n});M.append(S,O,D,R);let $,U=r("div");U.hidden=!0,b.append(y,U,T,M),u.root.append(h,v,x),(u.panelRoot??u.root).append(b);let V,X=!1,Y=0,q=null,W=null,N=()=>u.page?.()??location.pathname,G=N(),Q=new Map,J=null,Z=0,ee=0,te=null,ne="",ie=null,oe=null,se=new Map,ae=new WeakSet,de=new Map,re=new AbortController,le=()=>import("./design-export-44WHYCLI.js"),ce=e=>{V??=le().then(({footerTips:t})=>t(M,u.root,re.signal,e),()=>{V=void 0})};M.addEventListener("pointerover",ce),M.addEventListener("focusin",ce);let pe=new Set,ge=[],ue=e(ge);function he(e,t,i=e.style.getPropertyValue(t),o=e.style.getPropertyPriority(t)){let s=se.get(e);s||(se.set(e,s=new Map),e.hasAttribute("style")||ae.add(e)),s.has(t)||s.set(t,ie?.originalDesignTokenStyle(e,t)??{...n(e,t),value:i,priority:o})}function me(e,t){let n=de.get(e);n||de.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(se.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||de.delete(e),Ae(q,"selected")}let fe=0;new MutationObserver(()=>{let e=D.textContent??"";D.title=e,M.toggleAttribute("data-message",!!e),clearTimeout(fe),e&&(fe=window.setTimeout(function e(){J?.element?fe=window.setTimeout(e,2600):D.textContent=""},2600))}).observe(D,{childList:!0,characterData:!0,subtree:!0});let be,ve=!1;function xe(e,t=!0){if(e===ve)return;e&&J?.element&&Be(),ve=e,e&&ie?.showDesignBefore(!0);let n=t&&!g();for(let[t,i]of se){let s=de.get(t);o(t,i.keys(),()=>{for(let n of i.keys()){let i=se.get(t)?.get(n);e?ye(t,n,i):s?.has(n)&&t.style.setProperty(n,s.get(n),i?.priority)}},n,ae.has(t))}J?.showBefore(e,t),e||ie?.showDesignBefore(!1),F.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),b.toggleAttribute("data-before",e),He()}function ye(e,n,o){t(e,n,o),ae.has(e)&&i(e)}function _e(e,t,n){if(!q||(e.setAttribute("aria-invalid",String(null===n)),null===n))return;he(q,t);let i=ie?.noteDesignTokenOverride(q,t,n);ue.override(e,i?.undo),q.style.setProperty(t,n,i?.priority??se.get(q)?.get(t)?.priority),me(q,t),He()}function we(e,t,n=!0){q&&(ue.commit(e,q,t,n),He())}function Ee(){if(Oe(),T.replaceChildren(),ke(),!q)return $&&T.append($.empty),k.textContent="Select an element",C.textContent="",void(E.hidden=!0);let e=`${q.tagName.toLowerCase()}${q.id?`#${q.id}`:""}`;k.textContent=e,C.textContent=q instanceof HTMLIFrameElement?"Frame only · contents are isolated":q.classList.length?`.${[...q.classList].slice(0,2).join(".")}`:"";let t=q.parentElement;E.hidden=!t||t===document.body||t===document.documentElement,E.textContent=t?.tagName.toLowerCase()??"",E.setAttribute("aria-label",`Select parent ${E.textContent}`);let i=q,o=m;o?(o.renderPanel(T,{element:i,changed:de.get(i),collapsed:pe,editText:j,begin:(e,t)=>ue.begin(e,n(i,t)),apply:_e,commit:we,cancel(e,t){ue.cancel(e,i,t),me(i,t),He()},rerender:Ee}),(u.design||i.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(oe??=import("./react-props-panel-ME6XCEVP.js").then(e=>ie=e).catch(e=>{throw oe=null,e}),oe.then(e=>{if(!X||q!==i||T.querySelector(".design-react-group, .design-theme-group"))return;let t=u.root;e.attachThemeSwitcher(T,u.design,()=>Se(i),t);let n=e=>{let t=()=>{for(let e of se.get(i)?.keys()??[])me(i,e)};e&&ge.push({element:i,undo:()=>{e(),t()}}),t(),He()},s=e.createReactPropsPanel(i,n,t,Se,u.design,Ee);s&&T.prepend(s),e.attachStyleTokenControls(i,o.fields,T,(e,t,n)=>{he(i,e.property,n),me(i,e.property),ue.begin(t,{value:n,priority:i.style.getPropertyPriority(e.property)}),we(t,e.property)},t,o.valueFor,o.toHex,u.design,n);let a=e.createDesignThemePanel(i,o,He,t);a&&T.append(a)}).catch(()=>{}))):f.then(()=>{X&&q===i&&Ee()})}function ke(){b.toggleAttribute("data-empty",K.hidden=!q),$&&($.hint.hidden=!q),b.parentElement?.toggleAttribute("data-design-empty",X&&!q);let e=[...Q.keys()].filter(Ce);U.hidden=!!q||!e.length,$&&($.pending.hidden=U.hidden),$?.update(e.length,e.some(e=>e.isConnected&&Q.get(e)===N()))}function Ce(e){return!!(de.get(e)?.size||e instanceof HTMLElement&&J?.hasChanges(e)||ie?.hasReactPropChanges(e)||ie?.hasDesignTokenEdit(e))}function Le(){Be(),Me?.disconnect(),q=null,W=null,v.hidden=x.hidden=!0,Ee(),He()}function Ae(e,t,n=!1,i=v){if(!X||!e?.isConnected)return void(i.hidden=!0);let o=e.getBoundingClientRect();if(o.width&&o.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==te||t!==ne)){te=e,ne=t,clearTimeout(ee);let n=b.getBoundingClientRect(),i=e=>o.left<e+n.width&&o.right>e&&o.top<n.bottom&&o.bottom>n.top;u.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(ee=window.setTimeout(u.flip,"hover"===t?350:0))}i.hidden=!d(i,o,e,u.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ae(q??W,q?"selected":"hover",e),Ae(q&&W!==q?W:null,"hover",!1,x)}function Te(){Z||(Z=requestAnimationFrame(()=>{Z=0,q&&(!q.isConnected||G!==N())&&Le(),Pe()}))}let Me="function"==typeof ResizeObserver?new ResizeObserver(Te):null;function Se(e){!s(e)||!e.isConnected||u.host.contains(e)||(J?.element&&J.element!==e&&Be(),Me?.disconnect(),Me?.observe(e),q=e,W=e,G=N(),Q.set(e,G),Ee(),Ae(e,"selected",!0),x.hidden=!0,He())}let De=()=>p("(max-width:520px)");function Re(e){b.toggleAttribute("data-folded",e&&De()),A.setAttribute("aria-expanded",String(!b.hasAttribute("data-folded"))),A.setAttribute("aria-label",b.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ze(e){Re(!1),De()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=b.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:g()?"auto":"smooth"})})}function He(){Te(),H.disabled=!ge.length&&!ie?.canUndoReactProp(q)&&!ie?.canUndoDesignTokenEdit(q),B.disabled=!function(){let e=q,t=e?(de.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!J?.hasChanges(e))+ +!!ie?.hasReactPropChanges(e)||+!!ie?.hasDesignTokenEdit(e):0;return S.textContent=t?`${t} change${t>1?"s":""}`:"",M.toggleAttribute("data-changes",t>0||!H.disabled),O.hidden=!t&&!ve,t}(),I.disabled=!q||!de.get(q)?.size,K.disabled=!q,j.disabled=!(!J?.busy&&q?.isConnected&&q instanceof HTMLElement),j.textContent=J?.isEditing(q instanceof HTMLElement?q:null)?"Done editing":"Edit text",j.setAttribute("aria-label",J?.isEditing(q instanceof HTMLElement?q:null)?"Finish inline text editing":"Edit selected text inline"),ke()}function Be(e=!1){J?.finish(e),He()}function Ie(e){!X||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(u.host)||(e.preventDefault(),e.stopImmediatePropagation(),Le(),Ke(!1),u.onExit())}function Ke(e){if(e||(Oe(),J?.finish(),X&&(be=ve,xe(!0,!1)),ie?.restoreThemes(b)),e&&!X&&void 0!==be){let e=be;be=void 0,xe(e,!1)}e&&q&&(!q.isConnected||G!==N())&&Le(),clearTimeout(Y),Y=0,X=e,ke(),e?(b.hidden=!1,b.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{X&&(b.dataset.state="active")}),v.hidden=!q,Ee(),Re(!q),Ae(q,"selected"),L.focus({preventScroll:!0})):(W=null,v.hidden=x.hidden=!0,b.setAttribute("aria-hidden","true"),b.dataset.state="closing",g()?(b.hidden=!0,delete b.dataset.state):Y=window.setTimeout(()=>{Y=0,X||(b.hidden=!0,delete b.dataset.state)},250))}function je(){Oe(),xe(!1,!1),ie?.resetPreviews();for(let[e,t]of se)o(e,t.keys(),()=>{for(let[n,i]of t)ye(e,n,i)},!1,ae.has(e)),ae.delete(e);se.clear(),de.clear(),ge.length=0,J?.restoreAll(),Q.clear(),He()}function Oe(){u.root.dispatchEvent(new Event("komo-preview-cancel"))}function Fe(e,t){return t(e,de.get(e),t=>se.get(e)?.get(t)?.computed,ie?.tokenBoundProperties(e),[e instanceof HTMLElement?J?.proposal(e):void 0,ie?.proposedDesignChanges(e)],ie?.designContext(e,u.design))}function $e(e){J?.isEditing(e instanceof HTMLElement?e:null)&&Be(!0);let t=de.get(e),n=(e instanceof HTMLElement&&J?.hasChanges(e))??!1,i=ie?.hasReactPropChanges(e)??!1,s=ie?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||s){n&&e instanceof HTMLElement&&J?.reset(e),s&&ie?.resetDesignTokenEdits(e),o(e,t?.keys()??[],()=>{for(let n of t?.keys()??[])ye(e,n,se.get(e)?.get(n))},!1,ae.has(e)),de.delete(e),se.delete(e),ae.delete(e),Q.delete(e),i&&ie?.resetReactProps(e);for(let t=ge.length-1;t>=0;t--)ge[t].element===e&&ge.splice(t,1)}}j.addEventListener("click",e=>{J||q&&(D.textContent="Loading inline text editor…",import("./inline-text-editor-VIICPLUY.js").then(t=>{J||!q||!X||(J=t.bindInlineTextTools({button:j,status:D,selected:()=>q instanceof HTMLElement?q:null,active:()=>X,onChange:He,onCommit(e){ge.push({kind:"text",element:e})}}),J.toggle(e))}).catch(()=>{D.textContent="Inline text editing is unavailable."}))}),A.addEventListener("click",()=>Re(!b.hasAttribute("data-folded"))),E.addEventListener("click",()=>Se(q?.parentElement??null)),L.addEventListener("click",()=>{J?.element&&Be(),Le(),Ke(!1),u.onExit()}),H.addEventListener("click",()=>{let e=ge.pop();e?e.kind?"text"===e.kind?q===(J?.undo()??e.element)&&Ee():(ye(e.element,e.property,e.before),e.before.bindingUndo?.(),ie?.syncDesignTokenBinding(e.element,e.property),me(e.element,e.property),q===e.element&&Ee(),Ae(q??W,q?"selected":"hover")):(e.undo(),Ee()):(q&&(ie?.undoDesignTokenEdit(q),ie?.undoReactProp(q),Ee()),D.textContent="Runtime preview · Undo, Reset or reload to restore"),He(),(H.disabled?L:H).focus({preventScroll:!0})}),B.addEventListener("click",()=>{q&&($e(q),Ee(),Ae(q,"selected"),He(),L.focus({preventScroll:!0}))}),I.addEventListener("click",()=>{let e=q,t=e?de.get(e):void 0;!e||!t?.size||le().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),D.textContent="CSS copied"}catch{D.textContent=i}})}),K.addEventListener("click",()=>{let e=q;e&&(J?.isEditing(e instanceof HTMLElement?e:null)&&Be(),le().then(({designProposal:t})=>{if(!X||q!==e||!e.isConnected)return;let n=Fe(e,t);$e(e),He(),u.onComment(e,n)},()=>{D.textContent="Comment unavailable · try again"}))});let Ue=()=>xe(!1);for(let e of[T,R,j])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Ue,!0);document.addEventListener("pointermove",function(e){if(!X)return;if(e.composedPath().includes(u.host))return W=null,void Pe();let t=a(u.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);W=t&&!u.host.contains(t)?t:null,Pe(!q)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!X||0!==e.button||e.composedPath().includes(u.host))return;let t=a(u.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!t||u.host.contains(t)||J?.element&&(t===J.element||J.element.contains(t))||(J?.element&&Be(),e.preventDefault(),e.stopImmediatePropagation(),Se(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!X||e.composedPath().includes(u.host)||(e.preventDefault(),e.stopImmediatePropagation(),q&&ze(q),2===e.detail&&q?.contains(e.target)&&!j.disabled&&!J?.element&&j.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(J?.handleKey(e))return void j.focus({preventScroll:!0});let t=e.key.toLowerCase(),n=e.composedPath()[0],i=n instanceof HTMLElement&&(n.isContentEditable||n.matches("input,textarea,select"));if(!i||"Escape"!==e.key||!n.closest("[data-field-property]")){if(X&&q&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!i&&("arrowup"===t||"arrowdown"===t)){let n=("arrowup"===t?q.parentElement:[...q.children].find(e=>s(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(s(n)&&n!==document.body&&n!==document.documentElement&&!u.host.contains(n)&&(e.preventDefault(),e.stopImmediatePropagation(),Se(n),ze(n)))}if(X&&!O.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!i)return e.preventDefault(),e.stopImmediatePropagation(),void xe("b"===t?!ve:"arrowleft"===t);if(X&&!J?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(u.host)){let t=document.activeElement;if(s(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Se(t),void ze(t)}e.composedPath().includes(u.host)&&Ie(e)}},{capture:!0,signal:re.signal}),window.addEventListener("keydown",Ie,{signal:re.signal}),window.addEventListener("scroll",Te,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Te,{passive:!0,signal:re.signal});let Ve=new MutationObserver(()=>{X&&q&&!q.isConnected&&Le(),W&&!W.isConnected&&(W=null,Pe())});Ve.observe(document.body,{childList:!0,subtree:!0});let Xe=le().then(e=>{re.signal.aborted||($=e.selectionViews({exitKey:u.exitKey,review(){let e=[...Q.keys()].reverse().find(e=>e.isConnected&&Q.get(e)===N()&&Ce(e));e&&Se(e)},reset:je,proposals:()=>[...Q.keys()].filter(Ce).map(t=>Fe(t,e.designProposal)),message:e=>{D.textContent=e}}),h.textContent+=$.styles,H.innerHTML=$.icons.undo,B.innerHTML=$.icons.reset,b.insertBefore($.hint,U),U.append($.pending),X?Ee():ke())},()=>{D.textContent="Selection tools unavailable · try again"});return{setActive:Ke,select:Se,clearSelection:Le,setReturnAction(e){_=e,w.hidden=!e,e&&(w.setAttribute("aria-label",e.label),w.title=e.label)},mountPanel(e){b.parentElement!==e&&(b.parentElement?.removeAttribute("data-design-empty"),e.append(b),ke())},get active(){return X},ready:Promise.all([f,Xe]),destroy(){J?.finish(!0),Ke(!1),je(),clearTimeout(Y),clearTimeout(fe),clearTimeout(ee),Me?.disconnect(),Ve.disconnect(),re.abort(),cancelAnimationFrame(Z),b.remove(),v.remove(),x.remove(),h.remove()}}}export{u as createDesignMode};
|
|
1
|
+
import{a as e,b as t,e as n,f as i,h as o}from"./chunk-5BPQP3VG.js";import{a as s,b as a}from"./chunk-RPY7OOOR.js";import{a as d}from"./chunk-53M6AOAX.js";import{j as r,k as l}from"./chunk-PLSWBSSX.js";var c=(e,t)=>Object.assign(r("button",e,t),{type:"button"}),p=e=>"function"==typeof matchMedia&&matchMedia(e).matches,g=()=>p("(prefers-reduced-motion: reduce)");function u(u){let h=r("style");h.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-outline--prospective[data-kind=hover]{opacity:.55}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__back,.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let m=null,f=import("./design-panel-ISV2MKNX.js").then(e=>{h.textContent+=e.designPanelStyles,m=e},()=>{D.textContent="Design controls unavailable · try again"}),b=r("aside","design-inspector");b.setAttribute("role","dialog"),b.setAttribute("aria-label","Design mode inspector"),b.setAttribute("aria-hidden","true"),b.hidden=!0;let v=r("div","design-outline");v.setAttribute("aria-hidden","true");let x=r("div","design-outline design-outline--prospective");x.setAttribute("aria-hidden","true"),x.dataset.kind="hover",x.hidden=!0;let y=r("div","design-inspector__heading"),_=null,w=c("design-inspector__back");w.hidden=!0,w.append(l("chevron")),w.addEventListener("click",()=>_?.run());let E=c("design-inspector__parent");E.hidden=!0;let k=r("span","design-inspector__target"),C=r("small"),L=c("design-inspector__close");L.setAttribute("aria-label","Exit design mode"),L.append(l("close"));let A=c("design-inspector__fold");A.append(l("chevron"));let P=r("div","design-inspector__identity");P.append(E,k,C),y.append(w,P,A,L);let T=r("div","design-inspector__controls"),M=r("div","design-inspector__bar"),S=r("span","design-inspector__count");S.title="Runtime preview · Undo, Reset or reload to restore";let D=r("p","design-inspector__status");D.setAttribute("role","status");let R=r("div","design-inspector__actions"),z=e=>{let t=c("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},H=z("Undo"),B=z("Reset"),K=z("Copy CSS");K.append(l("copy"));let I=c("","Comment"),j=c("design-text-edit","Edit text");j.title="Edit text",j.setAttribute("aria-label","Edit selected text inline"),R.append(H,B,K,I);let O=r("div","design-inspector__compare");O.setAttribute("role","group"),O.setAttribute("aria-label","Compare with the page");let F=["Before","After"].map((e,t)=>{let n=c("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>xe(!t)),O.append(n),n});M.append(S,O,D,R);let $,U=r("div");U.hidden=!0,b.append(y,U,T,M),u.root.append(h,v,x),(u.panelRoot??u.root).append(b);let V,X=!1,W=0,q=null,Y=null,N=()=>u.page?.()??location.pathname,Q=N(),G=new Map,Z=null,J=0,ee=0,te=null,ne="",ie=null,oe=null,se=new Map,ae=new WeakSet,de=new Map,re=new AbortController,le=()=>import("./design-export-44WHYCLI.js"),ce=e=>{V??=le().then(({footerTips:t})=>t(M,u.root,re.signal,e),()=>{V=void 0})};M.addEventListener("pointerover",ce),M.addEventListener("focusin",ce);let pe=new Set,ge=[],ue=e(ge);function he(e,t,i=e.style.getPropertyValue(t),o=e.style.getPropertyPriority(t)){let s=se.get(e);s||(se.set(e,s=new Map),e.hasAttribute("style")||ae.add(e)),s.has(t)||s.set(t,ie?.originalDesignTokenStyle(e,t)??{...n(e,t),value:i,priority:o})}function me(e,t){let n=de.get(e);n||de.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(se.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||de.delete(e),Ae(q,"selected")}let fe=0;new MutationObserver(()=>{let e=D.textContent??"";D.title=e,M.toggleAttribute("data-message",!!e),clearTimeout(fe),e&&(fe=window.setTimeout(function e(){Z?.element?fe=window.setTimeout(e,2600):D.textContent=""},2600))}).observe(D,{childList:!0,characterData:!0,subtree:!0});let be,ve=!1;function xe(e,t=!0){if(e===ve)return;e&&Z?.element&&Be(),ve=e,e&&ie?.showDesignBefore(!0);let n=t&&!g();for(let[t,i]of se){let s=de.get(t);o(t,i.keys(),()=>{for(let n of i.keys()){let i=se.get(t)?.get(n);e?ye(t,n,i):s?.has(n)&&t.style.setProperty(n,s.get(n),i?.priority)}},n,ae.has(t))}Z?.showBefore(e,t),e||ie?.showDesignBefore(!1),F.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),b.toggleAttribute("data-before",e),He()}function ye(e,n,o){t(e,n,o),ae.has(e)&&i(e)}function _e(e,t,n){if(!q||(e.setAttribute("aria-invalid",String(null===n)),null===n))return;he(q,t);let i=ie?.noteDesignTokenOverride(q,t,n);ue.override(e,i?.undo),q.style.setProperty(t,n,i?.priority??se.get(q)?.get(t)?.priority),me(q,t),He()}function we(e,t,n=!0){q&&(ue.commit(e,q,t,n),He())}function Ee(){if(Oe(),T.replaceChildren(),ke(),!q)return $&&T.append($.empty),k.textContent="Select an element",C.textContent="",void(E.hidden=!0);let e=`${q.tagName.toLowerCase()}${q.id?`#${q.id}`:""}`;k.textContent=e,C.textContent=q instanceof HTMLIFrameElement?"Frame only · contents are isolated":q.classList.length?`.${[...q.classList].slice(0,2).join(".")}`:"";let t=q.parentElement;E.hidden=!t||t===document.body||t===document.documentElement,E.textContent=t?.tagName.toLowerCase()??"",E.setAttribute("aria-label",`Select parent ${E.textContent}`);let i=q,o=m;o?(o.renderPanel(T,{element:i,changed:de.get(i),collapsed:pe,editText:j,begin:(e,t)=>ue.begin(e,n(i,t)),apply:_e,commit:we,cancel(e,t){ue.cancel(e,i,t),me(i,t),He()},rerender:Ee}),(u.design||i.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(oe??=import("./react-props-panel-ME6XCEVP.js").then(e=>ie=e).catch(e=>{throw oe=null,e}),oe.then(e=>{if(!X||q!==i||T.querySelector(".design-react-group, .design-theme-group"))return;let t=u.root;e.attachThemeSwitcher(T,u.design,()=>Se(i),t);let n=e=>{let t=()=>{for(let e of se.get(i)?.keys()??[])me(i,e)};e&&ge.push({element:i,undo:()=>{e(),t()}}),t(),He()},s=e.createReactPropsPanel(i,n,t,Se,u.design,Ee);s&&T.prepend(s),e.attachStyleTokenControls(i,o.fields,T,(e,t,n)=>{he(i,e.property,n),me(i,e.property),ue.begin(t,{value:n,priority:i.style.getPropertyPriority(e.property)}),we(t,e.property)},t,o.valueFor,o.toHex,u.design,n);let a=e.createDesignThemePanel(i,o,He,t);a&&T.append(a)}).catch(()=>{}))):f.then(()=>{X&&q===i&&Ee()})}function ke(){b.toggleAttribute("data-empty",I.hidden=!q),$&&($.hint.hidden=!q),b.parentElement?.toggleAttribute("data-design-empty",X&&!q);let e=[...G.keys()].filter(Ce);U.hidden=!!q||!e.length,$&&($.pending.hidden=U.hidden),$?.update(e.length,e.some(e=>e.isConnected&&G.get(e)===N()))}function Ce(e){return!!(de.get(e)?.size||e instanceof HTMLElement&&Z?.hasChanges(e)||ie?.hasReactPropChanges(e)||ie?.hasDesignTokenEdit(e))}function Le(){Be(),Me?.disconnect(),q=null,Y=null,v.hidden=x.hidden=!0,Ee(),He()}function Ae(e,t,n=!1,i=v){if(!X||!e?.isConnected)return void(i.hidden=!0);let o=e.getBoundingClientRect();if(o.width&&o.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==te||t!==ne)){te=e,ne=t,clearTimeout(ee);let n=b.getBoundingClientRect(),i=e=>o.left<e+n.width&&o.right>e&&o.top<n.bottom&&o.bottom>n.top;u.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(ee=window.setTimeout(u.flip,"hover"===t?350:0))}i.hidden=!d(i,o,e,u.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ae(q??Y,q?"selected":"hover",e),Ae(q&&Y!==q?Y:null,"hover",!1,x)}function Te(){J||(J=requestAnimationFrame(()=>{J=0,q&&(!q.isConnected||Q!==N())&&Le(),Pe()}))}let Me="function"==typeof ResizeObserver?new ResizeObserver(Te):null;function Se(e){!s(e)||!e.isConnected||u.host.contains(e)||(Z?.element&&Z.element!==e&&Be(),Me?.disconnect(),Me?.observe(e),q=e,Y=e,Q=N(),G.set(e,Q),Ee(),Ae(e,"selected",!0),x.hidden=!0,He())}let De=()=>p("(max-width:520px)");function Re(e){b.toggleAttribute("data-folded",e&&De()),A.setAttribute("aria-expanded",String(!b.hasAttribute("data-folded"))),A.setAttribute("aria-label",b.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ze(e){Re(!1),De()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=b.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:g()?"auto":"smooth"})})}function He(){Te(),H.disabled=!ge.length&&!ie?.canUndoReactProp(q)&&!ie?.canUndoDesignTokenEdit(q),B.disabled=!function(){let e=q,t=e?(de.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!Z?.hasChanges(e))+ +!!ie?.hasReactPropChanges(e)||+!!ie?.hasDesignTokenEdit(e):0;return S.textContent=t?`${t} change${t>1?"s":""}`:"",M.toggleAttribute("data-changes",t>0||!H.disabled),O.hidden=!t&&!ve,t}(),K.disabled=!q||!de.get(q)?.size,I.disabled=!q,j.disabled=!(!Z?.busy&&q?.isConnected&&q instanceof HTMLElement),j.textContent=Z?.isEditing(q instanceof HTMLElement?q:null)?"Done editing":"Edit text",j.setAttribute("aria-label",Z?.isEditing(q instanceof HTMLElement?q:null)?"Finish inline text editing":"Edit selected text inline"),ke()}function Be(e=!1){Z?.finish(e),He()}function Ke(e){!X||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(u.host)||(e.preventDefault(),e.stopImmediatePropagation(),Le(),Ie(!1),u.onExit())}function Ie(e){if(e||(Oe(),Z?.finish(),X&&(be=ve,xe(!0,!1)),ie?.restoreThemes(b)),e&&!X&&void 0!==be){let e=be;be=void 0,xe(e,!1)}e&&q&&(!q.isConnected||Q!==N())&&Le(),clearTimeout(W),W=0,X=e,ke(),e?(b.hidden=!1,b.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{X&&(b.dataset.state="active")}),v.hidden=!q,Ee(),Re(!q),Ae(q,"selected"),L.focus({preventScroll:!0})):(Y=null,v.hidden=x.hidden=!0,b.setAttribute("aria-hidden","true"),b.dataset.state="closing",g()?(b.hidden=!0,delete b.dataset.state):W=window.setTimeout(()=>{W=0,X||(b.hidden=!0,delete b.dataset.state)},250))}function je(){Oe(),xe(!1,!1),ie?.resetPreviews();for(let[e,t]of se)o(e,t.keys(),()=>{for(let[n,i]of t)ye(e,n,i)},!1,ae.has(e)),ae.delete(e);se.clear(),de.clear(),ge.length=0,Z?.restoreAll(),G.clear(),He()}function Oe(){u.root.dispatchEvent(new Event("komo-preview-cancel"))}function Fe(e,t){return t(e,de.get(e),t=>se.get(e)?.get(t)?.computed,ie?.tokenBoundProperties(e),[e instanceof HTMLElement?Z?.proposal(e):void 0,ie?.proposedDesignChanges(e)],ie?.designContext(e,u.design))}function $e(e){Z?.isEditing(e instanceof HTMLElement?e:null)&&Be(!0);let t=de.get(e),n=(e instanceof HTMLElement&&Z?.hasChanges(e))??!1,i=ie?.hasReactPropChanges(e)??!1,s=ie?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||s){n&&e instanceof HTMLElement&&Z?.reset(e),s&&ie?.resetDesignTokenEdits(e),o(e,t?.keys()??[],()=>{for(let n of t?.keys()??[])ye(e,n,se.get(e)?.get(n))},!1,ae.has(e)),de.delete(e),se.delete(e),ae.delete(e),G.delete(e),i&&ie?.resetReactProps(e);for(let t=ge.length-1;t>=0;t--)ge[t].element===e&&ge.splice(t,1)}}j.addEventListener("click",e=>{Z||q&&(D.textContent="Loading inline text editor…",import("./inline-text-editor-WCVLLHZQ.js").then(t=>{Z||!q||!X||(Z=t.bindInlineTextTools({button:j,status:D,selected:()=>q instanceof HTMLElement?q:null,active:()=>X,onChange:He,onCommit(e){ge.push({kind:"text",element:e})}}),Z.toggle(e))}).catch(()=>{D.textContent="Inline text editing is unavailable."}))}),A.addEventListener("click",()=>Re(!b.hasAttribute("data-folded"))),E.addEventListener("click",()=>Se(q?.parentElement??null)),L.addEventListener("click",()=>{Z?.element&&Be(),Le(),Ie(!1),u.onExit()}),H.addEventListener("click",()=>{let e=ge.pop();e?e.kind?"text"===e.kind?q===(Z?.undo()??e.element)&&Ee():(ye(e.element,e.property,e.before),e.before.bindingUndo?.(),ie?.syncDesignTokenBinding(e.element,e.property),me(e.element,e.property),q===e.element&&Ee(),Ae(q??Y,q?"selected":"hover")):(e.undo(),Ee()):(q&&(ie?.undoDesignTokenEdit(q),ie?.undoReactProp(q),Ee()),D.textContent="Runtime preview · Undo, Reset or reload to restore"),He(),(H.disabled?L:H).focus({preventScroll:!0})}),B.addEventListener("click",()=>{q&&($e(q),Ee(),Ae(q,"selected"),He(),L.focus({preventScroll:!0}))}),K.addEventListener("click",()=>{let e=q,t=e?de.get(e):void 0;!e||!t?.size||le().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),D.textContent="CSS copied"}catch{D.textContent=i}})}),I.addEventListener("click",()=>{let e=q;e&&(Z?.isEditing(e instanceof HTMLElement?e:null)&&Be(),le().then(({designProposal:t})=>{if(!X||q!==e||!e.isConnected)return;let n=Fe(e,t);$e(e),He(),u.onComment(e,n)},()=>{D.textContent="Comment unavailable · try again"}))});let Ue=()=>xe(!1);for(let e of[T,R,j])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Ue,!0);document.addEventListener("pointermove",function(e){if(!X)return;if(e.composedPath().includes(u.host))return Y=null,void Pe();let t=a(u.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);Y=t&&!u.host.contains(t)?t:null,Pe(!q)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!X||0!==e.button||e.composedPath().includes(u.host))return;let t=a(u.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!t||u.host.contains(t)||Z?.element&&(t===Z.element||Z.element.contains(t))||(Z?.element&&Be(),e.preventDefault(),e.stopImmediatePropagation(),Se(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!X||e.composedPath().includes(u.host)||(e.preventDefault(),e.stopImmediatePropagation(),q&&ze(q),2===e.detail&&q?.contains(e.target)&&!j.disabled&&!Z?.element&&j.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(Z?.handleKey(e))return void j.focus({preventScroll:!0});let t=e.key.toLowerCase(),n=e.composedPath()[0],i=n instanceof HTMLElement&&(n.isContentEditable||n.matches("input,textarea,select"));if(!i||"Escape"!==e.key||!n.closest("[data-field-property]")){if(X&&q&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!i&&("arrowup"===t||"arrowdown"===t)){let n=("arrowup"===t?q.parentElement:[...q.children].find(e=>s(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(s(n)&&n!==document.body&&n!==document.documentElement&&!u.host.contains(n)&&(e.preventDefault(),e.stopImmediatePropagation(),Se(n),ze(n)))}if(X&&!O.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!i)return e.preventDefault(),e.stopImmediatePropagation(),void xe("b"===t?!ve:"arrowleft"===t);if(X&&!Z?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(u.host)){let t=document.activeElement;if(s(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Se(t),void ze(t)}e.composedPath().includes(u.host)&&Ke(e)}},{capture:!0,signal:re.signal}),window.addEventListener("keydown",Ke,{signal:re.signal}),window.addEventListener("scroll",Te,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Te,{passive:!0,signal:re.signal});let Ve=new MutationObserver(()=>{X&&q&&!q.isConnected&&Le(),Y&&!Y.isConnected&&(Y=null,Pe())});Ve.observe(document.body,{childList:!0,subtree:!0});let Xe=le().then(e=>{re.signal.aborted||($=e.selectionViews({exitKey:u.exitKey,review(){let e=[...G.keys()].reverse().find(e=>e.isConnected&&G.get(e)===N()&&Ce(e));e&&Se(e)},reset:je,proposals:()=>[...G.keys()].filter(Ce).map(t=>Fe(t,e.designProposal)),message:e=>{D.textContent=e}}),h.textContent+=$.styles,H.innerHTML=$.icons.undo,B.innerHTML=$.icons.reset,b.insertBefore($.hint,U),U.append($.pending),X?Ee():ke())},()=>{D.textContent="Selection tools unavailable · try again"});return{setActive:Ie,select:Se,clearSelection:Le,setReturnAction(e){_=e,w.hidden=!e,e&&(w.setAttribute("aria-label",e.label),w.title=e.label)},mountPanel(e){b.parentElement!==e&&(b.parentElement?.removeAttribute("data-design-empty"),e.append(b),ke())},get active(){return X},ready:Promise.all([f,Xe]),destroy(){Z?.finish(!0),Ie(!1),je(),clearTimeout(W),clearTimeout(fe),clearTimeout(ee),Me?.disconnect(),Ve.disconnect(),re.abort(),cancelAnimationFrame(J),b.remove(),v.remove(),x.remove(),h.remove()}}}export{u as createDesignMode};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as s}from"./chunk-
|
|
1
|
+
import{b as o,c as s}from"./chunk-VF4VW5JQ.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,b as t,c as n,d as a,f as r}from"./chunk-
|
|
1
|
+
import{a as e,b as t,c as n,d as a,f as r}from"./chunk-ZJWJEB5S.js";import{e as i}from"./chunk-5BPQP3VG.js";import"./chunk-RPY7OOOR.js";function o(e,t,a){a?n(a,e):e.firstChild instanceof Text&&!e.childElementCount&&(e.firstChild.data=t)}function l(e){let t=r(),n=null,a=!1;function i(a=!1){let r=n;r&&(n=null,r.finish(a),t.resume(r.element),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let o=e.selected();if(n&&n.element===o)return void i();if(!o||!e.active()||a||n)return;let l=c(o);if(l)e.status.textContent=l;else{a=!0,t.pause(o),e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await f(o,{accent:getComputedStyle(e.button).getPropertyValue("--accent").trim()||"#bda6ef",loadReactBridge:async()=>await import("./react-props-panel-ME6XCEVP.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(o),e.status.textContent="Text preview · resets on exit")}});a?e.active()&&e.selected()===o?(n=a,r&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let i=document.getSelection();i?.removeAllRanges(),i?.addRange(r)}(o,r.clientX,r.clientY),e.status.textContent=o.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):a.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{a=!1,n||t.resume(o),e.onChange()}}},finish:i,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return i("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function s(e){let t=l(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function c(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(([t])=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function d(e){return!c(e)}function u(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function p(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function f(n,r){if(!d(n))return null;let l=null,s=null;if(n.dataset.komoTextProp&&(l=await r.loadReactBridge(),s=l.beginReactTextEdit(n),!s))return null;let c=s?.before??(n.textContent??"").slice(0,500),f=!s&&n.childElementCount>0,m=s?void 0:t(n),g=m?.map(([e,t])=>[e,t]),h=()=>{for(let e of g??[])e[1]=e[0].data},x=g?a(n,g):()=>{},b=["outline","outline-offset","box-shadow","white-space"].map(e=>i(n,e)),C=n.getAttribute("role"),v=n.getAttribute("aria-label"),y=n.getAttribute("aria-multiline"),E=n.getAttribute("spellcheck"),T=new AbortController,R=!1;let A=-1,w=new MutationObserver(()=>{A>=0&&p(n,A)}),P=()=>{h(),!f&&((n.textContent??"").length>500&&o(n,(n.textContent??"").slice(0,500)),s&&l&&(A=u(n),l.previewReactTextEdit(n,s.propName,n.textContent??"")||o(n,c)))},k=(t,a)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!n.contains(r)||r.parentElement?.closest(e))return;let i=t.endOffset-t.startOffset,o=a.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(n.textContent??"").length+i));r.replaceData(t.startOffset,i,o),h();let l=document.createRange();l.setStart(r,t.startOffset+o.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};n.addEventListener("beforeinput",e=>{if(A=-1,s||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&k(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:T.signal}),n.addEventListener("input",P,{signal:T.signal}),s&&w.observe(n,{childList:!0,characterData:!0,subtree:!0}),n.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",a=document.getSelection();f?a?.rangeCount&&k(a.getRangeAt(0),t):(function(e,t){let n=u(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));o(e,a.slice(0,n)+r+a.slice(n)),p(e,n+r.length)}(n,t.replace(/[\r\n]+/g," ").slice(0,500)),P())},{signal:T.signal}),n.addEventListener("drop",e=>e.preventDefault(),{signal:T.signal}),n.setAttribute("contenteditable","true"),n.setAttribute("role","textbox"),n.setAttribute("aria-label","Inline text preview"),n.setAttribute("aria-multiline","false"),n.dataset.komoInlineEditing="true",n.spellcheck=!1,n.style.setProperty("outline",`2px solid ${r.accent??"#bda6ef"}`,"important"),n.style.setProperty("outline-offset","2px","important"),n.style.setProperty("box-shadow","none","important"),n.style.setProperty("white-space","pre-wrap","important"),n.focus({preventScroll:!0});let S=document.getSelection(),D=document.createRange(),O=t(n).reverse().find(([t])=>!t.parentElement?.closest(e))?.[0];return O?D.setStart(O,O.length):D.selectNodeContents(n),D.collapse(!0),S?.removeAllRanges(),S?.addRange(D),{element:n,finish(e=!1){if(R)return;R=!0,T.abort(),w.disconnect(),x();for(let e of b.reverse())e.restore();let t=(n.textContent??"").slice(0,500);(function(){n.removeAttribute("contenteditable"),n.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",C],["aria-label",v],["aria-multiline",y],["spellcheck",E]])null===t?n.removeAttribute(e):n.setAttribute(e,t)})(),e?(s&&l&&l.cancelReactTextEdit(n,s.propName,c),o(n,c,m)):s&&l&&l.finishReactTextEdit(n,s.propName,c,t),r.onFinish({element:n,before:c,after:t,nodes:m,...s?{reactProp:s.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{s as bindInlineTextTools,d as canEditText,l as createInlineTextTools,r as createTextPreviewHistory,f as startInlineTextEditor,c as textEditBlocker};
|