@vibe-flags/core 0.1.3 → 0.1.5

package/dist/vibe-flags.js

@@ -1,30 +1,30 @@
-import { LitElement as u, html as a, nothing as y, css as S } from "lit";
-import { customElement as b, property as f, state as c } from "lit/decorators.js";
-var O = Object.getOwnPropertyDescriptor, _ = (t, e, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? O(e, r) : e, n = t.length - 1, i; n >= 0; n--)
+import { LitElement as g, html as a, nothing as x, css as k } from "lit";
+import { customElement as h, property as c, state as v } from "lit/decorators.js";
+var M = Object.getOwnPropertyDescriptor, O = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? M(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = i(o) || o);
   return o;
 };
-let F = class extends u {
+let F = class extends g {
   render() {
     return a`<slot></slot>`;
   }
 };
-F = _([
-  b("vibe-flags")
+F = O([
+  h("vibe-flags")
 ], F);
-const h = "vibe-flags:";
-function k(t) {
+const f = "vibe-flags:";
+function w(t) {
   return t.type === "boolean" ? !1 : t.options[0] || "";
 }
-class M extends EventTarget {
+class _ extends EventTarget {
   constructor() {
     super(...arguments), this.configs = /* @__PURE__ */ new Map(), this.state = {}, this.listening = !1, this.onStorageEvent = (e) => {
-      if (!e.key?.startsWith(h)) return;
-      const r = e.key.slice(h.length), s = this.configs.get(r);
+      if (!e.key?.startsWith(f)) return;
+      const r = e.key.slice(f.length), s = this.configs.get(r);
       if (s)
         try {
-          const o = e.newValue ? JSON.parse(e.newValue) : k(s);
+          const o = e.newValue ? JSON.parse(e.newValue) : w(s);
           this.state[r] = o, this.dispatch(r);
         } catch {
         }
@@ -32,8 +32,8 @@ class M extends EventTarget {
   }
   register(e) {
     this.configs.set(e.key, e);
-    const r = this.readFromStorage(e.key);
-    this.state[e.key] = r ?? k(e), this.listening || (this.listening = !0, typeof window < "u" && window.addEventListener("storage", this.onStorageEvent)), this.dispatch(e.key);
+    const r = w(e), s = this.readFromStorage(e.key), o = s !== null && (e.type === "boolean" && typeof s == "boolean" || e.type === "select" && typeof s == "string" && e.options.includes(s));
+    this.state[e.key] = o ? s : r, 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();
@@ -56,13 +56,13 @@ class M extends EventTarget {
   }
   reset() {
     for (const [e, r] of this.configs)
-      this.state[e] = k(r), this.removeFromStorage(e);
+      this.state[e] = w(r), this.removeFromStorage(e);
     this.dispatch();
   }
   readFromStorage(e) {
     if (typeof window > "u") return null;
     try {
-      const r = localStorage.getItem(h + e);
+      const r = localStorage.getItem(f + e);
       return r === null ? null : JSON.parse(r);
     } catch {
       return null;
@@ -71,14 +71,14 @@ class M extends EventTarget {
   writeToStorage(e, r) {
     if (!(typeof window > "u"))
       try {
-        localStorage.setItem(h + e, JSON.stringify(r));
+        localStorage.setItem(f + e, JSON.stringify(r));
       } catch {
       }
   }
   removeFromStorage(e) {
     if (!(typeof window > "u"))
       try {
-        localStorage.removeItem(h + e);
+        localStorage.removeItem(f + e);
       } catch {
       }
   }
@@ -90,8 +90,8 @@ class M extends EventTarget {
     this.dispatchEvent(s), typeof window < "u" && window.dispatchEvent(new CustomEvent("vibe-flags-changed", { detail: r }));
   }
 }
-const l = new M();
-var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, g = (t, e, r, s) => {
+const l = new _();
+var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, u = (t, e, r, s) => {
   for (var o = s > 1 ? void 0 : s ? P(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(e, r, o) : i(o)) || o);
   return s && o && E(e, r, o), o;
@@ -100,9 +100,9 @@ if (typeof document < "u" && !document.getElementById("vibe-flag-fouc")) {
   const t = document.createElement("style");
   t.id = "vibe-flag-fouc", t.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(t);
 }
-let p = class extends u {
+let p = class extends g {
   constructor() {
-    super(...arguments), this.name = "", this.description = "", this.value = "", this.isMatch = !1, this.ready = !1, this.onFlagChange = () => {
+    super(...arguments), this.name = "", this.description = "", this.value = "", this.isMatch = !1, this.onFlagChange = () => {
       this.evaluate();
     };
   }
@@ -112,6 +112,9 @@ let p = class extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), window.removeEventListener("vibe-flags-changed", this.onFlagChange);
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   willUpdate(t) {
     (t.has("name") || t.has("description")) && this.registerFlag();
   }
@@ -124,38 +127,35 @@ let p = class extends u {
   }
   evaluate() {
     const t = l.get(this.name);
-    t === void 0 ? this.isMatch = !1 : this.value === "" ? this.isMatch = !0 : this.isMatch = String(t) === this.value, this.ready || (this.ready = !0, this.style.display = "contents");
+    t === void 0 ? this.isMatch = !1 : this.value === "" ? this.isMatch = !0 : this.isMatch = String(t) === this.value, this.isMatch ? this.setAttribute("active", "") : this.removeAttribute("active");
   }
   render() {
-    return this.isMatch ? a`<slot></slot>` : y;
+    return this.isMatch ? a`<slot></slot>` : x;
   }
 };
-g([
-  f({ type: String })
+u([
+  c({ type: String })
 ], p.prototype, "name", 2);
-g([
-  f({ type: String })
+u([
+  c({ type: String })
 ], p.prototype, "description", 2);
-g([
-  f({ type: String })
+u([
+  c({ type: String })
 ], p.prototype, "value", 2);
-g([
-  c()
+u([
+  v()
 ], p.prototype, "isMatch", 2);
-g([
-  c()
-], p.prototype, "ready", 2);
-p = g([
-  b("vibe-flag-boolean")
+p = u([
+  h("vibe-flag-boolean")
 ], p);
-var T = Object.defineProperty, j = Object.getOwnPropertyDescriptor, w = (t, e, r, s) => {
+var T = Object.defineProperty, j = Object.getOwnPropertyDescriptor, S = (t, e, r, s) => {
   for (var o = s > 1 ? void 0 : s ? j(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(e, r, o) : i(o)) || o);
   return s && o && T(e, r, o), o;
 };
-let v = class extends u {
+let y = class extends g {
   constructor() {
-    super(...arguments), this.name = "", this.description = "", this.ready = !1, this.onFlagChange = () => {
+    super(...arguments), this.name = "", this.description = "", this.onFlagChange = () => {
       this.syncOptions();
     };
   }
@@ -165,6 +165,9 @@ let v = class extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), window.removeEventListener("vibe-flags-changed", this.onFlagChange);
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   willUpdate(t) {
     (t.has("name") || t.has("description")) && this.registerFlag();
   }
@@ -185,47 +188,46 @@ let v = class extends u {
     const t = l.get(this.name);
     for (const e of this.getOptions())
       e.active = e.value === t;
-    this.ready || (this.ready = !0, this.style.display = "contents");
   }
   render() {
     return a`<slot></slot>`;
   }
 };
-w([
-  f({ type: String })
-], v.prototype, "name", 2);
-w([
-  f({ type: String })
-], v.prototype, "description", 2);
-w([
-  c()
-], v.prototype, "ready", 2);
-v = w([
-  b("vibe-flag-select")
-], v);
+S([
+  c({ type: String })
+], y.prototype, "name", 2);
+S([
+  c({ type: String })
+], y.prototype, "description", 2);
+y = S([
+  h("vibe-flag-select")
+], y);
 var I = Object.defineProperty, z = Object.getOwnPropertyDescriptor, C = (t, e, r, s) => {
   for (var o = s > 1 ? void 0 : s ? z(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(e, r, o) : i(o)) || o);
   return s && o && I(e, r, o), o;
 };
-let m = class extends u {
+let m = class extends g {
   constructor() {
     super(...arguments), this.value = "", this.active = !1;
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   render() {
-    return this.active ? a`<slot></slot>` : y;
+    return this.active ? a`<slot></slot>` : x;
   }
 };
 C([
-  f({ type: String })
+  c({ type: String })
 ], m.prototype, "value", 2);
 C([
-  c()
+  c({ type: Boolean, reflect: !0 })
 ], m.prototype, "active", 2);
 m = C([
-  b("vibe-flag-option")
+  h("vibe-flag-option")
 ], m);
-const D = S`
+const A = k`
   :host {
     --vf-bg: #0a0a0a;
     --vf-bg-muted: #171717;
@@ -249,7 +251,7 @@ const D = S`
     --vf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
       0 8px 10px -6px rgba(0, 0, 0, 0.6);
   }
-`, B = S`
+`, B = k`
   :host {
     --vf-bg: #ffffff;
     --vf-bg-muted: #f5f5f5;
@@ -274,13 +276,13 @@ const D = S`
       0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }
 `;
-var A = Object.defineProperty, V = Object.getOwnPropertyDescriptor, x = (t, e, r, s) => {
+var D = Object.defineProperty, V = Object.getOwnPropertyDescriptor, b = (t, e, r, s) => {
   for (var o = s > 1 ? void 0 : s ? V(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(e, r, o) : i(o)) || o);
-  return s && o && A(e, r, o), o;
+  return s && o && D(e, r, o), o;
 };
 const $ = "vibeFlagsTheme";
-let d = class extends u {
+let d = class extends g {
   constructor() {
     super(...arguments), this.open = !1, this.flags = {}, this.configs = [], this.darkMode = !0, this.onFlagChange = () => {
       this.syncFromStore();
@@ -301,7 +303,7 @@ let d = class extends u {
     this.darkMode = !this.darkMode, localStorage.setItem($, this.darkMode ? "dark" : "light"), this.applyTheme();
   }
   applyTheme() {
-    const t = this.darkMode ? D : B, e = new CSSStyleSheet();
+    const t = this.darkMode ? A : B, e = new CSSStyleSheet();
     e.replaceSync(t.cssText), this.shadowRoot.adoptedStyleSheets = [
       ...d.elementStyles.map((r) => r.styleSheet),
       e
@@ -310,12 +312,9 @@ let d = class extends u {
   syncFromStore() {
     this.configs = l.getConfig(), this.flags = l.getAll();
   }
-  toggleSidebar() {
+  toggle() {
     this.open = !this.open;
   }
-  closeSidebar() {
-    this.open = !1;
-  }
   onToggle(t) {
     const e = this.flags[t];
     l.set(t, !e);
@@ -365,7 +364,7 @@ let d = class extends u {
     `;
   }
   renderSelectFlag(t) {
-    if (t.type !== "select") return y;
+    if (t.type !== "select") return x;
     const e = this.flags[t.key];
     return a`
       <div class="flag-item">
@@ -394,15 +393,13 @@ let d = class extends u {
   }
   render() {
     return a`
-      ${this.open ? y : a`
-        <button class="fab" @click=${this.toggleSidebar} aria-label="Toggle feature flags">
+      ${this.open ? x : a`
+        <button class="fab" @click=${this.toggle} aria-label="Toggle feature flags">
           ${this.renderFlagIcon()}
         </button>
       `}
 
-      <div class="backdrop ${this.open ? "open" : ""}" @click=${this.closeSidebar}></div>
-
-      <div class="sidebar ${this.open ? "open" : ""}">
+      <div class="card ${this.open ? "open" : ""}">
         <div class="header">
           <h2>
             ${this.renderFlagIcon()}
@@ -413,7 +410,7 @@ let d = class extends u {
             <button class="icon-btn" @click=${this.toggleTheme} aria-label="Toggle theme" title="${this.darkMode ? "Switch to light theme" : "Switch to dark theme"}">
               ${this.darkMode ? this.renderSunIcon() : this.renderMoonIcon()}
             </button>
-            <button class="icon-btn" @click=${this.closeSidebar} aria-label="Close">
+            <button class="icon-btn" @click=${this.toggle} aria-label="Close">
               ${this.renderCloseIcon()}
             </button>
           </div>
@@ -435,7 +432,7 @@ let d = class extends u {
   }
 };
 d.styles = [
-  S`
+  k`
       * {
         box-sizing: border-box;
         margin: 0;
@@ -444,15 +441,13 @@ d.styles = [
 
       .fab {
         position: fixed;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
+        right: 16px;
+        bottom: 16px;
         z-index: 99999;
-        width: 40px;
-        height: 44px;
+        width: 42px;
+        height: 42px;
         border: 1px solid var(--vf-border);
-        border-right: none;
-        border-radius: var(--vf-radius-lg) 0 0 var(--vf-radius-lg);
+        border-radius: 12px;
         background: var(--vf-bg);
         color: var(--vf-text);
         cursor: pointer;
@@ -465,94 +460,80 @@ d.styles = [
       }
 
       .fab:hover {
-        width: 46px;
         background: var(--vf-bg-muted);
+        box-shadow: var(--vf-shadow-xl);
+        transform: translateY(-1px);
       }
 
       .fab svg {
-        width: 20px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
         flex-shrink: 0;
       }
 
-      .backdrop {
+      .card {
         position: fixed;
-        inset: 0;
-        z-index: 100000;
-        background: rgba(0, 0, 0, 0.4);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        pointer-events: none;
-      }
-
-      .backdrop.open {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      .sidebar {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
+        right: 16px;
+        bottom: 16px;
         z-index: 100001;
-        width: 340px;
-        max-width: 90vw;
+        width: 300px;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 32px);
         background: var(--vf-bg);
-        border-left: 1px solid var(--vf-border);
+        border: 1px solid var(--vf-border);
+        border-radius: 14px;
         box-shadow: var(--vf-shadow-xl);
-        transform: translateX(100%);
-        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        display: flex;
-        flex-direction: column;
         font-family: var(--vf-font);
         color: var(--vf-text);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        opacity: 0;
+        transform: translateY(8px) scale(0.96);
+        pointer-events: none;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      .sidebar.open {
-        transform: translateX(0);
+      .card.open {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
       }
 
       .header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px 20px;
+        padding: 12px 14px;
         border-bottom: 1px solid var(--vf-border);
         flex-shrink: 0;
       }
 
-      .header-left {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
       .header h2 {
-        font-size: 16px;
+        font-size: 13px;
         font-weight: 600;
-        letter-spacing: -0.025em;
+        letter-spacing: -0.01em;
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 7px;
       }
 
       .header h2 svg {
-        width: 18px;
-        height: 18px;
+        width: 15px;
+        height: 15px;
         color: var(--vf-accent);
       }
 
       .header-actions {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 2px;
       }
 
       .badge {
-        font-size: 11px;
+        font-size: 10px;
         font-weight: 500;
-        padding: 2px 7px;
+        padding: 1px 6px;
         border-radius: 9999px;
         background: var(--vf-bg-muted);
         color: var(--vf-text-muted);
@@ -560,8 +541,8 @@ d.styles = [
       }
 
       .icon-btn {
-        width: 32px;
-        height: 32px;
+        width: 28px;
+        height: 28px;
         border: none;
         border-radius: var(--vf-radius);
         background: transparent;
@@ -579,18 +560,17 @@ d.styles = [
       }
 
       .icon-btn svg {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
       }
 
       .flags {
-        flex: 1;
         overflow-y: auto;
-        padding: 8px 0;
+        flex: 1;
       }
 
       .flag-item {
-        padding: 12px 20px;
+        padding: 10px 14px;
         transition: background 0.1s ease;
       }
 
@@ -603,13 +583,13 @@ d.styles = [
       }
 
       .flag-label {
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 500;
-        margin-bottom: 2px;
+        margin-bottom: 1px;
       }
 
       .flag-key {
-        font-size: 11px;
+        font-size: 10px;
         color: var(--vf-text-muted);
         font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas,
           monospace;
@@ -619,7 +599,7 @@ d.styles = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 10px;
       }
 
       .flag-info {
@@ -630,8 +610,8 @@ d.styles = [
       /* Toggle switch */
       .toggle {
         position: relative;
-        width: 40px;
-        height: 22px;
+        width: 36px;
+        height: 20px;
         flex-shrink: 0;
       }
 
@@ -645,7 +625,7 @@ d.styles = [
       .toggle-track {
         position: absolute;
         inset: 0;
-        border-radius: 11px;
+        border-radius: 10px;
         background: var(--vf-border);
         cursor: pointer;
         transition: background 0.2s ease;
@@ -659,8 +639,8 @@ d.styles = [
         position: absolute;
         top: 2px;
         left: 2px;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         border-radius: 50%;
         background: white;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
@@ -669,7 +649,7 @@ d.styles = [
       }
 
       .toggle input:checked ~ .toggle-thumb {
-        transform: translateX(18px);
+        transform: translateX(16px);
       }
 
       /* Select dropdown */
@@ -681,16 +661,16 @@ d.styles = [
       .select {
         appearance: none;
         -webkit-appearance: none;
-        font-size: 13px;
+        font-size: 12px;
         font-family: var(--vf-font);
-        padding: 6px 30px 6px 10px;
+        padding: 5px 26px 5px 8px;
         border: 1px solid var(--vf-border);
         border-radius: var(--vf-radius);
         background: var(--vf-bg);
         color: var(--vf-text);
         cursor: pointer;
         outline: none;
-        min-width: 100px;
+        min-width: 80px;
         transition: border-color 0.15s ease;
       }
 
@@ -705,7 +685,7 @@ d.styles = [
 
       .select-chevron {
         position: absolute;
-        right: 8px;
+        right: 6px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
@@ -713,21 +693,21 @@ d.styles = [
       }
 
       .select-chevron svg {
-        width: 14px;
-        height: 14px;
+        width: 12px;
+        height: 12px;
       }
 
       /* Footer */
       .footer {
-        padding: 12px 20px;
+        padding: 10px 14px;
         border-top: 1px solid var(--vf-border);
         flex-shrink: 0;
       }
 
       .reset-btn {
         width: 100%;
-        padding: 8px 16px;
-        font-size: 13px;
+        padding: 6px 12px;
+        font-size: 12px;
         font-weight: 500;
         font-family: var(--vf-font);
         border: 1px solid var(--vf-border);
@@ -744,32 +724,32 @@ d.styles = [
       }
 
       .empty {
-        padding: 40px 20px;
+        padding: 24px 14px;
         text-align: center;
         color: var(--vf-text-muted);
-        font-size: 13px;
+        font-size: 12px;
       }
     `
 ];
-x([
-  c()
+b([
+  v()
 ], d.prototype, "open", 2);
-x([
-  c()
+b([
+  v()
 ], d.prototype, "flags", 2);
-x([
-  c()
+b([
+  v()
 ], d.prototype, "configs", 2);
-x([
-  c()
+b([
+  v()
 ], d.prototype, "darkMode", 2);
-d = x([
-  b("vibe-toolbar")
+d = b([
+  h("vibe-toolbar")
 ], d);
 export {
   p as VibeFlagBoolean,
   m as VibeFlagOption,
-  v as VibeFlagSelect,
+  y as VibeFlagSelect,
   F as VibeFlags,
   d as VibeToolbar,
   l as flagStore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe-flags/core",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/vibe-flags.js",
   "module": "./dist/vibe-flags.js",