@vibe-flags/core 0.1.4 → 0.1.5
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/index.d.ts +2 -2
- package/dist/vibe-flags.cdn.js +79 -98
- package/dist/vibe-flags.cdn.mjs +106 -125
- package/dist/vibe-flags.js +101 -120
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -63,6 +63,7 @@ export declare class VibeFlagBoolean extends LitElement {
|
|
|
63
63
|
export declare class VibeFlagOption extends LitElement {
|
|
64
64
|
value: string;
|
|
65
65
|
active: boolean;
|
|
66
|
+
protected firstUpdated(): void;
|
|
66
67
|
protected render(): TemplateResult<1> | typeof nothing;
|
|
67
68
|
}
|
|
68
69
|
|
|
@@ -97,8 +98,7 @@ export declare class VibeToolbar extends LitElement {
|
|
|
97
98
|
private applyTheme;
|
|
98
99
|
private onFlagChange;
|
|
99
100
|
private syncFromStore;
|
|
100
|
-
private
|
|
101
|
-
private closeSidebar;
|
|
101
|
+
private toggle;
|
|
102
102
|
private onToggle;
|
|
103
103
|
private onSelect;
|
|
104
104
|
private onReset;
|
package/dist/vibe-flags.cdn.js
CHANGED
|
@@ -10,13 +10,13 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
10
10
|
* @license
|
|
11
11
|
* Copyright 2017 Google LLC
|
|
12
12
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
13
|
-
*/const J=globalThis,ne=r=>r,I=J.trustedTypes,ae=I?I.createPolicy("lit-html",{createHTML:r=>r}):void 0,le="$lit$",y=`lit$${Math.random().toFixed(9).slice(2)}$`,he="?"+y,ke=`<${he}>`,x=document,k=()=>x.createComment(""),O=r=>r===null||typeof r!="object"&&typeof r!="function",
|
|
14
|
-
\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ce=/-->/g,de=/>/g,_=RegExp(`>|${
|
|
15
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),pe=/'/g,fe=/"/g,
|
|
13
|
+
*/const J=globalThis,ne=r=>r,I=J.trustedTypes,ae=I?I.createPolicy("lit-html",{createHTML:r=>r}):void 0,le="$lit$",y=`lit$${Math.random().toFixed(9).slice(2)}$`,he="?"+y,ke=`<${he}>`,x=document,k=()=>x.createComment(""),O=r=>r===null||typeof r!="object"&&typeof r!="function",Y=Array.isArray,Oe=r=>Y(r)||typeof r?.[Symbol.iterator]=="function",Z=`[
|
|
14
|
+
\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ce=/-->/g,de=/>/g,_=RegExp(`>|${Z}(?:([^\\s"'>=/]+)(${Z}*=${Z}*(?:[^
|
|
15
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),pe=/'/g,fe=/"/g,ue=/^(?:script|style|textarea|title)$/i,Pe=r=>(e,...t)=>({_$litType$:r,strings:e,values:t}),u=Pe(1),S=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ge=new WeakMap,w=x.createTreeWalker(x,129);function ve(r,e){if(!Y(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return ae!==void 0?ae.createHTML(e):e}const Fe=(r,e)=>{const t=r.length-1,s=[];let i,o=e===2?"<svg>":e===3?"<math>":"",n=P;for(let h=0;h<t;h++){const a=r[h];let p,f,c=-1,b=0;for(;b<a.length&&(n.lastIndex=b,f=n.exec(a),f!==null);)b=n.lastIndex,n===P?f[1]==="!--"?n=ce:f[1]!==void 0?n=de:f[2]!==void 0?(ue.test(f[2])&&(i=RegExp("</"+f[2],"g")),n=_):f[3]!==void 0&&(n=_):n===_?f[0]===">"?(n=i??P,c=-1):f[1]===void 0?c=-2:(c=n.lastIndex-f[2].length,p=f[1],n=f[3]===void 0?_:f[3]==='"'?fe:pe):n===fe||n===pe?n=_:n===ce||n===de?n=P:(n=_,i=void 0);const m=n===_&&r[h+1].startsWith("/>")?" ":"";o+=n===P?a+ke:c>=0?(s.push(p),a.slice(0,c)+le+a.slice(c)+y+m):a+y+(c===-2?h:m)}return[ve(r,o+(r[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]};class F{constructor({strings:e,_$litType$:t},s){let i;this.parts=[];let o=0,n=0;const h=e.length-1,a=this.parts,[p,f]=Fe(e,t);if(this.el=F.createElement(p,s),w.currentNode=this.el.content,t===2||t===3){const c=this.el.content.firstChild;c.replaceWith(...c.childNodes)}for(;(i=w.nextNode())!==null&&a.length<h;){if(i.nodeType===1){if(i.hasAttributes())for(const c of i.getAttributeNames())if(c.endsWith(le)){const b=f[n++],m=i.getAttribute(c).split(y),z=/([.?@])?(.*)/.exec(b);a.push({type:1,index:o,name:z[2],strings:m,ctor:z[1]==="."?Te:z[1]==="?"?Ue:z[1]==="@"?Ve:D}),i.removeAttribute(c)}else c.startsWith(y)&&(a.push({type:6,index:o}),i.removeAttribute(c));if(ue.test(i.tagName)){const c=i.textContent.split(y),b=c.length-1;if(b>0){i.textContent=I?I.emptyScript:"";for(let m=0;m<b;m++)i.append(c[m],k()),w.nextNode(),a.push({type:2,index:++o});i.append(c[b],k())}}}else if(i.nodeType===8)if(i.data===he)a.push({type:2,index:o});else{let c=-1;for(;(c=i.data.indexOf(y,c+1))!==-1;)a.push({type:7,index:o}),c+=y.length-1}o++}}static createElement(e,t){const s=x.createElement("template");return s.innerHTML=e,s}}function E(r,e,t=r,s){if(e===S)return e;let i=s!==void 0?t._$Co?.[s]:t._$Cl;const o=O(e)?void 0:e._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(!1),o===void 0?i=void 0:(i=new o(r),i._$AT(r,t,s)),s!==void 0?(t._$Co??=[])[s]=i:t._$Cl=i),i!==void 0&&(e=E(r,i._$AS(r,e.values),i,s)),e}class Me{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:s}=this._$AD,i=(e?.creationScope??x).importNode(t,!0);w.currentNode=i;let o=w.nextNode(),n=0,h=0,a=s[0];for(;a!==void 0;){if(n===a.index){let p;a.type===2?p=new M(o,o.nextSibling,this,e):a.type===1?p=new a.ctor(o,a.name,a.strings,this,e):a.type===6&&(p=new Ne(o,this,e)),this._$AV.push(p),a=s[++h]}n!==a?.index&&(o=w.nextNode(),n++)}return w.currentNode=x,i}p(e){let t=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(e,s,t),t+=s.strings.length-2):s._$AI(e[t])),t++}}class M{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,s,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=E(this,e,t),O(e)?e===d||e==null||e===""?(this._$AH!==d&&this._$AR(),this._$AH=d):e!==this._$AH&&e!==S&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Oe(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==d&&O(this._$AH)?this._$AA.nextSibling.data=e:this.T(x.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:s}=e,i=typeof s=="number"?this._$AC(e):(s.el===void 0&&(s.el=F.createElement(ve(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(t);else{const o=new Me(i,this),n=o.u(this.options);o.p(t),this.T(n),this._$AH=o}}_$AC(e){let t=ge.get(e.strings);return t===void 0&&ge.set(e.strings,t=new F(e)),t}k(e){Y(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let s,i=0;for(const o of e)i===t.length?t.push(s=new M(this.O(k()),this.O(k()),this,this.options)):s=t[i],s._$AI(o),i++;i<t.length&&(this._$AR(s&&s._$AB.nextSibling,i),t.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const s=ne(e).nextSibling;ne(e).remove(),e=s}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}}class D{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,s,i,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=e,this.name=t,this._$AM=i,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d}_$AI(e,t=this,s,i){const o=this.strings;let n=!1;if(o===void 0)e=E(this,e,t,0),n=!O(e)||e!==this._$AH&&e!==S,n&&(this._$AH=e);else{const h=e;let a,p;for(e=o[0],a=0;a<o.length-1;a++)p=E(this,h[s+a],t,a),p===S&&(p=this._$AH[a]),n||=!O(p)||p!==this._$AH[a],p===d?e=d:e!==d&&(e+=(p??"")+o[a+1]),this._$AH[a]=p}n&&!i&&this.j(e)}j(e){e===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Te extends D{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===d?void 0:e}}class Ue extends D{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==d)}}class Ve extends D{constructor(e,t,s,i,o){super(e,t,s,i,o),this.type=5}_$AI(e,t=this){if((e=E(this,e,t,0)??d)===S)return;const s=this._$AH,i=e===d&&s!==d||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,o=e!==d&&(s===d||i);i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class Ne{constructor(e,t,s){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(e){E(this,e)}}const He=J.litHtmlPolyfillSupport;He?.(F,M),(J.litHtmlVersions??=[]).push("3.3.2");const Re=(r,e,t)=>{const s=t?.renderBefore??e;let i=s._$litPart$;if(i===void 0){const o=t?.renderBefore??null;s._$litPart$=i=new M(e.insertBefore(k(),o),o,void 0,t??{})}return i._$AI(r),i};/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
|
-
*/const
|
|
19
|
+
*/const X=globalThis;class v extends A{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Re(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return S}}v._$litElement$=!0,v.finalized=!0,X.litElementHydrateSupport?.({LitElement:v});const je=X.litElementPolyfillSupport;je?.({LitElement:v}),(X.litElementVersions??=[]).push("4.2.2");/**
|
|
20
20
|
* @license
|
|
21
21
|
* Copyright 2017 Google LLC
|
|
22
22
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -28,7 +28,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
28
28
|
* @license
|
|
29
29
|
* Copyright 2017 Google LLC
|
|
30
30
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
-
*/function U(r){return $({...r,state:!0,attribute:!1})}var De=Object.getOwnPropertyDescriptor,ze=(r,e,t,s)=>{for(var i=s>1?void 0:s?De(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=n(i)||i);return i};l.VibeFlags=class extends v{render(){return
|
|
31
|
+
*/function U(r){return $({...r,state:!0,attribute:!1})}var De=Object.getOwnPropertyDescriptor,ze=(r,e,t,s)=>{for(var i=s>1?void 0:s?De(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=n(i)||i);return i};l.VibeFlags=class extends v{render(){return u`<slot></slot>`}},l.VibeFlags=ze([T("vibe-flags")],l.VibeFlags);const V="vibe-flags:";function G(r){return r.type==="boolean"?!1:r.options[0]||""}class Le extends EventTarget{constructor(){super(...arguments),this.configs=new Map,this.state={},this.listening=!1,this.onStorageEvent=e=>{if(!e.key?.startsWith(V))return;const t=e.key.slice(V.length),s=this.configs.get(t);if(s)try{const i=e.newValue?JSON.parse(e.newValue):G(s);this.state[t]=i,this.dispatch(t)}catch{}}}register(e){this.configs.set(e.key,e);const t=G(e),s=this.readFromStorage(e.key),i=s!==null&&(e.type==="boolean"&&typeof s=="boolean"||e.type==="select"&&typeof s=="string"&&e.options.includes(s));this.state[e.key]=i?s:t,this.listening||(this.listening=!0,typeof window<"u"&&window.addEventListener("storage",this.onStorageEvent)),this.dispatch(e.key)}unregister(e){this.configs.delete(e),delete this.state[e],this.dispatch()}get(e){return this.state[e]}set(e,t){const s=this.configs.get(e);s&&(s.type==="boolean"&&typeof t!="boolean"||s.type==="select"&&(typeof t!="string"||!s.options.includes(t))||(this.state[e]=t,this.writeToStorage(e,t),this.dispatch(e)))}getAll(){return{...this.state}}getConfig(){return Array.from(this.configs.values())}getConfigForKey(e){return this.configs.get(e)}reset(){for(const[e,t]of this.configs)this.state[e]=G(t),this.removeFromStorage(e);this.dispatch()}readFromStorage(e){if(typeof window>"u")return null;try{const t=localStorage.getItem(V+e);return t===null?null:JSON.parse(t)}catch{return null}}writeToStorage(e,t){if(!(typeof window>"u"))try{localStorage.setItem(V+e,JSON.stringify(t))}catch{}}removeFromStorage(e){if(!(typeof window>"u"))try{localStorage.removeItem(V+e)}catch{}}dispatch(e){const t={key:e,state:this.getAll()},s=new CustomEvent("vibe-flags-changed",{detail:t,bubbles:!0});this.dispatchEvent(s),typeof window<"u"&&window.dispatchEvent(new CustomEvent("vibe-flags-changed",{detail:t}))}}const g=new Le;var qe=Object.defineProperty,We=Object.getOwnPropertyDescriptor,N=(r,e,t,s)=>{for(var i=s>1?void 0:s?We(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&qe(e,t,i),i};if(typeof document<"u"&&!document.getElementById("vibe-flag-fouc")){const r=document.createElement("style");r.id="vibe-flag-fouc",r.textContent="vibe-flag-boolean:not(:defined),vibe-flag-boolean:defined,vibe-flag-select:not(:defined),vibe-flag-select:defined,vibe-flag-option:not(:defined),vibe-flag-option:defined{display:none}",document.head.appendChild(r)}l.VibeFlagBoolean=class extends v{constructor(){super(...arguments),this.name="",this.description="",this.value="",this.isMatch=!1,this.onFlagChange=()=>{this.evaluate()}}connectedCallback(){super.connectedCallback(),window.addEventListener("vibe-flags-changed",this.onFlagChange),this.registerFlag()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("vibe-flags-changed",this.onFlagChange)}firstUpdated(){this.style.display="contents"}willUpdate(e){(e.has("name")||e.has("description"))&&this.registerFlag()}registerFlag(){this.name&&(g.getConfigForKey(this.name)||g.register({key:this.name,type:"boolean",label:this.description||void 0}),this.evaluate())}evaluate(){const e=g.get(this.name);e===void 0?this.isMatch=!1:this.value===""?this.isMatch=!0:this.isMatch=String(e)===this.value,this.isMatch?this.setAttribute("active",""):this.removeAttribute("active")}render(){return this.isMatch?u`<slot></slot>`:d}},N([$({type:String})],l.VibeFlagBoolean.prototype,"name",2),N([$({type:String})],l.VibeFlagBoolean.prototype,"description",2),N([$({type:String})],l.VibeFlagBoolean.prototype,"value",2),N([U()],l.VibeFlagBoolean.prototype,"isMatch",2),l.VibeFlagBoolean=N([T("vibe-flag-boolean")],l.VibeFlagBoolean);var Ke=Object.defineProperty,Je=Object.getOwnPropertyDescriptor,Q=(r,e,t,s)=>{for(var i=s>1?void 0:s?Je(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&Ke(e,t,i),i};l.VibeFlagSelect=class extends v{constructor(){super(...arguments),this.name="",this.description="",this.onFlagChange=()=>{this.syncOptions()}}connectedCallback(){super.connectedCallback(),window.addEventListener("vibe-flags-changed",this.onFlagChange),queueMicrotask(()=>this.registerFlag())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("vibe-flags-changed",this.onFlagChange)}firstUpdated(){this.style.display="contents"}willUpdate(e){(e.has("name")||e.has("description"))&&this.registerFlag()}getOptions(){return Array.from(this.querySelectorAll("vibe-flag-option"))}registerFlag(){if(!this.name)return;const e=this.getOptions().map(t=>t.value).filter(Boolean);e.length!==0&&(g.getConfigForKey(this.name)||g.register({key:this.name,type:"select",options:e,label:this.description||void 0}),this.syncOptions())}syncOptions(){const e=g.get(this.name);for(const t of this.getOptions())t.active=t.value===e}render(){return u`<slot></slot>`}},Q([$({type:String})],l.VibeFlagSelect.prototype,"name",2),Q([$({type:String})],l.VibeFlagSelect.prototype,"description",2),l.VibeFlagSelect=Q([T("vibe-flag-select")],l.VibeFlagSelect);var Ye=Object.defineProperty,Ze=Object.getOwnPropertyDescriptor,ee=(r,e,t,s)=>{for(var i=s>1?void 0:s?Ze(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&Ye(e,t,i),i};l.VibeFlagOption=class extends v{constructor(){super(...arguments),this.value="",this.active=!1}firstUpdated(){this.style.display="contents"}render(){return this.active?u`<slot></slot>`:d}},ee([$({type:String})],l.VibeFlagOption.prototype,"value",2),ee([$({type:Boolean,reflect:!0})],l.VibeFlagOption.prototype,"active",2),l.VibeFlagOption=ee([T("vibe-flag-option")],l.VibeFlagOption);const Xe=W`
|
|
32
32
|
:host {
|
|
33
33
|
--vf-bg: #0a0a0a;
|
|
34
34
|
--vf-bg-muted: #171717;
|
|
@@ -76,7 +76,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
76
76
|
--vf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
77
77
|
0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
78
78
|
}
|
|
79
|
-
`;var Qe=Object.defineProperty,et=Object.getOwnPropertyDescriptor,H=(r,e,t,s)=>{for(var i=s>1?void 0:s?et(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&Qe(e,t,i),i};const be="vibeFlagsTheme";return l.VibeToolbar=class extends v{constructor(){super(...arguments),this.open=!1,this.flags={},this.configs=[],this.darkMode=!0,this.onFlagChange=()=>{this.syncFromStore()}}connectedCallback(){super.connectedCallback(),window.addEventListener("vibe-flags-changed",this.onFlagChange),this.syncFromStore(),this.loadTheme()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("vibe-flags-changed",this.onFlagChange)}loadTheme(){if(typeof window>"u")return;const e=localStorage.getItem(be);this.darkMode=e?e==="dark":!0,this.applyTheme()}toggleTheme(){this.darkMode=!this.darkMode,localStorage.setItem(be,this.darkMode?"dark":"light"),this.applyTheme()}applyTheme(){const e=this.darkMode?
|
|
79
|
+
`;var Qe=Object.defineProperty,et=Object.getOwnPropertyDescriptor,H=(r,e,t,s)=>{for(var i=s>1?void 0:s?et(e,t):e,o=r.length-1,n;o>=0;o--)(n=r[o])&&(i=(s?n(e,t,i):n(i))||i);return s&&i&&Qe(e,t,i),i};const be="vibeFlagsTheme";return l.VibeToolbar=class extends v{constructor(){super(...arguments),this.open=!1,this.flags={},this.configs=[],this.darkMode=!0,this.onFlagChange=()=>{this.syncFromStore()}}connectedCallback(){super.connectedCallback(),window.addEventListener("vibe-flags-changed",this.onFlagChange),this.syncFromStore(),this.loadTheme()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("vibe-flags-changed",this.onFlagChange)}loadTheme(){if(typeof window>"u")return;const e=localStorage.getItem(be);this.darkMode=e?e==="dark":!0,this.applyTheme()}toggleTheme(){this.darkMode=!this.darkMode,localStorage.setItem(be,this.darkMode?"dark":"light"),this.applyTheme()}applyTheme(){const e=this.darkMode?Xe:Ge,t=new CSSStyleSheet;t.replaceSync(e.cssText),this.shadowRoot.adoptedStyleSheets=[...l.VibeToolbar.elementStyles.map(s=>s.styleSheet),t]}syncFromStore(){this.configs=g.getConfig(),this.flags=g.getAll()}toggle(){this.open=!this.open}onToggle(e){const t=this.flags[e];g.set(e,!t)}onSelect(e,t){const s=t.target;g.set(e,s.value)}onReset(){g.reset()}renderFlagIcon(){return u`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>`}renderCloseIcon(){return u`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`}renderChevronDown(){return u`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`}renderSunIcon(){return u`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`}renderMoonIcon(){return u`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`}renderBooleanFlag(e){const t=this.flags[e.key]===!0;return u`
|
|
80
80
|
<div class="flag-item">
|
|
81
81
|
<div class="flag-row">
|
|
82
82
|
<div class="flag-info">
|
|
@@ -94,7 +94,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
94
94
|
</label>
|
|
95
95
|
</div>
|
|
96
96
|
</div>
|
|
97
|
-
`}renderSelectFlag(e){if(e.type!=="select")return d;const t=this.flags[e.key];return
|
|
97
|
+
`}renderSelectFlag(e){if(e.type!=="select")return d;const t=this.flags[e.key];return u`
|
|
98
98
|
<div class="flag-item">
|
|
99
99
|
<div class="flag-row">
|
|
100
100
|
<div class="flag-info">
|
|
@@ -107,7 +107,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
107
107
|
.value=${t}
|
|
108
108
|
@change=${s=>this.onSelect(e.key,s)}
|
|
109
109
|
>
|
|
110
|
-
${e.options.map(s=>
|
|
110
|
+
${e.options.map(s=>u`<option value=${s} ?selected=${s===t}>
|
|
111
111
|
${s}
|
|
112
112
|
</option>`)}
|
|
113
113
|
</select>
|
|
@@ -115,16 +115,14 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
|
-
`}render(){return
|
|
119
|
-
${this.open?d:
|
|
120
|
-
<button class="fab" @click=${this.
|
|
118
|
+
`}render(){return u`
|
|
119
|
+
${this.open?d:u`
|
|
120
|
+
<button class="fab" @click=${this.toggle} aria-label="Toggle feature flags">
|
|
121
121
|
${this.renderFlagIcon()}
|
|
122
122
|
</button>
|
|
123
123
|
`}
|
|
124
124
|
|
|
125
|
-
<div class="
|
|
126
|
-
|
|
127
|
-
<div class="sidebar ${this.open?"open":""}">
|
|
125
|
+
<div class="card ${this.open?"open":""}">
|
|
128
126
|
<div class="header">
|
|
129
127
|
<h2>
|
|
130
128
|
${this.renderFlagIcon()}
|
|
@@ -135,14 +133,14 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
135
133
|
<button class="icon-btn" @click=${this.toggleTheme} aria-label="Toggle theme" title="${this.darkMode?"Switch to light theme":"Switch to dark theme"}">
|
|
136
134
|
${this.darkMode?this.renderSunIcon():this.renderMoonIcon()}
|
|
137
135
|
</button>
|
|
138
|
-
<button class="icon-btn" @click=${this.
|
|
136
|
+
<button class="icon-btn" @click=${this.toggle} aria-label="Close">
|
|
139
137
|
${this.renderCloseIcon()}
|
|
140
138
|
</button>
|
|
141
139
|
</div>
|
|
142
140
|
</div>
|
|
143
141
|
|
|
144
142
|
<div class="flags">
|
|
145
|
-
${this.configs.length===0?
|
|
143
|
+
${this.configs.length===0?u`<div class="empty">No flags configured</div>`:this.configs.map(e=>e.type==="boolean"?this.renderBooleanFlag(e):this.renderSelectFlag(e))}
|
|
146
144
|
</div>
|
|
147
145
|
|
|
148
146
|
<div class="footer">
|
|
@@ -160,15 +158,13 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
160
158
|
|
|
161
159
|
.fab {
|
|
162
160
|
position: fixed;
|
|
163
|
-
right:
|
|
164
|
-
|
|
165
|
-
transform: translateY(-50%);
|
|
161
|
+
right: 16px;
|
|
162
|
+
bottom: 16px;
|
|
166
163
|
z-index: 99999;
|
|
167
|
-
width:
|
|
168
|
-
height:
|
|
164
|
+
width: 42px;
|
|
165
|
+
height: 42px;
|
|
169
166
|
border: 1px solid var(--vf-border);
|
|
170
|
-
border-
|
|
171
|
-
border-radius: var(--vf-radius-lg) 0 0 var(--vf-radius-lg);
|
|
167
|
+
border-radius: 12px;
|
|
172
168
|
background: var(--vf-bg);
|
|
173
169
|
color: var(--vf-text);
|
|
174
170
|
cursor: pointer;
|
|
@@ -181,94 +177,80 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
181
177
|
}
|
|
182
178
|
|
|
183
179
|
.fab:hover {
|
|
184
|
-
width: 46px;
|
|
185
180
|
background: var(--vf-bg-muted);
|
|
181
|
+
box-shadow: var(--vf-shadow-xl);
|
|
182
|
+
transform: translateY(-1px);
|
|
186
183
|
}
|
|
187
184
|
|
|
188
185
|
.fab svg {
|
|
189
|
-
width:
|
|
190
|
-
height:
|
|
186
|
+
width: 18px;
|
|
187
|
+
height: 18px;
|
|
191
188
|
flex-shrink: 0;
|
|
192
189
|
}
|
|
193
190
|
|
|
194
|
-
.
|
|
191
|
+
.card {
|
|
195
192
|
position: fixed;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
background: rgba(0, 0, 0, 0.4);
|
|
199
|
-
opacity: 0;
|
|
200
|
-
transition: opacity 0.3s ease;
|
|
201
|
-
pointer-events: none;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.backdrop.open {
|
|
205
|
-
opacity: 1;
|
|
206
|
-
pointer-events: auto;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.sidebar {
|
|
210
|
-
position: fixed;
|
|
211
|
-
top: 0;
|
|
212
|
-
right: 0;
|
|
213
|
-
bottom: 0;
|
|
193
|
+
right: 16px;
|
|
194
|
+
bottom: 16px;
|
|
214
195
|
z-index: 100001;
|
|
215
|
-
width:
|
|
216
|
-
max-width:
|
|
196
|
+
width: 300px;
|
|
197
|
+
max-width: calc(100vw - 32px);
|
|
198
|
+
max-height: calc(100vh - 32px);
|
|
217
199
|
background: var(--vf-bg);
|
|
218
|
-
border
|
|
200
|
+
border: 1px solid var(--vf-border);
|
|
201
|
+
border-radius: 14px;
|
|
219
202
|
box-shadow: var(--vf-shadow-xl);
|
|
220
|
-
transform: translateX(100%);
|
|
221
|
-
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
222
|
-
display: flex;
|
|
223
|
-
flex-direction: column;
|
|
224
203
|
font-family: var(--vf-font);
|
|
225
204
|
color: var(--vf-text);
|
|
205
|
+
overflow: hidden;
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-direction: column;
|
|
208
|
+
opacity: 0;
|
|
209
|
+
transform: translateY(8px) scale(0.96);
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
226
212
|
}
|
|
227
213
|
|
|
228
|
-
.
|
|
229
|
-
|
|
214
|
+
.card.open {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
transform: translateY(0) scale(1);
|
|
217
|
+
pointer-events: auto;
|
|
230
218
|
}
|
|
231
219
|
|
|
232
220
|
.header {
|
|
233
221
|
display: flex;
|
|
234
222
|
align-items: center;
|
|
235
223
|
justify-content: space-between;
|
|
236
|
-
padding:
|
|
224
|
+
padding: 12px 14px;
|
|
237
225
|
border-bottom: 1px solid var(--vf-border);
|
|
238
226
|
flex-shrink: 0;
|
|
239
227
|
}
|
|
240
228
|
|
|
241
|
-
.header-left {
|
|
242
|
-
display: flex;
|
|
243
|
-
align-items: center;
|
|
244
|
-
gap: 8px;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
229
|
.header h2 {
|
|
248
|
-
font-size:
|
|
230
|
+
font-size: 13px;
|
|
249
231
|
font-weight: 600;
|
|
250
|
-
letter-spacing: -0.
|
|
232
|
+
letter-spacing: -0.01em;
|
|
251
233
|
display: flex;
|
|
252
234
|
align-items: center;
|
|
253
|
-
gap:
|
|
235
|
+
gap: 7px;
|
|
254
236
|
}
|
|
255
237
|
|
|
256
238
|
.header h2 svg {
|
|
257
|
-
width:
|
|
258
|
-
height:
|
|
239
|
+
width: 15px;
|
|
240
|
+
height: 15px;
|
|
259
241
|
color: var(--vf-accent);
|
|
260
242
|
}
|
|
261
243
|
|
|
262
244
|
.header-actions {
|
|
263
245
|
display: flex;
|
|
264
246
|
align-items: center;
|
|
265
|
-
gap:
|
|
247
|
+
gap: 2px;
|
|
266
248
|
}
|
|
267
249
|
|
|
268
250
|
.badge {
|
|
269
|
-
font-size:
|
|
251
|
+
font-size: 10px;
|
|
270
252
|
font-weight: 500;
|
|
271
|
-
padding:
|
|
253
|
+
padding: 1px 6px;
|
|
272
254
|
border-radius: 9999px;
|
|
273
255
|
background: var(--vf-bg-muted);
|
|
274
256
|
color: var(--vf-text-muted);
|
|
@@ -276,8 +258,8 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
276
258
|
}
|
|
277
259
|
|
|
278
260
|
.icon-btn {
|
|
279
|
-
width:
|
|
280
|
-
height:
|
|
261
|
+
width: 28px;
|
|
262
|
+
height: 28px;
|
|
281
263
|
border: none;
|
|
282
264
|
border-radius: var(--vf-radius);
|
|
283
265
|
background: transparent;
|
|
@@ -295,18 +277,17 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
295
277
|
}
|
|
296
278
|
|
|
297
279
|
.icon-btn svg {
|
|
298
|
-
width:
|
|
299
|
-
height:
|
|
280
|
+
width: 14px;
|
|
281
|
+
height: 14px;
|
|
300
282
|
}
|
|
301
283
|
|
|
302
284
|
.flags {
|
|
303
|
-
flex: 1;
|
|
304
285
|
overflow-y: auto;
|
|
305
|
-
|
|
286
|
+
flex: 1;
|
|
306
287
|
}
|
|
307
288
|
|
|
308
289
|
.flag-item {
|
|
309
|
-
padding:
|
|
290
|
+
padding: 10px 14px;
|
|
310
291
|
transition: background 0.1s ease;
|
|
311
292
|
}
|
|
312
293
|
|
|
@@ -319,13 +300,13 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
319
300
|
}
|
|
320
301
|
|
|
321
302
|
.flag-label {
|
|
322
|
-
font-size:
|
|
303
|
+
font-size: 12px;
|
|
323
304
|
font-weight: 500;
|
|
324
|
-
margin-bottom:
|
|
305
|
+
margin-bottom: 1px;
|
|
325
306
|
}
|
|
326
307
|
|
|
327
308
|
.flag-key {
|
|
328
|
-
font-size:
|
|
309
|
+
font-size: 10px;
|
|
329
310
|
color: var(--vf-text-muted);
|
|
330
311
|
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas,
|
|
331
312
|
monospace;
|
|
@@ -335,7 +316,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
335
316
|
display: flex;
|
|
336
317
|
align-items: center;
|
|
337
318
|
justify-content: space-between;
|
|
338
|
-
gap:
|
|
319
|
+
gap: 10px;
|
|
339
320
|
}
|
|
340
321
|
|
|
341
322
|
.flag-info {
|
|
@@ -346,8 +327,8 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
346
327
|
/* Toggle switch */
|
|
347
328
|
.toggle {
|
|
348
329
|
position: relative;
|
|
349
|
-
width:
|
|
350
|
-
height:
|
|
330
|
+
width: 36px;
|
|
331
|
+
height: 20px;
|
|
351
332
|
flex-shrink: 0;
|
|
352
333
|
}
|
|
353
334
|
|
|
@@ -361,7 +342,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
361
342
|
.toggle-track {
|
|
362
343
|
position: absolute;
|
|
363
344
|
inset: 0;
|
|
364
|
-
border-radius:
|
|
345
|
+
border-radius: 10px;
|
|
365
346
|
background: var(--vf-border);
|
|
366
347
|
cursor: pointer;
|
|
367
348
|
transition: background 0.2s ease;
|
|
@@ -375,8 +356,8 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
375
356
|
position: absolute;
|
|
376
357
|
top: 2px;
|
|
377
358
|
left: 2px;
|
|
378
|
-
width:
|
|
379
|
-
height:
|
|
359
|
+
width: 16px;
|
|
360
|
+
height: 16px;
|
|
380
361
|
border-radius: 50%;
|
|
381
362
|
background: white;
|
|
382
363
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
@@ -385,7 +366,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
385
366
|
}
|
|
386
367
|
|
|
387
368
|
.toggle input:checked ~ .toggle-thumb {
|
|
388
|
-
transform: translateX(
|
|
369
|
+
transform: translateX(16px);
|
|
389
370
|
}
|
|
390
371
|
|
|
391
372
|
/* Select dropdown */
|
|
@@ -397,16 +378,16 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
397
378
|
.select {
|
|
398
379
|
appearance: none;
|
|
399
380
|
-webkit-appearance: none;
|
|
400
|
-
font-size:
|
|
381
|
+
font-size: 12px;
|
|
401
382
|
font-family: var(--vf-font);
|
|
402
|
-
padding:
|
|
383
|
+
padding: 5px 26px 5px 8px;
|
|
403
384
|
border: 1px solid var(--vf-border);
|
|
404
385
|
border-radius: var(--vf-radius);
|
|
405
386
|
background: var(--vf-bg);
|
|
406
387
|
color: var(--vf-text);
|
|
407
388
|
cursor: pointer;
|
|
408
389
|
outline: none;
|
|
409
|
-
min-width:
|
|
390
|
+
min-width: 80px;
|
|
410
391
|
transition: border-color 0.15s ease;
|
|
411
392
|
}
|
|
412
393
|
|
|
@@ -421,7 +402,7 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
421
402
|
|
|
422
403
|
.select-chevron {
|
|
423
404
|
position: absolute;
|
|
424
|
-
right:
|
|
405
|
+
right: 6px;
|
|
425
406
|
top: 50%;
|
|
426
407
|
transform: translateY(-50%);
|
|
427
408
|
pointer-events: none;
|
|
@@ -429,21 +410,21 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
429
410
|
}
|
|
430
411
|
|
|
431
412
|
.select-chevron svg {
|
|
432
|
-
width:
|
|
433
|
-
height:
|
|
413
|
+
width: 12px;
|
|
414
|
+
height: 12px;
|
|
434
415
|
}
|
|
435
416
|
|
|
436
417
|
/* Footer */
|
|
437
418
|
.footer {
|
|
438
|
-
padding:
|
|
419
|
+
padding: 10px 14px;
|
|
439
420
|
border-top: 1px solid var(--vf-border);
|
|
440
421
|
flex-shrink: 0;
|
|
441
422
|
}
|
|
442
423
|
|
|
443
424
|
.reset-btn {
|
|
444
425
|
width: 100%;
|
|
445
|
-
padding:
|
|
446
|
-
font-size:
|
|
426
|
+
padding: 6px 12px;
|
|
427
|
+
font-size: 12px;
|
|
447
428
|
font-weight: 500;
|
|
448
429
|
font-family: var(--vf-font);
|
|
449
430
|
border: 1px solid var(--vf-border);
|
|
@@ -460,9 +441,9 @@ var VibeFlags=(function(l){"use strict";/**
|
|
|
460
441
|
}
|
|
461
442
|
|
|
462
443
|
.empty {
|
|
463
|
-
padding:
|
|
444
|
+
padding: 24px 14px;
|
|
464
445
|
text-align: center;
|
|
465
446
|
color: var(--vf-text-muted);
|
|
466
|
-
font-size:
|
|
447
|
+
font-size: 12px;
|
|
467
448
|
}
|
|
468
|
-
`],H([U()],l.VibeToolbar.prototype,"open",2),H([U()],l.VibeToolbar.prototype,"flags",2),H([U()],l.VibeToolbar.prototype,"configs",2),H([U()],l.VibeToolbar.prototype,"darkMode",2),l.VibeToolbar=H([T("vibe-toolbar")],l.VibeToolbar),l.flagStore=
|
|
449
|
+
`],H([U()],l.VibeToolbar.prototype,"open",2),H([U()],l.VibeToolbar.prototype,"flags",2),H([U()],l.VibeToolbar.prototype,"configs",2),H([U()],l.VibeToolbar.prototype,"darkMode",2),l.VibeToolbar=H([T("vibe-toolbar")],l.VibeToolbar),l.flagStore=g,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"}),l})({});
|