@vibe-flags/core 0.1.4 → 0.1.5

package/dist/vibe-flags.js

@@ -1,9 +1,9 @@
 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;
+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 g {
   render() {
@@ -21,19 +21,19 @@ 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;
-      const r = e.key.slice(f.length), o = this.configs.get(r);
-      if (o)
+      const r = e.key.slice(f.length), s = this.configs.get(r);
+      if (s)
         try {
-          const s = e.newValue ? JSON.parse(e.newValue) : w(o);
-          this.state[r] = s, this.dispatch(r);
+          const o = e.newValue ? JSON.parse(e.newValue) : w(s);
+          this.state[r] = o, this.dispatch(r);
         } catch {
         }
     };
   }
   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), 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();
@@ -42,8 +42,8 @@ class _ extends EventTarget {
     return this.state[e];
   }
   set(e, r) {
-    const o = this.configs.get(e);
-    o && (o.type === "boolean" && typeof r != "boolean" || o.type === "select" && (typeof r != "string" || !o.options.includes(r)) || (this.state[e] = r, this.writeToStorage(e, r), this.dispatch(e)));
+    const s = this.configs.get(e);
+    s && (s.type === "boolean" && typeof r != "boolean" || s.type === "select" && (typeof r != "string" || !s.options.includes(r)) || (this.state[e] = r, this.writeToStorage(e, r), this.dispatch(e)));
   }
   getAll() {
     return { ...this.state };
@@ -83,18 +83,18 @@ class _ extends EventTarget {
       }
   }
   dispatch(e) {
-    const r = { key: e, state: this.getAll() }, o = new CustomEvent("vibe-flags-changed", {
+    const r = { key: e, state: this.getAll() }, s = new CustomEvent("vibe-flags-changed", {
       detail: r,
       bubbles: !0
     });
-    this.dispatchEvent(o), typeof window < "u" && window.dispatchEvent(new CustomEvent("vibe-flags-changed", { detail: r }));
+    this.dispatchEvent(s), 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--)
-    (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && E(e, r, s), s;
+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;
 };
 if (typeof document < "u" && !document.getElementById("vibe-flag-fouc")) {
   const t = document.createElement("style");
@@ -148,10 +148,10 @@ u([
 p = u([
   h("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--)
-    (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && T(e, r, s), 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 y = class extends g {
   constructor() {
@@ -202,15 +202,18 @@ S([
 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--)
-    (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && I(e, r, s), s;
+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 g {
   constructor() {
     super(...arguments), this.value = "", this.active = !1;
   }
+  firstUpdated() {
+    this.style.display = "contents";
+  }
   render() {
     return this.active ? a`<slot></slot>` : x;
   }
@@ -273,10 +276,10 @@ 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--)
-    (i = t[n]) && (s = (o ? i(e, r, s) : i(s)) || s);
-  return o && s && D(e, r, s), 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 && D(e, r, o), o;
 };
 const $ = "vibeFlagsTheme";
 let d = class extends g {
@@ -309,12 +312,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);
@@ -394,14 +394,12 @@ let d = class extends g {
   render() {
     return a`
       ${this.open ? x : a`
-        <button class="fab" @click=${this.toggleSidebar} aria-label="Toggle feature flags">
+        <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 +410,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 +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;
@@ -464,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);
@@ -559,8 +541,8 @@ d.styles = [
       }
 
       .icon-btn {
-        width: 32px;
-        height: 32px;
+        width: 28px;
+        height: 28px;
         border: none;
         border-radius: var(--vf-radius);
         background: transparent;
@@ -578,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;
       }
 
@@ -602,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;
@@ -618,7 +599,7 @@ d.styles = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 10px;
       }
 
       .flag-info {
@@ -629,8 +610,8 @@ d.styles = [
       /* Toggle switch */
       .toggle {
         position: relative;
-        width: 40px;
-        height: 22px;
+        width: 36px;
+        height: 20px;
         flex-shrink: 0;
       }
 
@@ -644,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;
@@ -658,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);
@@ -668,7 +649,7 @@ d.styles = [
       }
 
       .toggle input:checked ~ .toggle-thumb {
-        transform: translateX(18px);
+        transform: translateX(16px);
       }
 
       /* Select dropdown */
@@ -680,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;
       }
 
@@ -704,7 +685,7 @@ d.styles = [
 
       .select-chevron {
         position: absolute;
-        right: 8px;
+        right: 6px;
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
@@ -712,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);
@@ -743,10 +724,10 @@ d.styles = [
       }
 
       .empty {
-        padding: 40px 20px;
+        padding: 24px 14px;
         text-align: center;
         color: var(--vf-text-muted);
-        font-size: 13px;
+        font-size: 12px;
       }
     `
 ];

package/package.json

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