@hazem3500/komo 0.9.29 → 0.9.30
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/adapters/react-fiber.js +1 -1
- package/dist/adapters/react-preview.js +1 -1
- package/dist/chunk-UZLXJJJW.js +1 -0
- package/dist/design-mode.js +1 -1
- package/dist/{inline-text-editor-OMRCO3H3.js → inline-text-editor-HKKHLSNR.js} +1 -1
- package/dist/node.mjs +1 -1
- package/dist/{react-props-panel-Y7F2P3AG.js → react-props-panel-PD6ENV6Q.js} +1 -1
- package/dist/react.js +1 -1
- package/dist/server.js +1 -1
- package/package.json +1 -1
- package/server/setup-client.txt +1 -1
- package/dist/chunk-HTMUFH7I.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=new Set([0,1,11,15]),t=/pass(word|wd)?|secret|token|auth|api[-_]?key|credential|cookie|session|private/i,n=/^[a-z_$][\w$]?$/i,r=e=>/^(key|ref|children|dangerouslySetInnerHTML|suppressHydrationWarning)$|^on[A-Z]|^_|^\$\$/.test(e),l=e=>/^(className|id|role|tabIndex|asChild)$|^(data-|aria-)/.test(e)&&"aria-label"!==e,a=new WeakMap,i=e=>{try{return e()}catch{return}},o=(e,t)=>{let n=String(e).replace(/\s+/g," ");return n.length>t?`${n.slice(0,t)}…`:n},d=e=>!!e&&"object"==typeof e;function s(e){for(let t of Object.keys(e))if(t.startsWith("__reactFiber$")){let n=e[t];if(d(n))return n}let t=i(()=>globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__);for(let n of t?.renderers?.values?.()??[]){let t=i(()=>n.findFiberByHostInstance?.(e));if(d(t))return t}return null}function u(e){let t=[];for(let n=e;n&&t.length<5e3;n=n.return)t.push(n);let n=t[t.length-1],r=3===n?.tag&&d(n.stateNode)?n.stateNode
|
|
1
|
+
var e=new Set([0,1,11,15]),t=/pass(word|wd)?|secret|token|auth|api[-_]?key|credential|cookie|session|private/i,n=/^[a-z_$][\w$]?$/i,r=e=>/^(key|ref|children|dangerouslySetInnerHTML|suppressHydrationWarning)$|^on[A-Z]|^_|^\$\$/.test(e),l=e=>/^(className|id|role|tabIndex|asChild)$|^(data-|aria-)/.test(e)&&"aria-label"!==e,a=new WeakMap,i=e=>{try{return e()}catch{return}},o=(e,t)=>{let n=String(e).replace(/\s+/g," ");return n.length>t?`${n.slice(0,t)}…`:n},d=e=>!!e&&"object"==typeof e;function s(e){for(let t of Object.keys(e))if(t.startsWith("__reactFiber$")){let n=e[t];if(d(n))return n}let t=i(()=>globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__);for(let n of t?.renderers?.values?.()??[]){let t=i(()=>n.findFiberByHostInstance?.(e));if(d(t))return t}return null}function u(e){let t=[];for(let n=e;n&&t.length<5e3;n=n.return)t.push(n);let n=t[t.length-1],r=3===n?.tag&&d(n.stateNode)?n.stateNode:void 0,l=r?.current;if(!d(l))return null;let a=l;for(let e=t.length-2;e>=0;e--){let n=a.child;for(;n&&n!==t[e]&&n!==t[e].alternate;)n=n.sibling;if(!n)return null;a=n}return{fiber:a,root:r}}function c(e,t=0){if("function"==typeof e){let t=e,n="string"==typeof t.displayName&&t.displayName?t.displayName:t.name;return"string"==typeof n&&n?n:void 0}if(e&&"object"==typeof e&&t<3){let n=e;return"string"==typeof n.displayName&&n.displayName?n.displayName:c(n.render??n.type,t+1)}}function p(e){let t=e.child;for(let e=0;t&&e<2e3;e++){if(5===t.tag)return t.stateNode instanceof Element?t.stateNode:null;t=t.child??t.sibling}return null}var f=/jsx[-_](dev[-_])?runtime|react-stack|react[-_.]development|node_modules[\\/](\.[\w-]+[\\/])*(react|react-dom|scheduler)[@\\/]/,m=/(?:\(|@|\bat\s+|^\s*)((?:[a-z][a-z0-9+.-]*:\/\/|\/|[a-z]:\\)[^()]*?):(\d+):(\d+)\)?\s*$/i;function g(e,t,n,r){let l=(e=>e.replace(/^[a-z][a-z0-9+.-]*:\/\/[^/]*/i,"").replace(/[?#].*$/,"").replace(/^\/@fs/,"").replace(/%20/g," "))(e);if(!l||!t)return;let a=i(()=>r?r(l,t,n):`${l}:${t}`);return"string"==typeof a&&a?o(a,160):void 0}function b(e,t){let n=e._debugSource;if(d(n)&&"string"==typeof n.fileName)return g(n.fileName,Number(n.lineNumber)||0,Number(n.columnNumber)||0,t);let r=i(()=>e._debugStack?.stack);return"string"==typeof r?function(e,t){let n=0;for(let r of e.split("\n").slice(0,40)){let e=f.test(r)?null:m.exec(r.trim());if(!e||++n>8)continue;let l=g(e[1],Number(e[2]),Number(e[3]),t);if(l&&!f.test(l))return l}}(r,t):void 0}function y(e,t){let n=document.createElement("label");n.className="design-field design-react-field";let r=document.createElement("span");r.textContent=e,r.title=e;let l=document.createElement("input");return l.value=t,l.title=t,l.readOnly=!0,l.setAttribute("aria-label",`${e} (discovered, read-only)`),n.append(r,l),n}function h(f={}){let m=Math.max(8,f.maxString??80),g=new WeakMap,h=Math.max(1,f.maxProps??24),v=e=>t.test(e)||!!i(()=>f.redact?.(e));function N(t){let g=function(e){let t=e;for(let e=0;t&&e<2e3;e++){if(1===t.nodeType){let e=s(t);if(e)return e}t=t.parentNode??t.host??null}return null}(t);if(!g)return null;let y=g;for(let t=0;y&&t<5e3&&(void 0===y.tag||!e.has(y.tag));t++)y=y.return;if(!y||!e.has(y.tag))return null;y=u(y)?.fiber??y;let N=c(y.type);if(!N||n.test(N)||f.include&&!f.include(N))return null;let _=d(y.memoizedProps)?y.memoizedProps:{},$=i(()=>Object.keys(_))??[],O=[],E={},k=[],x=0;for(let e of $){let t=Object.getOwnPropertyDescriptor(_,e);if(!t||!("value"in t))continue;let n=t.value;if(v(e)||r(e))continue;if(null===n){l(e)||(E[e]=null);continue}if(void 0===n||!("string"==typeof n||"boolean"==typeof n||"number"==typeof n&&Number.isFinite(n)))continue;if((l(e)?k:O).length>=h){x++;continue}let a="string"==typeof n?JSON.stringify(o(n,m)):String(n);l(e)?k.push([e,a]):(O.push([e,a]),E[e]=n)}let w=b(y,f.resolveSource),S={name:o(N,80),props:E,element:p(y)??t,...w?{source:w}:{}};return a.set(S,{props:O,advanced:k,hidden:x,location:w,fiber:y}),S}return{identify(e){try{let t=i(()=>f.adapter?.identify(e));return t?.name?t:N(e)}catch{return null}},editor(e){let t=a.get(e);if(!t)return i(()=>f.adapter?.editor?.(e))??null;if(!f.edit||1===t.fiber.tag)return null;let n=g.get(e.element);if(n&&(n.fiber===t.fiber||n.fiber.alternate===t.fiber)&&!1!==n.editor.available?.())return n.editor;let l=(i(()=>f.schema?.(e))??Object.entries(e.props??{}).filter(([,e])=>null!==e).map(([e,t])=>({name:e,kind:typeof t,required:!0,typeLabel:typeof t}))).filter(e=>!v(e.name)&&!r(e.name)&&"unsupported"!==e.kind),o=()=>i(()=>{if(!e.element.isConnected)return null;let n=u(t.fiber);return n&&p(n.fiber)===e.element?{...n,props:n.fiber.memoizedProps??{}}:null})??null,d=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__,s=i(()=>d?.[Symbol.for("inline-feedback.react-preview")]?.editor({schema:l,current:o}));return s&&g.set(e.element,{fiber:t.fiber,editor:s}),s??null},panel(e){let t=a.get(e);if(!t)return i(()=>f.adapter?.panel?.(e))??null;let n=document.createElement("details");n.className="design-group design-react-group design-react-discovered",n.open=!0;let r=document.createElement("summary");r.textContent="Discovered props";let l=document.createElement("small");if(l.className="design-react-source",l.textContent=`${e.name} · read-only${t.location?` · rendered at ${t.location}`:""}`,l.title=f.edit?"Runtime editing needs the React preview bridge loaded before a supported development renderer, or a component editor adapter.":"Enable a component editor adapter or React runtime previews to edit these props.",n.append(r,l),!t.props.length){let e=document.createElement("small");e.className="design-react-source",e.textContent="No props.",n.append(e)}for(let[e,r]of t.props)n.append(y(e,r));if(t.advanced.length){let e=document.createElement("details");e.className="design-react-advanced";let r=document.createElement("summary");r.textContent="Advanced attributes",e.append(r);for(let[n,r]of t.advanced)e.append(y(n,r));n.append(e)}if(t.hidden){let e=document.createElement("small");e.className="design-react-source",e.textContent=`+${t.hidden} more props not shown`,n.append(e)}return n}}}export{h as discoverReactComponents};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=e=>Object.defineProperties({},Object.fromEntries(Object.entries(Object.getOwnPropertyDescriptors(e)).map(([e,r])=>[e,{...r,configurable:!0,..."value"in r?{writable:!0}:{}}]))),r=Symbol.for("inline-feedback.react-preview");function t(){try{return function(){if(typeof window>"u")return!1;let t=globalThis,o=t.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(o?.[r])return!0;if(!o){let e=new Map,r=new Map;o={supportsFiber:!0,renderers:e,inject(r){let t=e.size+1;return e.set(t,r),t},getFiberRoots(e){let t=r.get(e);return t||r.set(e,t=new Set),t}};try{t.__REACT_DEVTOOLS_GLOBAL_HOOK__=o}catch{return!1}}if(!o.supportsFiber||!o.renderers)return!1;let i=new Set,n=new Set,l=new WeakMap;for(let[e,r]of o.renderers)for(let t of o.getFiberRoots?.(e)??[])l.set(t,r);let s=o.onCommitFiberRoot,a=!1,
|
|
1
|
+
var e=e=>Object.defineProperties({},Object.fromEntries(Object.entries(Object.getOwnPropertyDescriptors(e)).map(([e,r])=>[e,{...r,configurable:!0,..."value"in r?{writable:!0}:{}}]))),r=Symbol.for("inline-feedback.react-preview");function t(){try{return function(){if(typeof window>"u")return!1;let t=globalThis,o=t.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(o?.[r])return!0;if(!o){let e=new Map,r=new Map;o={supportsFiber:!0,renderers:e,inject(r){let t=e.size+1;return e.set(t,r),t},getFiberRoots(e){let t=r.get(e);return t||r.set(e,t=new Set),t}};try{t.__REACT_DEVTOOLS_GLOBAL_HOOK__=o}catch{return!1}}if(!o.supportsFiber||!o.renderers)return!1;let i=new Set,n=new Set,l=new WeakMap;for(let[e,r]of o.renderers)for(let t of o.getFiberRoots?.(e)??[])l.set(t,r);let s=o.onCommitFiberRoot,a=!1,c=function(e,r,...t){try{s?.call(this,e,r,...t)}finally{let t=o.renderers.get(e);t&&l.set(r,t),n.add(r),i.size&&!a?(a=!0,queueMicrotask(()=>{a=!1;let e=[...n];n.clear();for(let r of e)for(let e of[...i])e(r)})):i.size||n.clear()}};try{o.onCommitFiberRoot=c}catch{return!1}if(o.onCommitFiberRoot!==c)return!1;let f={editor(r){let t=r.current(),o=t&&l.get(t.root);if(!o?.overrideProps||1!==o.bundleType||"react-dom"!==o.rendererPackageName||!/^(18|19)\./.test(o.version??""))return null;let n,s=new Map,a=new Set,c=()=>r.current(),f=r=>{let t=c();if(!t)return i.delete(f),s.clear(),void(n=void 0);if(t.root===r){if(n=void 0,s.size){let r=e(t.props),i=!1;for(let[e,t]of s)Object.is(r[e],t.value)||(r[e]=t.value,i=!0);if(i)return void o.overrideProps(t.fiber,[],r)}for(let e of a)e();!s.size&&!a.size&&i.delete(f)}};return{schema:r.schema,available:()=>!!c(),release(e){for(let r of e)s.delete(r)},subscribe:e=>(a.add(e),i.add(f),()=>{a.delete(e),!a.size&&!s.size&&!n&&i.delete(f)}),read(){let e={},t=n??c()?.props??{};for(let o of r.schema)e[o.name]=Object.getOwnPropertyDescriptor(t,o.name)?.value;return e},apply(t){let l=c();if(!l)throw new Error("This component instance is no longer available.");let a=n??l.props,u=e(l.props);for(let e of r.schema){let r=e.name,o=t[r],i=s.get(r);!i&&!Object.is(a[r],o)&&(i={before:a[r],present:Object.hasOwn(a,r),value:o},s.set(r,i)),i&&(i.value=o,u[r]=o,Object.is(o,i.before)&&(i.present||delete u[r],s.delete(r)))}n=u,i.add(f),o.overrideProps(l.fiber,[],u)}}}};try{o[r]=f}catch{return o.onCommitFiberRoot=s,!1}return!0}()}catch{return!1}}t();export{t as installReactPreview,r as reactPreviewKey};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as e}from"./chunk-RPY7OOOR.js";var t=new WeakMap,r=new WeakMap,n=new WeakMap;function o(e,t){let r=n.get(e.element);if(r?.editor===t)return r.component;let o={id:e.name,name:e.name,source:e.source??"",line:0,props:t.schema},i={definition:o,preview:"adapter",releaseProps:e=>t.release?.(e),subscribe:t.subscribe?.bind(t),get props(){return l(o,t.read())},onChange:e=>t.apply(e),setProps(e){if(!1===t.available?.())throw new Error("This component instance is no longer available.");let r=l(o,e);if(Object.keys(r).length!==Object.keys(e).length||o.props.some(e=>"unsupported"!==e.kind&&e.required&&!(e.name in r)))throw new Error("Component props no longer match the editor schema.");t.apply(r)}};return n.set(e.element,{editor:t,component:i}),i}function i(e,t){return void 0===t?!e.required:!(!function(e){return void 0===e||"string"==typeof e||"number"==typeof e&&Number.isFinite(e)||"boolean"==typeof e}(t)||"unsupported"===e.kind)&&("string"===e.kind?"string"==typeof t&&t.length<=500:"number"===e.kind?"number"==typeof t&&Number.isFinite(t):"boolean"===e.kind?"boolean"==typeof t:"enum"===e.kind&&(e.values??[]).includes(t))}function l(e,t){let r={};for(let n of e.props){if("unsupported"===n.kind)continue;let e=t[n.name];i(n,e)&&(r[n.name]=e)}return r}function s(e,n,o,i){let s=n.textProp&&n.props.some(e=>e.name===n.textProp&&"string"===e.kind)?n.textProp:void 0,a=l(n,o),p=new Set,u={definition:n,props:a,onChange:i,subscribe:e=>(p.add(e),()=>{p.delete(e)}),setProps(e){let t=l(n,e);if(Object.keys(t).length===Object.keys(e).length){for(let e of n.props)if("unsupported"!==e.kind&&e.required&&!(e.name in t))return;u.props=t,u.onChange(t)}}};return t.set(e,u),e.dataset.komoInspectable=n.id,s?e.dataset.komoTextProp=s:delete e.dataset.komoTextProp,r.set(u,p),()=>{t.get(e)===u&&(t.delete(e),p.clear(),e.dataset.komoInspectable===n.id&&delete e.dataset.komoInspectable,e.dataset.komoTextProp===s&&delete e.dataset.komoTextProp)}}function a(e,n,o,i){if(!e)return;let s=t.get(e);if(!s||s.definition.id!==n.id)return;s.definition=n,s.props=l(n,o),s.onChange=i;let a=n.textProp&&n.props.some(e=>e.name===n.textProp&&"string"===e.kind)?n.textProp:void 0;a?e.dataset.komoTextProp=a:delete e.dataset.komoTextProp,r.get(s)?.forEach(e=>e())}function p(e){let r=e&&t.get(e);if(r&&e.getAttribute("data-komo-inspectable")===r.definition.id)return r;let o=e&&n.get(e);return o&&!1!==o.editor.available?.()?o.component:null}function u(e){for(let t=e?.parentElement;t;t=t.parentElement){let e=p(t);if(e)return{root:t,component:e}}return null}var f=new Set,d=new WeakMap,m=new WeakMap,c=new WeakMap,h={color:new Set(["color","background-color","border-color"]),dimension:new Set(["gap","padding","margin","border-radius","font-size","width","height"]),fontFamily:new Set(["font-family"]),fontWeight:new Set(["font-weight"]),lineHeight:new Set(["line-height"])};function g(e,t){if(t.length>100||t.some(e=>!function(e){return!!e&&"string"==typeof e.path&&e.path.length<=160&&/^--[a-zA-Z0-9_-]+$/.test(e.cssVariable)&&!!h[e.type]&&Array.isArray(e.properties)&&e.properties.length>0&&e.properties.every(t=>h[e.type].has(t))&&"string"==typeof e.impactSelector&&e.impactSelector.length<=200}(e)))throw new Error("Komo design tokens must use supported, explicit CSS-variable metadata");let r=new Set(t.map(e=>e.path)),n=new Set(t.map(e=>e.cssVariable));if(r.size!==t.length||n.size!==t.length)throw new Error("Komo design token paths and CSS variables must be unique");for(let r of t)e.querySelectorAll(r.impactSelector);let o={root:e,tokens:t.map(e=>({...e,properties:[...e.properties]})),themeEdits:new Map,elementOriginals:new Map,elementBindings:new Map,previousMarker:e.getAttribute("data-komo-design-tokens")};return d.set(e,o),f.add(o),c.set(o,[]),e.setAttribute("data-komo-design-tokens",String(t.length)),()=>{if(d.get(e)===o){for(let[t,r]of o.themeEdits){let n=o.tokens.find(e=>e.path===t);n&&(r.inlineBefore?e.style.setProperty(n.cssVariable,r.inlineBefore):e.style.removeProperty(n.cssVariable))}for(let[e,t]of o.elementOriginals)for(let[r,n]of t)n.value?e.style.setProperty(r,n.value,n.priority):e.style.removeProperty(r);o.elementBindings.clear(),f.delete(o),d.delete(e),null===o.previousMarker?e.removeAttribute("data-komo-design-tokens"):e.setAttribute("data-komo-design-tokens",o.previousMarker)}}}function y(e){if(!e)return null;let t=null;for(let r of f)(r.root===e||r.root.contains(e))&&(!t||t.root.contains(r.root))&&(t=r);return t}function k(e,t){return e.root.ownerDocument.defaultView?.getComputedStyle(e.root).getPropertyValue(t.cssVariable).trim()??""}function b(e,t){try{return e.root.querySelectorAll(t.impactSelector).length}catch{return 0}}function P(e,t,r,n=!1){if(!e.tokens.some(e=>e===t||e.path===t.path)||!function(e,t,r){if(!r||r.length>160||/[{};]/.test(r)||/(?:url|expression)\s*\(/i.test(r))return!1;let n=e.root.ownerDocument.defaultView?.CSS;return!n?.supports||t.properties.some(e=>n.supports(e,r))}(e,t,r))return!1;let o=k(e,t),i=e.themeEdits.get(t.path),l=e.root.style.getPropertyValue(t.cssVariable),s=i?.inlineBefore??l,a=c.get(e)??[];if(o===r)return!0;e.root.style.setProperty(t.cssVariable,r),r===(i?.before??o)?e.themeEdits.delete(t.path):e.themeEdits.set(t.path,{before:i?.before??o,after:r,inlineBefore:s});let p=a.at(-1);return n&&"theme"===p?.kind&&p.token.path===t.path?r===p.before?a.pop():p.after=r:a.push({kind:"theme",source:e,token:t,before:o,after:r,inlineBefore:l}),c.set(e,a),!0}function v(e){for(let t of f)for(let[r,n]of t.themeEdits){let o=t.tokens.find(e=>e.path===r)?.cssVariable;if(!o)continue;let i=e?n.inlineBefore:n.after;i?t.root.style.setProperty(o,i):t.root.style.removeProperty(o)}}function w(e,t){let r=e.themeEdits.get(t.path),n=c.get(e)??[],o=n.find(e=>"theme"===e.kind&&e.token.path===t.path),i=r?.inlineBefore??("theme"===o?.kind?o.inlineBefore:void 0);void 0!==i&&(i?e.root.style.setProperty(t.cssVariable,i):e.root.style.removeProperty(t.cssVariable),e.themeEdits.delete(t.path),c.set(e,n.filter(e=>"theme"!==e.kind||e.token.path!==t.path)))}function V(e,t,r,n,o={}){if(!e.tokens.some(e=>e.path===r.path)||!r.properties.includes(n))return!1;let i=e.elementOriginals.get(t);i||e.elementOriginals.set(t,i=new Map),i.has(n)||i.set(n,{value:t.style.getPropertyValue(n),priority:t.style.getPropertyPriority(n)});let l=t.style.getPropertyValue(n),s=t.style.getPropertyPriority(n),a=`var(${r.cssVariable})`,p=e.elementBindings.get(t);p||e.elementBindings.set(t,p=new Map);let u=p.get(n);if(p.set(n,{tokenPath:r.path,initialValue:u?.initialValue??l,initialPriority:u?.initialPriority??s,mode:"token",declaredPath:u?u.declaredPath:A(e,t,n)?.token.path}),t.style.setProperty(n,a,s),!1===o.recordHistory)return!0;let f={kind:"element",element:t,property:n,before:l,priority:s,after:a},d=c.get(e)??[];d.push(f),c.set(e,d);let h=m.get(t)??[];return h.push(f),m.set(t,h),!0}function B(e,t,r,n){let o=e.elementBindings.get(t),i=o?.get(r);if(!i){let n=A(e,t,r);if(!n)return;o||e.elementBindings.set(t,o=new Map),i={tokenPath:n.token.path,initialValue:t.style.getPropertyValue(r),initialPriority:t.style.getPropertyPriority(r),mode:"custom",declaredPath:n.token.path},o.set(r,i)}i.mode="custom",i.customValue=n}function S(e,t,r){let n=e.elementBindings.get(t)?.get(r);if(!n)return;let o=t.style.getPropertyValue(r);o!==n.initialValue||t.style.getPropertyPriority(r)!==n.initialPriority?e.tokens.find(e=>e.path===n.tokenPath&&e.properties.includes(r)&&o===`var(${e.cssVariable})`)?(n.mode="token",delete n.customValue):(n.mode="custom",n.customValue=o):e.elementBindings.get(t)?.delete(r)}function $(e,t,r){let n=e.elementBindings.get(t)?.get(r);return n?{...n}:null}var E={"background-color":["background"],"border-color":["border"],"font-family":["font"],"font-size":["font"],"font-weight":["font"],"line-height":["font"]};function x(e,t,r,n){let o=[...r.matchAll(/var\(\s*(--[\w-]+)/g)].map(e=>e[1]);if(!o.length||n&&!/^var\(\s*--[\w-]+\s*(?:,[^;{}]*)?\)$/.test(r.trim()))return;let i=e.tokens.filter(e=>e.properties.includes(t)&&o.includes(e.cssVariable));return 1===i.length?i[0]:void 0}function M(e){let t=e.replace(/:(?:where)\([^)]*\)/g,"").replace(/"[^"]*"|'[^']*'/g,"");return 1e4*(t.match(/#[\w-]+/g)?.length??0)+100*(t.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g)?.length??0)+(t.match(/(?:^|[\s>+~(])[a-z][\w-]*/gi)?.length??0)}function O(e){let t=[],r=0,n=0;for(let o=0;o<e.length;o++){let i=e[o];"("===i||"["===i?r++:")"===i||"]"===i?r--:","===i&&0===r&&(t.push(e.slice(n,o)),n=o+1)}return t.push(e.slice(n)),t.map(e=>e.trim()).filter(Boolean)}function A(e,t,r,n=t.style.getPropertyValue(r),o=t.style.getPropertyPriority(r)){let i=t.ownerDocument.defaultView,l=null,s=0,a=e=>{for(let n of e){s++;let e=n.media;if(e&&i?.matchMedia&&e.mediaText&&!i.matchMedia(e.mediaText).matches)continue;let o=n.style,p=n.selectorText;if(o&&p)for(let e of[r,...E[r]??[]]){let r=o.getPropertyValue(e).trim();if(!r)continue;let n=-1;for(let e of O(p))try{t.matches(e)&&(n=Math.max(n,M(e)))}catch{}if(!(n<0)){n+=o.getPropertyPriority(e)?1e9:0,(!l||n>l.rank||n===l.rank&&s>=l.order)&&(l={value:r,property:e,rank:n,order:s});break}}let u=n.cssRules;u&&!o&&a(u)}};for(let e of t.ownerDocument.styleSheets)try{e.disabled||a(e.cssRules)}catch{}let p=l;if(n&&(!(p&&p.rank>=1e9)||o)){let t=x(e,r,n,!0);return t?{token:t,origin:"inline"}:null}if(!p)return null;let u=x(e,r,p.value,p.property===r);return u?{token:u,origin:"stylesheet"}:null}function T(e,t,r){let n=e.elementBindings.get(t)?.get(r),o=e.elementOriginals.get(t)?.get(r),i=n?.initialValue??o?.value??"",l=n?.initialPriority??o?.priority??"";i?t.style.setProperty(r,i,l):t.style.removeProperty(r),e.elementBindings.get(t)?.delete(r)}function C(e,t){return e.tokens.filter(e=>e.properties.includes(t))}function z(e){let t=y(e);return!!t&&(t.themeEdits.size>0||!!m.get(e)?.length||!!t.elementBindings.get(e)?.size)}function j(e){let t=y(e);return!!t&&!!c.get(t)?.length}function q(e){let t=y(e),r=t&&c.get(t)?.pop();if(!t||!r)return;if("theme"===r.kind){r.inlineBefore?t.root.style.setProperty(r.token.cssVariable,r.inlineBefore):t.root.style.removeProperty(r.token.cssVariable);let e=t.themeEdits.get(r.token.path);if(e&&e.after===r.after)e.before===r.before?t.themeEdits.delete(r.token.path):t.themeEdits.set(r.token.path,{...e,after:r.before});else if(!e){let e=c.get(t).find(e=>"theme"===e.kind&&e.token.path===r.token.path);t.themeEdits.set(r.token.path,{before:r.after,after:r.before,inlineBefore:("theme"===e?.kind?e:r).inlineBefore})}return}r.before?r.element.style.setProperty(r.property,r.before,r.priority):r.element.style.removeProperty(r.property);let n=m.get(r.element)??[];n.pop(),n.length||m.delete(r.element)}function W(e){let t=y(e);if(!t)return;for(let[e,r]of t.themeEdits){let n=t.tokens.find(t=>t.path===e);n&&(r.inlineBefore?t.root.style.setProperty(n.cssVariable,r.inlineBefore):t.root.style.removeProperty(n.cssVariable))}t.themeEdits.clear();let r=t.elementOriginals.get(e);for(let[t,n]of r??[])n.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t);t.elementOriginals.delete(e),t.elementBindings.delete(e),m.delete(e),c.set(t,(c.get(t)??[]).filter(t=>"element"===t.kind&&t.element!==e))}function D(){for(let e of f){for(let t of[e.root,...e.elementOriginals.keys(),...e.elementBindings.keys()])W(t);c.set(e,[])}}function R(e){let t=y(e);if(!t)return;let r=[];for(let[n,o]of t.elementBindings.get(e)??[]){let e=t.tokens.find(e=>e.path===o.tokenPath&&e.properties.includes(n));if(!e)continue;let i=t.tokens.find(e=>e.path===o.declaredPath),l=i?`var(${i.cssVariable}) [${i.path}]`:o.initialValue||"(unset)";"token"===o.mode?i!==e&&r.push(`Element ${n}: ${l} → var(${e.cssVariable}) [${e.path}]${i?" [rebind]":""}`):r.push(`Element ${n}: ${l} → ${o.customValue||"(unset)"} [${i?"custom override":"custom value"}]`)}for(let n of m.get(e)??[]){if("element"!==n.kind||t.elementBindings.get(e)?.has(n.property))continue;let o=t.tokens.find(e=>n.after===`var(${e.cssVariable})`);o&&r.push(`Element ${n.property}: ${n.before||"(unset)"} → var(${o.cssVariable}) [${o.path}]`)}for(let[e,n]of t.themeEdits){let o=t.tokens.find(t=>t.path===e);o&&r.push(`Shared theme ${e} (${o.cssVariable}): ${n.before} → ${n.after}; preview scope ${o.impactSelector} (${b(t,o)} matching elements)`)}return r.length?["Proposed design-token changes (preview only)",...r,"Token references are preserved for element assignments; refresh resets previews."].join("\n"):void 0}function F(){return{id:"css-variables",list:()=>[...f].flatMap(e=>e.tokens.map(t=>function(e,t){return{path:t.path,type:t.type,value:k(e,t),properties:[...t.properties],group:t.path.split(".")[0],ref:t.cssVariable}}(e,t))),resolve(t){let r=y(t),n={};if(!r||!e(t))return n;let o=t.ownerDocument.defaultView?.getComputedStyle(t);for(let e of new Set(r.tokens.flatMap(e=>e.properties))){let i=A(r,t,e);n[e]=i?{path:i.token.path}:{offToken:o?.getPropertyValue(e).trim()??""}}return n},preview(t,r,n){let o=y(t),i=o?.tokens.find(e=>e.path===n.path);if(!o||!i||!e(t))return()=>{};let l=t.style.getPropertyValue(r),s=t.style.getPropertyPriority(r);return V(o,t,i,r,{recordHistory:!1}),()=>{l?t.style.setProperty(r,l,s):t.style.removeProperty(r),S(o,t,r)}},describe:(e,t,r,n)=>`Set ${t} to var(${n.ref})`}}export{o as a,i as b,s as c,a as d,p as e,u as f,g,y as h,k as i,b as j,P as k,v as l,w as m,V as n,B as o,S as p,$ as q,A as r,T as s,C as t,z as u,j as v,q as w,W as x,D as y,R as z,F as A};
|
package/dist/design-mode.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t}from"./chunk-HHG6KWKR.js";import{a as n,b as i}from"./chunk-RPY7OOOR.js";import{a as o}from"./chunk-53M6AOAX.js";import{j as s,k as a}from"./chunk-PLSWBSSX.js";var r=(e,t)=>Object.assign(s("button",e,t),{type:"button"}),d=e=>"function"==typeof matchMedia&&matchMedia(e).matches,l=()=>d("(prefers-reduced-motion: reduce)");function c(c){let p=s("style");p.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 g=null,u=import("./design-panel-KHZDEA36.js").then(e=>{p.textContent+=e.designPanelStyles,g=e},()=>{T.textContent="Design controls unavailable · try again"}),h=s("aside","design-inspector");h.setAttribute("role","dialog"),h.setAttribute("aria-label","Design mode inspector"),h.setAttribute("aria-hidden","true"),h.hidden=!0;let m=s("div","design-outline");m.setAttribute("aria-hidden","true");let f=s("div","design-outline design-outline--prospective");f.setAttribute("aria-hidden","true"),f.dataset.kind="hover",f.hidden=!0;let b=s("div","design-inspector__heading"),v=null,y=r("design-inspector__back");y.hidden=!0,y.append(a("chevron")),y.addEventListener("click",()=>v?.run());let x=r("design-inspector__parent");x.hidden=!0;let _=s("span","design-inspector__target"),w=s("small"),E=r("design-inspector__close");E.setAttribute("aria-label","Exit design mode"),E.append(a("close"));let k=r("design-inspector__fold");k.append(a("chevron"));let C=s("div","design-inspector__identity");C.append(x,_,w),b.append(y,C,k,E);let P=s("div","design-inspector__controls"),A=s("div","design-inspector__bar"),L=s("span","design-inspector__count");L.title="Runtime preview · Undo, Reset or reload to restore";let T=s("p","design-inspector__status");T.setAttribute("role","status");let M=s("div","design-inspector__actions"),S=e=>{let t=r("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},R=S("Undo"),D=S("Reset"),H=S("Copy CSS");H.append(a("copy"));let z=r("","Comment"),K=r("design-text-edit","Edit text");K.title="Edit text",K.setAttribute("aria-label","Edit selected text inline"),M.append(R,D,H,z);let B=s("div","design-inspector__compare");B.setAttribute("role","group"),B.setAttribute("aria-label","Compare with the page");let O=["Before","After"].map((e,t)=>{let n=r("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>be(!t)),B.append(n),n});A.append(L,B,T,M);let j,I=s("div");I.hidden=!0,h.append(b,I,P,A),c.root.append(p,m,f),(c.panelRoot??c.root).append(h);let F,$=!1,W=0,U=null,V=null,q=()=>c.page?.()??location.pathname,X=q(),Y=new Map,G=null,N=0,J=0,Q=null,Z="",ee=null,te=null,ne=new Map,ie=new WeakSet,oe=new Map,se=new WeakMap,ae=new WeakMap,re=new AbortController,de=()=>import("./design-export-JEWGQH3R.js"),le=e=>{F??=de().then(({footerTips:t})=>t(A,c.root,re.signal,e),()=>{F=void 0})};A.addEventListener("pointerover",le),A.addEventListener("focusin",le);let ce=new Set,pe=[];function ge(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ne.get(e);o||(ne.set(e,o=new Map),e.hasAttribute("style")||ie.add(e)),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ue(e,t){let n=oe.get(e);n||oe.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ne.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||oe.delete(e),Ce(U,"selected")}let he=0;new MutationObserver(()=>{let e=T.textContent??"";T.title=e,A.toggleAttribute("data-message",!!e),clearTimeout(he),e&&(he=window.setTimeout(function e(){G?.element?he=window.setTimeout(e,2600):T.textContent=""},2600))}).observe(T,{childList:!0,characterData:!0,subtree:!0});let me,fe=!1;function be(e,n=!0){if(e===fe)return;e&&G?.element&&He(),fe=e;let i=n&&!l();for(let[n,o]of oe)t(n,o.keys(),()=>{for(let[t,i]of o){let o=ne.get(n)?.get(t);e?ve(n,t,o):n.style.setProperty(t,i,o?.priority)}},i,ie.has(n));G?.showBefore(e),ee?.showDesignBefore(e),O.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),h.toggleAttribute("data-before",e),De()}function ve(t,n,i){i?.value?t.style.setProperty(n,i.value,i.priority):t.style.removeProperty(n),ie.has(t)&&e(t)}function ye(e,t,n){U&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ge(U,t),ee?.noteDesignTokenOverride(U,t,n),U.style.setProperty(t,n,ne.get(U)?.get(t)?.priority),ue(U,t),De()))}function xe(e,t,n=!0){if(!U)return;let i={value:U.style.getPropertyValue(t),priority:U.style.getPropertyPriority(t)},o=ae.get(e),s=o?.before??se.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&pe.splice(pe.indexOf(o),1),ae.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:U,property:t,before:s,after:i};pe.push(n),ae.set(e,n)}n&&(se.set(e,i),ae.delete(e)),De()}function _e(){if(Oe(),P.replaceChildren(),we(),!U)return j&&P.append(j.empty),_.textContent="Select an element",w.textContent="",void(x.hidden=!0);let e=`${U.tagName.toLowerCase()}${U.id?`#${U.id}`:""}`;_.textContent=e,w.textContent=U instanceof HTMLIFrameElement?"Frame only · contents are isolated":U.classList.length?`.${[...U.classList].slice(0,2).join(".")}`:"";let t=U.parentElement;x.hidden=!t||t===document.body||t===document.documentElement,x.textContent=t?.tagName.toLowerCase()??"",x.setAttribute("aria-label",`Select parent ${x.textContent}`);let n=U,i=g;i?(i.renderPanel(P,{element:n,changed:oe.get(n),collapsed:ce,editText:K,begin:(e,t)=>se.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:ye,commit:xe,rerender:_e}),(c.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(te??=import("./react-props-panel-Y7F2P3AG.js").then(e=>ee=e).catch(e=>{throw te=null,e}),te.then(e=>{if(!$||U!==n||P.querySelector(".design-react-group, .design-theme-group"))return;let t=c.root;e.attachThemeSwitcher(P,c.design,()=>Te(n),t);let o=e=>{e&&pe.push({element:n,undo:e}),De()},s=e.createReactPropsPanel(n,o,t,Te,c.design,_e);s&&P.prepend(s),e.attachStyleTokenControls(n,i.fields,P,(e,t,i)=>{ge(n,e.property,i),ue(n,e.property),se.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),xe(t,e.property)},t,i.valueFor,i.toHex,c.design,o);let a=e.createDesignThemePanel(n,i,De,t);a&&P.append(a)}).catch(()=>{}))):u.then(()=>{$&&U===n&&_e()})}function we(){h.toggleAttribute("data-empty",z.hidden=!U),j&&(j.hint.hidden=!U),h.parentElement?.toggleAttribute("data-design-empty",$&&!U);let e=[...Y.keys()].filter(Ee);I.hidden=!!U||!e.length,j&&(j.pending.hidden=I.hidden),j?.update(e.length,e.some(e=>e.isConnected&&Y.get(e)===q()))}function Ee(e){return!!(oe.get(e)?.size||e instanceof HTMLElement&&G?.hasChanges(e)||ee?.hasReactPropChanges(e)||ee?.hasDesignTokenEdit(e))}function ke(){He(),Le?.disconnect(),U=null,V=null,m.hidden=f.hidden=!0,_e(),De()}function Ce(e,t,n=!1,i=m){if(!$||!e?.isConnected)return void(i.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==Q||t!==Z)){Q=e,Z=t,clearTimeout(J);let n=h.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;c.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(J=window.setTimeout(c.flip,"hover"===t?350:0))}i.hidden=!o(i,s,e,c.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ce(U??V,U?"selected":"hover",e),Ce(U&&V!==U?V:null,"hover",!1,f)}function Ae(){N||(N=requestAnimationFrame(()=>{N=0,U&&(!U.isConnected||X!==q())&&ke(),Pe()}))}let Le="function"==typeof ResizeObserver?new ResizeObserver(Ae):null;function Te(e){!n(e)||!e.isConnected||c.host.contains(e)||(G?.element&&G.element!==e&&He(),Le?.disconnect(),Le?.observe(e),U=e,V=e,X=q(),Y.set(e,X),_e(),Ce(e,"selected",!0),f.hidden=!0,De())}let Me=()=>d("(max-width:520px)");function Se(e){h.toggleAttribute("data-folded",e&&Me()),k.setAttribute("aria-expanded",String(!h.hasAttribute("data-folded"))),k.setAttribute("aria-label",h.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Re(e){Se(!1),Me()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=h.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:l()?"auto":"smooth"})})}function De(){Ae(),R.disabled=!pe.length&&!ee?.canUndoReactProp(U)&&!ee?.canUndoDesignTokenEdit(U),D.disabled=!function(){let e=U,t=e?(oe.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!G?.hasChanges(e))+ +!!ee?.hasReactPropChanges(e)||+!!ee?.hasDesignTokenEdit(e):0;return L.textContent=t?`${t} change${t>1?"s":""}`:"",A.toggleAttribute("data-changes",t>0||!R.disabled),B.hidden=!t&&!fe,t}(),H.disabled=!U||!oe.get(U)?.size,z.disabled=!U,K.disabled=!(!G?.busy&&U?.isConnected&&U instanceof HTMLElement),K.textContent=G?.isEditing(U instanceof HTMLElement?U:null)?"Done editing":"Edit text",K.setAttribute("aria-label",G?.isEditing(U instanceof HTMLElement?U:null)?"Finish inline text editing":"Edit selected text inline"),we()}function He(e=!1){G?.finish(e),De()}function ze(e){!$||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),ke(),Ke(!1),c.onExit())}function Ke(e){if(e||(Oe(),G?.finish(),$&&(me=fe,be(!0,!1)),ee?.restoreThemes(h)),e&&!$&&void 0!==me){let e=me;me=void 0,be(e,!1)}e&&U&&(!U.isConnected||X!==q())&&ke(),clearTimeout(W),W=0,$=e,we(),e?(h.hidden=!1,h.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{$&&(h.dataset.state="active")}),m.hidden=!U,_e(),Se(!U),Ce(U,"selected"),E.focus({preventScroll:!0})):(V=null,m.hidden=f.hidden=!0,h.setAttribute("aria-hidden","true"),h.dataset.state="closing",l()?(h.hidden=!0,delete h.dataset.state):W=window.setTimeout(()=>{W=0,$||(h.hidden=!0,delete h.dataset.state)},250))}function Be(){Oe(),be(!1,!1);for(let[e,n]of ne)t(e,n.keys(),()=>{for(let[t,i]of n)ve(e,t,i)},!1,ie.has(e)),ie.delete(e);ne.clear(),oe.clear(),pe.length=0,G?.restoreAll(),ee?.resetPreviews(),Y.clear(),De()}function Oe(){c.root.dispatchEvent(new Event("komo-preview-cancel"))}function je(e,t){return t(e,oe.get(e),t=>ne.get(e)?.get(t)?.computed,ee?.tokenBoundProperties(e),[e instanceof HTMLElement?G?.proposal(e):void 0,ee?.proposedDesignChanges(e)],ee?.designContext(e,c.design))}function Ie(e){G?.isEditing(e instanceof HTMLElement?e:null)&&He(!0);let n=oe.get(e),i=(e instanceof HTMLElement&&G?.hasChanges(e))??!1,o=ee?.hasReactPropChanges(e)??!1,s=ee?.hasDesignTokenEdit(e)??!1;if(n?.size||i||o||s){i&&e instanceof HTMLElement&&G?.reset(e),t(e,n?.keys()??[],()=>{for(let t of n?.keys()??[])ve(e,t,ne.get(e)?.get(t))},!1,ie.has(e)),oe.delete(e),ne.delete(e),ie.delete(e),Y.delete(e),o&&ee?.resetReactProps(e),s&&ee?.resetDesignTokenEdits(e);for(let t=pe.length-1;t>=0;t--)pe[t].element===e&&pe.splice(t,1)}}K.addEventListener("click",e=>{G||U&&(T.textContent="Loading inline text editor…",import("./inline-text-editor-OMRCO3H3.js").then(t=>{G||!U||!$||(G=t.bindInlineTextTools({button:K,status:T,selected:()=>U instanceof HTMLElement?U:null,active:()=>$,onChange:De,onCommit(e){pe.push({kind:"text",element:e})}}),G.toggle(e))}).catch(()=>{T.textContent="Inline text editing is unavailable."}))}),k.addEventListener("click",()=>Se(!h.hasAttribute("data-folded"))),x.addEventListener("click",()=>Te(U?.parentElement??null)),E.addEventListener("click",()=>{G?.element&&He(),ke(),Ke(!1),c.onExit()}),R.addEventListener("click",()=>{let e=pe.pop();e?e.kind?"text"===e.kind?U===(G?.undo()??e.element)&&_e():(ve(e.element,e.property,e.before),ee?.syncDesignTokenBinding(e.element,e.property),ue(e.element,e.property),U===e.element&&_e(),Ce(U??V,U?"selected":"hover")):(e.undo(),_e()):(U&&(ee?.undoDesignTokenEdit(U),ee?.undoReactProp(U),_e()),T.textContent="Runtime preview · Undo, Reset or reload to restore"),De(),(R.disabled?E:R).focus({preventScroll:!0})}),D.addEventListener("click",()=>{U&&(Ie(U),_e(),Ce(U,"selected"),De(),E.focus({preventScroll:!0}))}),H.addEventListener("click",()=>{let e=U,t=e?oe.get(e):void 0;!e||!t?.size||de().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),T.textContent="CSS copied"}catch{T.textContent=i}})}),z.addEventListener("click",()=>{let e=U;e&&(G?.isEditing(e instanceof HTMLElement?e:null)&&He(),de().then(({designProposal:t})=>{if(!$||U!==e||!e.isConnected)return;let n=je(e,t);Ie(e),De(),c.onComment(e,n)},()=>{T.textContent="Comment unavailable · try again"}))});let Fe=()=>be(!1);for(let e of[P,M,K])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Fe,!0);document.addEventListener("pointermove",function(e){if(!$)return;if(e.composedPath().includes(c.host))return V=null,void Pe();let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);V=t&&!c.host.contains(t)?t:null,Pe(!U)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!$||0!==e.button||e.composedPath().includes(c.host))return;let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!t||c.host.contains(t)||G?.element&&(t===G.element||G.element.contains(t))||(G?.element&&He(),e.preventDefault(),e.stopImmediatePropagation(),Te(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!$||e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),U&&Re(U),2===e.detail&&U?.contains(e.target)&&!K.disabled&&!G?.element&&K.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(G?.handleKey(e))return void K.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if($&&U&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!o&&("arrowup"===t||"arrowdown"===t)){let i=("arrowup"===t?U.parentElement:[...U.children].find(e=>n(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(n(i)&&i!==document.body&&i!==document.documentElement&&!c.host.contains(i)&&(e.preventDefault(),e.stopImmediatePropagation(),Te(i),Re(i)))}if($&&!B.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!o)return e.preventDefault(),e.stopImmediatePropagation(),void be("b"===t?!fe:"arrowleft"===t);if($&&!G?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(c.host)){let t=document.activeElement;if(n(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Te(t),void Re(t)}e.composedPath().includes(c.host)&&ze(e)},{capture:!0,signal:re.signal}),window.addEventListener("keydown",ze,{signal:re.signal}),window.addEventListener("scroll",Ae,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Ae,{passive:!0,signal:re.signal});let $e=new MutationObserver(()=>{$&&U&&!U.isConnected&&ke(),V&&!V.isConnected&&(V=null,Pe())});$e.observe(document.body,{childList:!0,subtree:!0});let We=de().then(e=>{re.signal.aborted||(j=e.selectionViews({exitKey:c.exitKey,review(){let e=[...Y.keys()].reverse().find(e=>e.isConnected&&Y.get(e)===q()&&Ee(e));e&&Te(e)},reset:Be,proposals:()=>[...Y.keys()].filter(Ee).map(t=>je(t,e.designProposal)),message:e=>{T.textContent=e}}),p.textContent+=j.styles,R.innerHTML=j.icons.undo,D.innerHTML=j.icons.reset,h.insertBefore(j.hint,I),I.append(j.pending),$?_e():we())},()=>{T.textContent="Selection tools unavailable · try again"});return{setActive:Ke,select:Te,clearSelection:ke,setReturnAction(e){v=e,y.hidden=!e,e&&(y.setAttribute("aria-label",e.label),y.title=e.label)},mountPanel(e){h.parentElement!==e&&(h.parentElement?.removeAttribute("data-design-empty"),e.append(h),we())},get active(){return $},ready:Promise.all([u,We]),destroy(){G?.finish(!0),Ke(!1),Be(),clearTimeout(W),clearTimeout(he),clearTimeout(J),Le?.disconnect(),$e.disconnect(),re.abort(),cancelAnimationFrame(N),h.remove(),m.remove(),f.remove(),p.remove()}}}export{c as createDesignMode};
|
|
1
|
+
import{a as e,c as t}from"./chunk-HHG6KWKR.js";import{a as n,b as i}from"./chunk-RPY7OOOR.js";import{a as o}from"./chunk-53M6AOAX.js";import{j as s,k as a}from"./chunk-PLSWBSSX.js";var r=(e,t)=>Object.assign(s("button",e,t),{type:"button"}),d=e=>"function"==typeof matchMedia&&matchMedia(e).matches,l=()=>d("(prefers-reduced-motion: reduce)");function c(c){let p=s("style");p.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 g=null,u=import("./design-panel-KHZDEA36.js").then(e=>{p.textContent+=e.designPanelStyles,g=e},()=>{T.textContent="Design controls unavailable · try again"}),h=s("aside","design-inspector");h.setAttribute("role","dialog"),h.setAttribute("aria-label","Design mode inspector"),h.setAttribute("aria-hidden","true"),h.hidden=!0;let m=s("div","design-outline");m.setAttribute("aria-hidden","true");let f=s("div","design-outline design-outline--prospective");f.setAttribute("aria-hidden","true"),f.dataset.kind="hover",f.hidden=!0;let b=s("div","design-inspector__heading"),v=null,y=r("design-inspector__back");y.hidden=!0,y.append(a("chevron")),y.addEventListener("click",()=>v?.run());let x=r("design-inspector__parent");x.hidden=!0;let _=s("span","design-inspector__target"),w=s("small"),E=r("design-inspector__close");E.setAttribute("aria-label","Exit design mode"),E.append(a("close"));let k=r("design-inspector__fold");k.append(a("chevron"));let C=s("div","design-inspector__identity");C.append(x,_,w),b.append(y,C,k,E);let P=s("div","design-inspector__controls"),A=s("div","design-inspector__bar"),L=s("span","design-inspector__count");L.title="Runtime preview · Undo, Reset or reload to restore";let T=s("p","design-inspector__status");T.setAttribute("role","status");let M=s("div","design-inspector__actions"),S=e=>{let t=r("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},R=S("Undo"),D=S("Reset"),H=S("Copy CSS");H.append(a("copy"));let z=r("","Comment"),K=r("design-text-edit","Edit text");K.title="Edit text",K.setAttribute("aria-label","Edit selected text inline"),M.append(R,D,H,z);let B=s("div","design-inspector__compare");B.setAttribute("role","group"),B.setAttribute("aria-label","Compare with the page");let j=["Before","After"].map((e,t)=>{let n=r("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>be(!t)),B.append(n),n});A.append(L,B,T,M);let I,O=s("div");O.hidden=!0,h.append(b,O,P,A),c.root.append(p,m,f),(c.panelRoot??c.root).append(h);let F,$=!1,V=0,W=null,U=null,q=()=>c.page?.()??location.pathname,N=q(),X=new Map,Y=null,G=0,Q=0,J=null,Z="",ee=null,te=null,ne=new Map,ie=new WeakSet,oe=new Map,se=new WeakMap,ae=new WeakMap,re=new AbortController,de=()=>import("./design-export-JEWGQH3R.js"),le=e=>{F??=de().then(({footerTips:t})=>t(A,c.root,re.signal,e),()=>{F=void 0})};A.addEventListener("pointerover",le),A.addEventListener("focusin",le);let ce=new Set,pe=[];function ge(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ne.get(e);o||(ne.set(e,o=new Map),e.hasAttribute("style")||ie.add(e)),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ue(e,t){let n=oe.get(e);n||oe.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ne.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||oe.delete(e),Ce(W,"selected")}let he=0;new MutationObserver(()=>{let e=T.textContent??"";T.title=e,A.toggleAttribute("data-message",!!e),clearTimeout(he),e&&(he=window.setTimeout(function e(){Y?.element?he=window.setTimeout(e,2600):T.textContent=""},2600))}).observe(T,{childList:!0,characterData:!0,subtree:!0});let me,fe=!1;function be(e,n=!0){if(e===fe)return;e&&Y?.element&&He(),fe=e;let i=n&&!l();for(let[n,o]of oe)t(n,o.keys(),()=>{for(let[t,i]of o){let o=ne.get(n)?.get(t);e?ve(n,t,o):n.style.setProperty(t,i,o?.priority)}},i,ie.has(n));Y?.showBefore(e),ee?.showDesignBefore(e),j.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),h.toggleAttribute("data-before",e),De()}function ve(t,n,i){i?.value?t.style.setProperty(n,i.value,i.priority):t.style.removeProperty(n),ie.has(t)&&e(t)}function ye(e,t,n){W&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ge(W,t),ee?.noteDesignTokenOverride(W,t,n),W.style.setProperty(t,n,ne.get(W)?.get(t)?.priority),ue(W,t),De()))}function xe(e,t,n=!0){if(!W)return;let i={value:W.style.getPropertyValue(t),priority:W.style.getPropertyPriority(t)},o=ae.get(e),s=o?.before??se.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&pe.splice(pe.indexOf(o),1),ae.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:W,property:t,before:s,after:i};pe.push(n),ae.set(e,n)}n&&(se.set(e,i),ae.delete(e)),De()}function _e(){if(je(),P.replaceChildren(),we(),!W)return I&&P.append(I.empty),_.textContent="Select an element",w.textContent="",void(x.hidden=!0);let e=`${W.tagName.toLowerCase()}${W.id?`#${W.id}`:""}`;_.textContent=e,w.textContent=W instanceof HTMLIFrameElement?"Frame only · contents are isolated":W.classList.length?`.${[...W.classList].slice(0,2).join(".")}`:"";let t=W.parentElement;x.hidden=!t||t===document.body||t===document.documentElement,x.textContent=t?.tagName.toLowerCase()??"",x.setAttribute("aria-label",`Select parent ${x.textContent}`);let n=W,i=g;i?(i.renderPanel(P,{element:n,changed:oe.get(n),collapsed:ce,editText:K,begin:(e,t)=>se.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:ye,commit:xe,rerender:_e}),(c.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(te??=import("./react-props-panel-PD6ENV6Q.js").then(e=>ee=e).catch(e=>{throw te=null,e}),te.then(e=>{if(!$||W!==n||P.querySelector(".design-react-group, .design-theme-group"))return;let t=c.root;e.attachThemeSwitcher(P,c.design,()=>Te(n),t);let o=e=>{e&&pe.push({element:n,undo:e}),De()},s=e.createReactPropsPanel(n,o,t,Te,c.design,_e);s&&P.prepend(s),e.attachStyleTokenControls(n,i.fields,P,(e,t,i)=>{ge(n,e.property,i),ue(n,e.property),se.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),xe(t,e.property)},t,i.valueFor,i.toHex,c.design,o);let a=e.createDesignThemePanel(n,i,De,t);a&&P.append(a)}).catch(()=>{}))):u.then(()=>{$&&W===n&&_e()})}function we(){h.toggleAttribute("data-empty",z.hidden=!W),I&&(I.hint.hidden=!W),h.parentElement?.toggleAttribute("data-design-empty",$&&!W);let e=[...X.keys()].filter(Ee);O.hidden=!!W||!e.length,I&&(I.pending.hidden=O.hidden),I?.update(e.length,e.some(e=>e.isConnected&&X.get(e)===q()))}function Ee(e){return!!(oe.get(e)?.size||e instanceof HTMLElement&&Y?.hasChanges(e)||ee?.hasReactPropChanges(e)||ee?.hasDesignTokenEdit(e))}function ke(){He(),Le?.disconnect(),W=null,U=null,m.hidden=f.hidden=!0,_e(),De()}function Ce(e,t,n=!1,i=m){if(!$||!e?.isConnected)return void(i.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(i.hidden=!1,i.dataset.kind=t,n&&(e!==J||t!==Z)){J=e,Z=t,clearTimeout(Q);let n=h.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;c.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(Q=window.setTimeout(c.flip,"hover"===t?350:0))}i.hidden=!o(i,s,e,c.bounds?.(e))}else i.hidden=!0}function Pe(e=!1){Ce(W??U,W?"selected":"hover",e),Ce(W&&U!==W?U:null,"hover",!1,f)}function Ae(){G||(G=requestAnimationFrame(()=>{G=0,W&&(!W.isConnected||N!==q())&&ke(),Pe()}))}let Le="function"==typeof ResizeObserver?new ResizeObserver(Ae):null;function Te(e){!n(e)||!e.isConnected||c.host.contains(e)||(Y?.element&&Y.element!==e&&He(),Le?.disconnect(),Le?.observe(e),W=e,U=e,N=q(),X.set(e,N),_e(),Ce(e,"selected",!0),f.hidden=!0,De())}let Me=()=>d("(max-width:520px)");function Se(e){h.toggleAttribute("data-folded",e&&Me()),k.setAttribute("aria-expanded",String(!h.hasAttribute("data-folded"))),k.setAttribute("aria-label",h.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Re(e){Se(!1),Me()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=h.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:l()?"auto":"smooth"})})}function De(){Ae(),R.disabled=!pe.length&&!ee?.canUndoReactProp(W)&&!ee?.canUndoDesignTokenEdit(W),D.disabled=!function(){let e=W,t=e?(oe.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!Y?.hasChanges(e))+ +!!ee?.hasReactPropChanges(e)||+!!ee?.hasDesignTokenEdit(e):0;return L.textContent=t?`${t} change${t>1?"s":""}`:"",A.toggleAttribute("data-changes",t>0||!R.disabled),B.hidden=!t&&!fe,t}(),H.disabled=!W||!oe.get(W)?.size,z.disabled=!W,K.disabled=!(!Y?.busy&&W?.isConnected&&W instanceof HTMLElement),K.textContent=Y?.isEditing(W instanceof HTMLElement?W:null)?"Done editing":"Edit text",K.setAttribute("aria-label",Y?.isEditing(W instanceof HTMLElement?W:null)?"Finish inline text editing":"Edit selected text inline"),we()}function He(e=!1){Y?.finish(e),De()}function ze(e){!$||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),ke(),Ke(!1),c.onExit())}function Ke(e){if(e||(je(),Y?.finish(),$&&(me=fe,be(!0,!1)),ee?.restoreThemes(h)),e&&!$&&void 0!==me){let e=me;me=void 0,be(e,!1)}e&&W&&(!W.isConnected||N!==q())&&ke(),clearTimeout(V),V=0,$=e,we(),e?(h.hidden=!1,h.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{$&&(h.dataset.state="active")}),m.hidden=!W,_e(),Se(!W),Ce(W,"selected"),E.focus({preventScroll:!0})):(U=null,m.hidden=f.hidden=!0,h.setAttribute("aria-hidden","true"),h.dataset.state="closing",l()?(h.hidden=!0,delete h.dataset.state):V=window.setTimeout(()=>{V=0,$||(h.hidden=!0,delete h.dataset.state)},250))}function Be(){je(),be(!1,!1);for(let[e,n]of ne)t(e,n.keys(),()=>{for(let[t,i]of n)ve(e,t,i)},!1,ie.has(e)),ie.delete(e);ne.clear(),oe.clear(),pe.length=0,Y?.restoreAll(),ee?.resetPreviews(),X.clear(),De()}function je(){c.root.dispatchEvent(new Event("komo-preview-cancel"))}function Ie(e,t){return t(e,oe.get(e),t=>ne.get(e)?.get(t)?.computed,ee?.tokenBoundProperties(e),[e instanceof HTMLElement?Y?.proposal(e):void 0,ee?.proposedDesignChanges(e)],ee?.designContext(e,c.design))}function Oe(e){Y?.isEditing(e instanceof HTMLElement?e:null)&&He(!0);let n=oe.get(e),i=(e instanceof HTMLElement&&Y?.hasChanges(e))??!1,o=ee?.hasReactPropChanges(e)??!1,s=ee?.hasDesignTokenEdit(e)??!1;if(n?.size||i||o||s){i&&e instanceof HTMLElement&&Y?.reset(e),t(e,n?.keys()??[],()=>{for(let t of n?.keys()??[])ve(e,t,ne.get(e)?.get(t))},!1,ie.has(e)),oe.delete(e),ne.delete(e),ie.delete(e),X.delete(e),o&&ee?.resetReactProps(e),s&&ee?.resetDesignTokenEdits(e);for(let t=pe.length-1;t>=0;t--)pe[t].element===e&&pe.splice(t,1)}}K.addEventListener("click",e=>{Y||W&&(T.textContent="Loading inline text editor…",import("./inline-text-editor-HKKHLSNR.js").then(t=>{Y||!W||!$||(Y=t.bindInlineTextTools({button:K,status:T,selected:()=>W instanceof HTMLElement?W:null,active:()=>$,onChange:De,onCommit(e){pe.push({kind:"text",element:e})}}),Y.toggle(e))}).catch(()=>{T.textContent="Inline text editing is unavailable."}))}),k.addEventListener("click",()=>Se(!h.hasAttribute("data-folded"))),x.addEventListener("click",()=>Te(W?.parentElement??null)),E.addEventListener("click",()=>{Y?.element&&He(),ke(),Ke(!1),c.onExit()}),R.addEventListener("click",()=>{let e=pe.pop();e?e.kind?"text"===e.kind?W===(Y?.undo()??e.element)&&_e():(ve(e.element,e.property,e.before),ee?.syncDesignTokenBinding(e.element,e.property),ue(e.element,e.property),W===e.element&&_e(),Ce(W??U,W?"selected":"hover")):(e.undo(),_e()):(W&&(ee?.undoDesignTokenEdit(W),ee?.undoReactProp(W),_e()),T.textContent="Runtime preview · Undo, Reset or reload to restore"),De(),(R.disabled?E:R).focus({preventScroll:!0})}),D.addEventListener("click",()=>{W&&(Oe(W),_e(),Ce(W,"selected"),De(),E.focus({preventScroll:!0}))}),H.addEventListener("click",()=>{let e=W,t=e?oe.get(e):void 0;!e||!t?.size||de().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),T.textContent="CSS copied"}catch{T.textContent=i}})}),z.addEventListener("click",()=>{let e=W;e&&(Y?.isEditing(e instanceof HTMLElement?e:null)&&He(),de().then(({designProposal:t})=>{if(!$||W!==e||!e.isConnected)return;let n=Ie(e,t);Oe(e),De(),c.onComment(e,n)},()=>{T.textContent="Comment unavailable · try again"}))});let Fe=()=>be(!1);for(let e of[P,M,K])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Fe,!0);document.addEventListener("pointermove",function(e){if(!$)return;if(e.composedPath().includes(c.host))return U=null,void Pe();let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);U=t&&!c.host.contains(t)?t:null,Pe(!W)},{capture:!0,signal:re.signal}),document.addEventListener("pointerdown",function(e){if(!$||0!==e.button||e.composedPath().includes(c.host))return;let t=i(c.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!t||c.host.contains(t)||Y?.element&&(t===Y.element||Y.element.contains(t))||(Y?.element&&He(),e.preventDefault(),e.stopImmediatePropagation(),Te(t))},{capture:!0,signal:re.signal}),document.addEventListener("click",function(e){!$||e.composedPath().includes(c.host)||(e.preventDefault(),e.stopImmediatePropagation(),W&&Re(W),2===e.detail&&W?.contains(e.target)&&!K.disabled&&!Y?.element&&K.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:re.signal}),document.addEventListener("keydown",function(e){if(Y?.handleKey(e))return void K.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if($&&W&&e.altKey&&!e.ctrlKey&&!e.metaKey&&!o&&("arrowup"===t||"arrowdown"===t)){let i=("arrowup"===t?W.parentElement:[...W.children].find(e=>n(e)&&!e.matches("script,style,defs,title,desc,metadata")))??null;return void(n(i)&&i!==document.body&&i!==document.documentElement&&!c.host.contains(i)&&(e.preventDefault(),e.stopImmediatePropagation(),Te(i),Re(i)))}if($&&!B.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!o)return e.preventDefault(),e.stopImmediatePropagation(),void be("b"===t?!fe:"arrowleft"===t);if($&&!Y?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(c.host)){let t=document.activeElement;if(n(t)&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Te(t),void Re(t)}e.composedPath().includes(c.host)&&ze(e)},{capture:!0,signal:re.signal}),window.addEventListener("keydown",ze,{signal:re.signal}),window.addEventListener("scroll",Ae,{capture:!0,passive:!0,signal:re.signal}),window.addEventListener("resize",Ae,{passive:!0,signal:re.signal});let $e=new MutationObserver(()=>{$&&W&&!W.isConnected&&ke(),U&&!U.isConnected&&(U=null,Pe())});$e.observe(document.body,{childList:!0,subtree:!0});let Ve=de().then(e=>{re.signal.aborted||(I=e.selectionViews({exitKey:c.exitKey,review(){let e=[...X.keys()].reverse().find(e=>e.isConnected&&X.get(e)===q()&&Ee(e));e&&Te(e)},reset:Be,proposals:()=>[...X.keys()].filter(Ee).map(t=>Ie(t,e.designProposal)),message:e=>{T.textContent=e}}),p.textContent+=I.styles,R.innerHTML=I.icons.undo,D.innerHTML=I.icons.reset,h.insertBefore(I.hint,O),O.append(I.pending),$?_e():we())},()=>{T.textContent="Selection tools unavailable · try again"});return{setActive:Ke,select:Te,clearSelection:ke,setReturnAction(e){v=e,y.hidden=!e,e&&(y.setAttribute("aria-label",e.label),y.title=e.label)},mountPanel(e){h.parentElement!==e&&(h.parentElement?.removeAttribute("data-design-empty"),e.append(h),we())},get active(){return $},ready:Promise.all([u,Ve]),destroy(){Y?.finish(!0),Ke(!1),Be(),clearTimeout(V),clearTimeout(he),clearTimeout(Q),Le?.disconnect(),$e.disconnect(),re.abort(),cancelAnimationFrame(G),h.remove(),m.remove(),f.remove(),p.remove()}}}export{c as createDesignMode};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-
|
|
1
|
+
var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-PD6ENV6Q.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(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&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 o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.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{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("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 o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(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 l(e){return!i(e)}function s(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 c(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 d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let y=document.getSelection(),R=document.createRange();return R.selectNodeContents(a),R.collapse(!1),y?.removeAllRanges(),y?.addRange(R),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};
|