@vibe-flags/core 0.1.4 → 0.1.6

package/dist/vibe-flags.js

@@ -1,23 +1,10 @@
-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, o) => {
-  for (var s = o > 1 ? void 0 : o ? M(e, r) : e, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (s = i(s) || s);
-  return s;
-};
-let F = class extends g {
-  render() {
-    return a`<slot></slot>`;
-  }
-};
-F = O([
-  h("vibe-flags")
-], F);
+import { LitElement as y, nothing as u, html as a, css as k } from "lit";
+import { property as c, state as g, customElement as m } from "lit/decorators.js";
 const f = "vibe-flags:";
 function w(t) {
   return t.type === "boolean" ? !1 : t.options[0] || "";
 }
-class _ 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(f)) return;
@@ -32,8 +19,8 @@ class _ extends EventTarget {
   }
   register(e) {
     this.configs.set(e.key, e);
-    const r = this.readFromStorage(e.key);
-    this.state[e.key] = r ?? w(e), this.listening || (this.listening = !0, typeof window < "u" && window.addEventListener("storage", this.onStorageEvent)), this.dispatch(e.key);
+    const r = w(e), o = this.readFromStorage(e.key), s = o !== null && (e.type === "boolean" && typeof o == "boolean" || e.type === "select" && typeof o == "string" && e.options.includes(o));
+    this.state[e.key] = s ? o : 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();
@@ -90,17 +77,17 @@ class _ extends EventTarget {
     this.dispatchEvent(o), typeof window < "u" && window.dispatchEvent(new CustomEvent("vibe-flags-changed", { detail: r }));
   }
 }
-const l = new _();
-var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, u = (t, e, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? P(e, r) : e, n = t.length - 1, i; n >= 0; n--)
+const l = new $();
+var M = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? O(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && E(e, r, s), s;
+  return o && s && M(e, r, s), s;
 };
 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 g {
+let p = class extends y {
   constructor() {
     super(...arguments), this.name = "", this.description = "", this.value = "", this.isMatch = !1, this.onFlagChange = () => {
       this.evaluate();
@@ -130,30 +117,30 @@ let p = class extends g {
     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>` : x;
+    return this.isMatch ? a`<slot></slot>` : u;
   }
 };
-u([
+h([
   c({ type: String })
 ], p.prototype, "name", 2);
-u([
+h([
   c({ type: String })
 ], p.prototype, "description", 2);
-u([
+h([
   c({ type: String })
 ], p.prototype, "value", 2);
-u([
-  v()
+h([
+  g()
 ], p.prototype, "isMatch", 2);
-p = u([
-  h("vibe-flag-boolean")
+p = h([
+  m("vibe-flag-boolean")
 ], p);
-var T = Object.defineProperty, j = Object.getOwnPropertyDescriptor, S = (t, e, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? j(e, r) : e, n = t.length - 1, i; n >= 0; n--)
+var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, S = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? E(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && T(e, r, s), s;
+  return o && s && _(e, r, s), s;
 };
-let y = class extends g {
+let b = class extends y {
   constructor() {
     super(...arguments), this.name = "", this.description = "", this.onFlagChange = () => {
       this.syncOptions();
@@ -195,36 +182,39 @@ let y = class extends g {
 };
 S([
   c({ type: String })
-], y.prototype, "name", 2);
+], b.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, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(e, r) : e, n = t.length - 1, i; n >= 0; n--)
+], b.prototype, "description", 2);
+b = S([
+  m("vibe-flag-select")
+], b);
+var T = Object.defineProperty, I = Object.getOwnPropertyDescriptor, C = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? I(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && I(e, r, s), s;
+  return o && s && T(e, r, s), s;
 };
-let m = class extends g {
+let x = class extends y {
   constructor() {
     super(...arguments), this.value = "", this.active = !1;
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   render() {
-    return this.active ? a`<slot></slot>` : x;
+    return this.active ? a`<slot></slot>` : u;
   }
 };
 C([
   c({ type: String })
-], m.prototype, "value", 2);
+], x.prototype, "value", 2);
 C([
   c({ type: Boolean, reflect: !0 })
-], m.prototype, "active", 2);
-m = C([
-  h("vibe-flag-option")
-], m);
-const A = k`
+], x.prototype, "active", 2);
+x = C([
+  m("vibe-flag-option")
+], x);
+const j = k`
   :host {
     --vf-bg: #0a0a0a;
     --vf-bg-muted: #171717;
@@ -248,7 +238,7 @@ const A = k`
     --vf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
       0 8px 10px -6px rgba(0, 0, 0, 0.6);
   }
-`, B = k`
+`, P = k`
   :host {
     --vf-bg: #ffffff;
     --vf-bg-muted: #f5f5f5;
@@ -273,13 +263,13 @@ const A = k`
       0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }
 `;
-var D = Object.defineProperty, V = Object.getOwnPropertyDescriptor, b = (t, e, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? V(e, r) : e, n = t.length - 1, i; n >= 0; n--)
+var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, v = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? A(e, r) : e, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && D(e, r, s), s;
+  return o && s && z(e, r, s), s;
 };
-const $ = "vibeFlagsTheme";
-let d = class extends g {
+const F = "vibeFlagsTheme";
+let d = class extends y {
   constructor() {
     super(...arguments), this.open = !1, this.flags = {}, this.configs = [], this.darkMode = !0, this.onFlagChange = () => {
       this.syncFromStore();
@@ -293,14 +283,14 @@ let d = class extends g {
   }
   loadTheme() {
     if (typeof window > "u") return;
-    const t = localStorage.getItem($);
+    const t = localStorage.getItem(F);
     this.darkMode = t ? t === "dark" : !0, this.applyTheme();
   }
   toggleTheme() {
-    this.darkMode = !this.darkMode, localStorage.setItem($, this.darkMode ? "dark" : "light"), this.applyTheme();
+    this.darkMode = !this.darkMode, localStorage.setItem(F, this.darkMode ? "dark" : "light"), this.applyTheme();
   }
   applyTheme() {
-    const t = this.darkMode ? A : B, e = new CSSStyleSheet();
+    const t = this.darkMode ? j : P, e = new CSSStyleSheet();
     e.replaceSync(t.cssText), this.shadowRoot.adoptedStyleSheets = [
       ...d.elementStyles.map((r) => r.styleSheet),
       e
@@ -309,12 +299,9 @@ let d = class extends g {
   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);
@@ -364,7 +351,7 @@ let d = class extends g {
     `;
   }
   renderSelectFlag(t) {
-    if (t.type !== "select") return x;
+    if (t.type !== "select") return u;
     const e = this.flags[t.key];
     return a`
       <div class="flag-item">
@@ -393,15 +380,13 @@ let d = class extends g {
   }
   render() {
     return a`
-      ${this.open ? x : a`
-        <button class="fab" @click=${this.toggleSidebar} aria-label="Toggle feature flags">
+      ${this.open ? u : 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()}
@@ -412,7 +397,7 @@ let d = class extends g {
             <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>
@@ -443,15 +428,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;
@@ -464,94 +447,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);
@@ -559,8 +528,8 @@ d.styles = [
       }
 
       .icon-btn {
-        width: 32px;
-        height: 32px;
+        width: 28px;
+        height: 28px;
         border: none;
         border-radius: var(--vf-radius);
         background: transparent;
@@ -578,18 +547,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;
       }
 
@@ -602,13 +570,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;
@@ -618,7 +586,7 @@ d.styles = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 10px;
       }
 
       .flag-info {
@@ -629,8 +597,8 @@ d.styles = [
       /* Toggle switch */
       .toggle {
         position: relative;
-        width: 40px;
-        height: 22px;
+        width: 36px;
+        height: 20px;
         flex-shrink: 0;
       }
 
@@ -644,7 +612,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;
@@ -658,8 +626,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);
@@ -668,7 +636,7 @@ d.styles = [
       }
 
       .toggle input:checked ~ .toggle-thumb {
-        transform: translateX(18px);
+        transform: translateX(16px);
       }
 
       /* Select dropdown */
@@ -680,16 +648,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;
       }
 
@@ -704,7 +672,7 @@ d.styles = [
 
       .select-chevron {
         position: absolute;
-        right: 8px;
+        right: 6px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
@@ -712,21 +680,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);
@@ -743,33 +711,32 @@ d.styles = [
       }
 
       .empty {
-        padding: 40px 20px;
+        padding: 24px 14px;
         text-align: center;
         color: var(--vf-text-muted);
-        font-size: 13px;
+        font-size: 12px;
       }
     `
 ];
-b([
-  v()
+v([
+  g()
 ], d.prototype, "open", 2);
-b([
-  v()
+v([
+  g()
 ], d.prototype, "flags", 2);
-b([
-  v()
+v([
+  g()
 ], d.prototype, "configs", 2);
-b([
-  v()
+v([
+  g()
 ], d.prototype, "darkMode", 2);
-d = b([
-  h("vibe-toolbar")
+d = v([
+  m("vibe-toolbar")
 ], d);
 export {
   p as VibeFlagBoolean,
-  m as VibeFlagOption,
-  y as VibeFlagSelect,
-  F as VibeFlags,
+  x as VibeFlagOption,
+  b as VibeFlagSelect,
   d as VibeToolbar,
   l as flagStore
 };

package/package.json

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