@vibe-flags/core 0.1.0 → 0.1.2

package/dist/vibe-flags.js

@@ -1,36 +1,39 @@
-import { LitElement as b, html as a, nothing as u, css as w } from "lit";
-import { customElement as x, property as f, state as h } from "lit/decorators.js";
-var m = Object.getOwnPropertyDescriptor, k = (r, e, t, s) => {
-  for (var o = s > 1 ? void 0 : s ? m(e, t) : e, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (o = n(o) || o);
-  return o;
+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, o) => {
+  for (var s = o > 1 ? void 0 : o ? O(e, r) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = n(s) || s);
+  return s;
 };
-let y = class extends b {
+let F = class extends u {
   render() {
     return a`<slot></slot>`;
   }
 };
-y = k([
-  x("vibe-flags")
-], y);
-const g = "vibe-flags:";
-class S extends EventTarget {
+F = _([
+  b("vibe-flags")
+], F);
+const h = "vibe-flags:";
+function k(t) {
+  return t.type === "boolean" ? !1 : t.options[0] || "";
+}
+class M extends EventTarget {
   constructor() {
     super(...arguments), this.configs = /* @__PURE__ */ new Map(), this.state = {}, this.listening = !1, this.onStorageEvent = (e) => {
-      if (!e.key?.startsWith(g)) return;
-      const t = e.key.slice(g.length);
-      if (this.configs.has(t))
+      if (!e.key?.startsWith(h)) return;
+      const r = e.key.slice(h.length), o = this.configs.get(r);
+      if (o)
         try {
-          const s = e.newValue ? JSON.parse(e.newValue) : this.configs.get(t).default;
-          this.state[t] = s, this.dispatch(t);
+          const s = e.newValue ? JSON.parse(e.newValue) : k(o);
+          this.state[r] = s, this.dispatch(r);
         } catch {
         }
     };
   }
   register(e) {
     this.configs.set(e.key, e);
-    const t = this.readFromStorage(e.key);
-    this.state[e.key] = t ?? e.default, this.listening || (this.listening = !0, typeof window < "u" && window.addEventListener("storage", this.onStorageEvent)), this.dispatch(e.key);
+    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);
   }
   unregister(e) {
     this.configs.delete(e), delete this.state[e], this.dispatch();
@@ -38,9 +41,9 @@ class S extends EventTarget {
   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)));
+  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)));
   }
   getAll() {
     return { ...this.state };
@@ -52,118 +55,201 @@ class S extends EventTarget {
     return this.configs.get(e);
   }
   reset() {
-    for (const [e, t] of this.configs)
-      this.state[e] = t.default, this.removeFromStorage(e);
+    for (const [e, r] of this.configs)
+      this.state[e] = k(r), this.removeFromStorage(e);
     this.dispatch();
   }
   readFromStorage(e) {
     if (typeof window > "u") return null;
     try {
-      const t = localStorage.getItem(g + e);
-      return t === null ? null : JSON.parse(t);
+      const r = localStorage.getItem(h + e);
+      return r === null ? null : JSON.parse(r);
     } catch {
       return null;
     }
   }
-  writeToStorage(e, t) {
+  writeToStorage(e, r) {
     if (!(typeof window > "u"))
       try {
-        localStorage.setItem(g + e, JSON.stringify(t));
+        localStorage.setItem(h + e, JSON.stringify(r));
       } catch {
       }
   }
   removeFromStorage(e) {
     if (!(typeof window > "u"))
       try {
-        localStorage.removeItem(g + e);
+        localStorage.removeItem(h + e);
       } catch {
       }
   }
   dispatch(e) {
-    const t = { key: e, state: this.getAll() }, s = new CustomEvent("vibe-flags-changed", {
-      detail: t,
+    const r = { key: e, state: this.getAll() }, o = new CustomEvent("vibe-flags-changed", {
+      detail: r,
       bubbles: !0
     });
-    this.dispatchEvent(s), typeof window < "u" && window.dispatchEvent(new CustomEvent("vibe-flags-changed", { detail: t }));
+    this.dispatchEvent(o), typeof window < "u" && window.dispatchEvent(new CustomEvent("vibe-flags-changed", { detail: r }));
   }
 }
-const p = new S();
-var C = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (r, e, t, s) => {
-  for (var o = s > 1 ? void 0 : s ? F(e, t) : e, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (o = (s ? n(e, t, o) : n(o)) || o);
-  return s && o && C(e, t, o), o;
+const l = new M();
+var E = Object.defineProperty, P = Object.getOwnPropertyDescriptor, g = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? P(e, r) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (o ? n(e, r, s) : n(s)) || s);
+  return o && s && E(e, r, s), s;
 };
-let l = class extends b {
+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{visibility:hidden}", document.head.appendChild(t);
+}
+let p = class extends u {
   constructor() {
-    super(...arguments), this.key = "", this.description = "", this.type = "boolean", this.value = "true", this.defaultValue = "", this.options = "", this.isMatch = !1, this.registered = !1, this.onFlagChange = () => {
+    super(...arguments), this.name = "", this.description = "", this.value = "", this.isMatch = !1, this.ready = !1, this.onFlagChange = () => {
       this.evaluate();
     };
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("vibe-flags-changed", this.onFlagChange), this.registerFlag(), this.evaluate();
+    super.connectedCallback(), window.addEventListener("vibe-flags-changed", this.onFlagChange), this.registerFlag();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), window.removeEventListener("vibe-flags-changed", this.onFlagChange);
   }
-  willUpdate(r) {
-    ["key", "description", "type", "defaultValue", "options"].some((t) => r.has(t)) && this.registerFlag();
+  willUpdate(t) {
+    (t.has("name") || t.has("description")) && this.registerFlag();
   }
   registerFlag() {
-    if (!this.key) return;
-    const r = this.type === "select" ? {
-      key: this.key,
-      type: "select",
-      default: this.defaultValue || this.parseOptions()[0] || "",
-      options: this.parseOptions(),
-      label: this.description || void 0
-    } : {
-      key: this.key,
+    this.name && (l.getConfigForKey(this.name) || l.register({
+      key: this.name,
       type: "boolean",
-      default: this.defaultValue ? this.defaultValue === "true" : !1,
       label: this.description || void 0
-    };
-    p.register(r), this.registered = !0, this.evaluate();
-  }
-  parseOptions() {
-    return this.options.split(",").map((r) => r.trim()).filter(Boolean);
+    }), this.evaluate());
   }
   evaluate() {
-    const r = p.get(this.key);
-    if (r === void 0) {
-      this.isMatch = !1;
-      return;
-    }
-    this.isMatch = String(r) === this.value;
+    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.visibility = "visible");
   }
   render() {
-    return this.isMatch ? a`<slot></slot>` : u;
+    return this.isMatch ? a`<slot></slot>` : y;
   }
 };
-d([
+g([
   f({ type: String })
-], l.prototype, "key", 2);
-d([
+], p.prototype, "name", 2);
+g([
   f({ type: String })
-], l.prototype, "description", 2);
-d([
+], p.prototype, "description", 2);
+g([
   f({ type: String })
-], l.prototype, "type", 2);
-d([
+], p.prototype, "value", 2);
+g([
+  c()
+], p.prototype, "isMatch", 2);
+g([
+  c()
+], p.prototype, "ready", 2);
+p = g([
+  b("vibe-flag-boolean")
+], p);
+var T = Object.defineProperty, j = Object.getOwnPropertyDescriptor, w = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? j(e, r) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (o ? n(e, r, s) : n(s)) || s);
+  return o && s && T(e, r, s), s;
+};
+let v = class extends u {
+  constructor() {
+    super(...arguments), this.name = "", this.description = "", this.ready = !1, 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);
+  }
+  willUpdate(t) {
+    (t.has("name") || t.has("description")) && this.registerFlag();
+  }
+  getOptions() {
+    return Array.from(this.querySelectorAll("vibe-flag-option"));
+  }
+  registerFlag() {
+    if (!this.name) return;
+    const t = this.getOptions().map((e) => e.value).filter(Boolean);
+    t.length !== 0 && (l.getConfigForKey(this.name) || l.register({
+      key: this.name,
+      type: "select",
+      options: t,
+      label: this.description || void 0
+    }), this.syncOptions());
+  }
+  syncOptions() {
+    const t = l.get(this.name);
+    for (const e of this.getOptions())
+      e.active = e.value === t;
+    this.ready || (this.ready = !0, this.style.visibility = "visible");
+  }
+  render() {
+    return a`<slot></slot>`;
+  }
+};
+w([
   f({ type: String })
-], l.prototype, "value", 2);
-d([
-  f({ type: String, attribute: "default" })
-], l.prototype, "defaultValue", 2);
-d([
+], v.prototype, "name", 2);
+w([
   f({ type: String })
-], l.prototype, "options", 2);
-d([
-  h()
-], l.prototype, "isMatch", 2);
-l = d([
-  x("vibe-flag")
-], l);
-const $ = w`
+], v.prototype, "description", 2);
+w([
+  c()
+], v.prototype, "ready", 2);
+v = w([
+  b("vibe-flag-select")
+], v);
+var I = Object.defineProperty, z = Object.getOwnPropertyDescriptor, C = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? z(e, r) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (o ? n(e, r, s) : n(s)) || s);
+  return o && s && I(e, r, s), s;
+};
+let m = class extends u {
+  constructor() {
+    super(...arguments), this.value = "", this.active = !1;
+  }
+  render() {
+    return this.active ? a`<slot></slot>` : y;
+  }
+};
+C([
+  f({ type: String })
+], m.prototype, "value", 2);
+C([
+  c()
+], m.prototype, "active", 2);
+m = C([
+  b("vibe-flag-option")
+], m);
+const D = S`
+  :host {
+    --vf-bg: #0a0a0a;
+    --vf-bg-muted: #171717;
+    --vf-bg-hover: #262626;
+    --vf-border: #2e2e2e;
+    --vf-text: #fafafa;
+    --vf-text-muted: #a3a3a3;
+    --vf-primary: #fafafa;
+    --vf-primary-fg: #0a0a0a;
+    --vf-accent: #818cf8;
+    --vf-accent-fg: #ffffff;
+    --vf-destructive: #ef4444;
+    --vf-radius: 6px;
+    --vf-radius-lg: 8px;
+    --vf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    --vf-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
+      0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --vf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
+      0 4px 6px -4px rgba(0, 0, 0, 0.5);
+    --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`
   :host {
     --vf-bg: #ffffff;
     --vf-bg-muted: #f5f5f5;
@@ -188,25 +274,41 @@ const $ = w`
       0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }
 `;
-var O = Object.defineProperty, E = Object.getOwnPropertyDescriptor, v = (r, e, t, s) => {
-  for (var o = s > 1 ? void 0 : s ? E(e, t) : e, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (o = (s ? n(e, t, o) : n(o)) || o);
-  return s && o && O(e, t, o), o;
+var A = Object.defineProperty, V = Object.getOwnPropertyDescriptor, x = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? V(e, r) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (s = (o ? n(e, r, s) : n(s)) || s);
+  return o && s && A(e, r, s), s;
 };
-let c = class extends b {
+const $ = "vibeFlagsTheme";
+let d = class extends u {
   constructor() {
-    super(...arguments), this.open = !1, this.flags = {}, this.configs = [], this.onFlagChange = () => {
+    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();
+    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 t = localStorage.getItem($);
+    this.darkMode = t ? t === "dark" : !0, this.applyTheme();
+  }
+  toggleTheme() {
+    this.darkMode = !this.darkMode, localStorage.setItem($, this.darkMode ? "dark" : "light"), this.applyTheme();
+  }
+  applyTheme() {
+    const t = this.darkMode ? D : B, e = new CSSStyleSheet();
+    e.replaceSync(t.cssText), this.shadowRoot.adoptedStyleSheets = [
+      ...d.elementStyles.map((r) => r.styleSheet),
+      e
+    ];
+  }
   syncFromStore() {
-    this.configs = p.getConfig(), this.flags = p.getAll();
+    this.configs = l.getConfig(), this.flags = l.getAll();
   }
   toggleSidebar() {
     this.open = !this.open;
@@ -214,16 +316,16 @@ let c = class extends b {
   closeSidebar() {
     this.open = !1;
   }
-  onToggle(r) {
-    const e = this.flags[r];
-    p.set(r, !e);
+  onToggle(t) {
+    const e = this.flags[t];
+    l.set(t, !e);
   }
-  onSelect(r, e) {
-    const t = e.target;
-    p.set(r, t.value);
+  onSelect(t, e) {
+    const r = e.target;
+    l.set(t, r.value);
   }
   onReset() {
-    p.reset();
+    l.reset();
   }
   renderFlagIcon() {
     return a`<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>`;
@@ -234,20 +336,26 @@ let c = class extends b {
   renderChevronDown() {
     return a`<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>`;
   }
-  renderBooleanFlag(r) {
-    const e = this.flags[r.key] === !0;
+  renderSunIcon() {
+    return a`<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 a`<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(t) {
+    const e = this.flags[t.key] === !0;
     return a`
       <div class="flag-item">
         <div class="flag-row">
           <div class="flag-info">
-            <div class="flag-label">${r.label || r.key}</div>
-            <div class="flag-key">${r.key}</div>
+            <div class="flag-label">${t.label || t.key}</div>
+            <div class="flag-key">${t.key}</div>
           </div>
           <label class="toggle">
             <input
               type="checkbox"
               .checked=${e}
-              @change=${() => this.onToggle(r.key)}
+              @change=${() => this.onToggle(t.key)}
             />
             <span class="toggle-track"></span>
             <span class="toggle-thumb"></span>
@@ -256,25 +364,25 @@ let c = class extends b {
       </div>
     `;
   }
-  renderSelectFlag(r) {
-    if (r.type !== "select") return u;
-    const e = this.flags[r.key];
+  renderSelectFlag(t) {
+    if (t.type !== "select") return y;
+    const e = this.flags[t.key];
     return a`
       <div class="flag-item">
         <div class="flag-row">
           <div class="flag-info">
-            <div class="flag-label">${r.label || r.key}</div>
-            <div class="flag-key">${r.key}</div>
+            <div class="flag-label">${t.label || t.key}</div>
+            <div class="flag-key">${t.key}</div>
           </div>
           <div class="select-wrapper">
             <select
               class="select"
               .value=${e}
-              @change=${(t) => this.onSelect(r.key, t)}
+              @change=${(r) => this.onSelect(t.key, r)}
             >
-              ${r.options.map(
-      (t) => a`<option value=${t} ?selected=${t === e}>
-                    ${t}
+              ${t.options.map(
+      (r) => a`<option value=${r} ?selected=${r === e}>
+                    ${r}
                   </option>`
     )}
             </select>
@@ -286,7 +394,7 @@ let c = class extends b {
   }
   render() {
     return a`
-      ${this.open ? u : a`
+      ${this.open ? y : a`
         <button class="fab" @click=${this.toggleSidebar} aria-label="Toggle feature flags">
           ${this.renderFlagIcon()}
         </button>
@@ -301,14 +409,19 @@ let c = class extends b {
             VibeFlags
             <span class="badge">${this.configs.length}</span>
           </h2>
-          <button class="close-btn" @click=${this.closeSidebar} aria-label="Close">
-            ${this.renderCloseIcon()}
-          </button>
+          <div class="header-actions">
+            <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">
+              ${this.renderCloseIcon()}
+            </button>
+          </div>
         </div>
 
         <div class="flags">
           ${this.configs.length === 0 ? a`<div class="empty">No flags configured</div>` : this.configs.map(
-      (r) => r.type === "boolean" ? this.renderBooleanFlag(r) : this.renderSelectFlag(r)
+      (t) => t.type === "boolean" ? this.renderBooleanFlag(t) : this.renderSelectFlag(t)
     )}
         </div>
 
@@ -321,9 +434,8 @@ let c = class extends b {
     `;
   }
 };
-c.styles = [
-  $,
-  w`
+d.styles = [
+  S`
       * {
         box-sizing: border-box;
         margin: 0;
@@ -410,6 +522,12 @@ c.styles = [
         flex-shrink: 0;
       }
 
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
       .header h2 {
         font-size: 16px;
         font-weight: 600;
@@ -425,6 +543,12 @@ c.styles = [
         color: var(--vf-accent);
       }
 
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
       .badge {
         font-size: 11px;
         font-weight: 500;
@@ -435,7 +559,7 @@ c.styles = [
         border: 1px solid var(--vf-border);
       }
 
-      .close-btn {
+      .icon-btn {
         width: 32px;
         height: 32px;
         border: none;
@@ -449,12 +573,12 @@ c.styles = [
         transition: all 0.15s ease;
       }
 
-      .close-btn:hover {
+      .icon-btn:hover {
         background: var(--vf-bg-muted);
         color: var(--vf-text);
       }
 
-      .close-btn svg {
+      .icon-btn svg {
         width: 16px;
         height: 16px;
       }
@@ -627,21 +751,26 @@ c.styles = [
       }
     `
 ];
-v([
-  h()
-], c.prototype, "open", 2);
-v([
-  h()
-], c.prototype, "flags", 2);
-v([
-  h()
-], c.prototype, "configs", 2);
-c = v([
-  x("vibe-toolbar")
-], c);
+x([
+  c()
+], d.prototype, "open", 2);
+x([
+  c()
+], d.prototype, "flags", 2);
+x([
+  c()
+], d.prototype, "configs", 2);
+x([
+  c()
+], d.prototype, "darkMode", 2);
+d = x([
+  b("vibe-toolbar")
+], d);
 export {
-  l as VibeFlag,
-  y as VibeFlags,
-  c as VibeToolbar,
-  p as flagStore
+  p as VibeFlagBoolean,
+  m as VibeFlagOption,
+  v 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.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/vibe-flags.js",
   "module": "./dist/vibe-flags.js",