@vibe-flags/core 0.1.0

package/dist/vibe-flags.js

@@ -0,0 +1,647 @@
+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;
+};
+let y = class extends b {
+  render() {
+    return a`<slot></slot>`;
+  }
+};
+y = k([
+  x("vibe-flags")
+], y);
+const g = "vibe-flags:";
+class S 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))
+        try {
+          const s = e.newValue ? JSON.parse(e.newValue) : this.configs.get(t).default;
+          this.state[t] = s, this.dispatch(t);
+        } 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);
+  }
+  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] = t.default, 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);
+    } catch {
+      return null;
+    }
+  }
+  writeToStorage(e, t) {
+    if (!(typeof window > "u"))
+      try {
+        localStorage.setItem(g + e, JSON.stringify(t));
+      } catch {
+      }
+  }
+  removeFromStorage(e) {
+    if (!(typeof window > "u"))
+      try {
+        localStorage.removeItem(g + 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 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;
+};
+let l = class extends b {
+  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 = () => {
+      this.evaluate();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("vibe-flags-changed", this.onFlagChange), this.registerFlag(), this.evaluate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("vibe-flags-changed", this.onFlagChange);
+  }
+  willUpdate(r) {
+    ["key", "description", "type", "defaultValue", "options"].some((t) => r.has(t)) && 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,
+      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);
+  }
+  evaluate() {
+    const r = p.get(this.key);
+    if (r === void 0) {
+      this.isMatch = !1;
+      return;
+    }
+    this.isMatch = String(r) === this.value;
+  }
+  render() {
+    return this.isMatch ? a`<slot></slot>` : u;
+  }
+};
+d([
+  f({ type: String })
+], l.prototype, "key", 2);
+d([
+  f({ type: String })
+], l.prototype, "description", 2);
+d([
+  f({ type: String })
+], l.prototype, "type", 2);
+d([
+  f({ type: String })
+], l.prototype, "value", 2);
+d([
+  f({ type: String, attribute: "default" })
+], l.prototype, "defaultValue", 2);
+d([
+  f({ type: String })
+], l.prototype, "options", 2);
+d([
+  h()
+], l.prototype, "isMatch", 2);
+l = d([
+  x("vibe-flag")
+], l);
+const $ = w`
+  :host {
+    --vf-bg: #ffffff;
+    --vf-bg-muted: #f5f5f5;
+    --vf-bg-hover: #f0f0f0;
+    --vf-border: #e5e5e5;
+    --vf-text: #0a0a0a;
+    --vf-text-muted: #737373;
+    --vf-primary: #171717;
+    --vf-primary-fg: #fafafa;
+    --vf-accent: #6366f1;
+    --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.1),
+      0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    --vf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --vf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      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;
+};
+let c = class extends b {
+  constructor() {
+    super(...arguments), this.open = !1, this.flags = {}, this.configs = [], this.onFlagChange = () => {
+      this.syncFromStore();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("vibe-flags-changed", this.onFlagChange), this.syncFromStore();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("vibe-flags-changed", this.onFlagChange);
+  }
+  syncFromStore() {
+    this.configs = p.getConfig(), this.flags = p.getAll();
+  }
+  toggleSidebar() {
+    this.open = !this.open;
+  }
+  closeSidebar() {
+    this.open = !1;
+  }
+  onToggle(r) {
+    const e = this.flags[r];
+    p.set(r, !e);
+  }
+  onSelect(r, e) {
+    const t = e.target;
+    p.set(r, t.value);
+  }
+  onReset() {
+    p.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>`;
+  }
+  renderCloseIcon() {
+    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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+  }
+  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;
+    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>
+          <label class="toggle">
+            <input
+              type="checkbox"
+              .checked=${e}
+              @change=${() => this.onToggle(r.key)}
+            />
+            <span class="toggle-track"></span>
+            <span class="toggle-thumb"></span>
+          </label>
+        </div>
+      </div>
+    `;
+  }
+  renderSelectFlag(r) {
+    if (r.type !== "select") return u;
+    const e = this.flags[r.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>
+          <div class="select-wrapper">
+            <select
+              class="select"
+              .value=${e}
+              @change=${(t) => this.onSelect(r.key, t)}
+            >
+              ${r.options.map(
+      (t) => a`<option value=${t} ?selected=${t === e}>
+                    ${t}
+                  </option>`
+    )}
+            </select>
+            <span class="select-chevron">${this.renderChevronDown()}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return a`
+      ${this.open ? u : a`
+        <button class="fab" @click=${this.toggleSidebar} 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="header">
+          <h2>
+            ${this.renderFlagIcon()}
+            VibeFlags
+            <span class="badge">${this.configs.length}</span>
+          </h2>
+          <button class="close-btn" @click=${this.closeSidebar} aria-label="Close">
+            ${this.renderCloseIcon()}
+          </button>
+        </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)
+    )}
+        </div>
+
+        <div class="footer">
+          <button class="reset-btn" @click=${this.onReset}>
+            Reset all to defaults
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+c.styles = [
+  $,
+  w`
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      .fab {
+        position: fixed;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 99999;
+        width: 40px;
+        height: 44px;
+        border: 1px solid var(--vf-border);
+        border-right: none;
+        border-radius: var(--vf-radius-lg) 0 0 var(--vf-radius-lg);
+        background: var(--vf-bg);
+        color: var(--vf-text);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--vf-shadow-lg);
+        transition: all 0.2s ease;
+        font-family: var(--vf-font);
+      }
+
+      .fab:hover {
+        width: 46px;
+        background: var(--vf-bg-muted);
+      }
+
+      .fab svg {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+
+      .backdrop {
+        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;
+        z-index: 100001;
+        width: 340px;
+        max-width: 90vw;
+        background: var(--vf-bg);
+        border-left: 1px solid var(--vf-border);
+        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);
+      }
+
+      .sidebar.open {
+        transform: translateX(0);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--vf-border);
+        flex-shrink: 0;
+      }
+
+      .header h2 {
+        font-size: 16px;
+        font-weight: 600;
+        letter-spacing: -0.025em;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .header h2 svg {
+        width: 18px;
+        height: 18px;
+        color: var(--vf-accent);
+      }
+
+      .badge {
+        font-size: 11px;
+        font-weight: 500;
+        padding: 2px 7px;
+        border-radius: 9999px;
+        background: var(--vf-bg-muted);
+        color: var(--vf-text-muted);
+        border: 1px solid var(--vf-border);
+      }
+
+      .close-btn {
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: var(--vf-radius);
+        background: transparent;
+        color: var(--vf-text-muted);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s ease;
+      }
+
+      .close-btn:hover {
+        background: var(--vf-bg-muted);
+        color: var(--vf-text);
+      }
+
+      .close-btn svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .flags {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px 0;
+      }
+
+      .flag-item {
+        padding: 12px 20px;
+        transition: background 0.1s ease;
+      }
+
+      .flag-item:hover {
+        background: var(--vf-bg-muted);
+      }
+
+      .flag-item + .flag-item {
+        border-top: 1px solid var(--vf-border);
+      }
+
+      .flag-label {
+        font-size: 13px;
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+
+      .flag-key {
+        font-size: 11px;
+        color: var(--vf-text-muted);
+        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas,
+          monospace;
+      }
+
+      .flag-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .flag-info {
+        min-width: 0;
+        flex: 1;
+      }
+
+      /* Toggle switch */
+      .toggle {
+        position: relative;
+        width: 40px;
+        height: 22px;
+        flex-shrink: 0;
+      }
+
+      .toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+        position: absolute;
+      }
+
+      .toggle-track {
+        position: absolute;
+        inset: 0;
+        border-radius: 11px;
+        background: var(--vf-border);
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .toggle input:checked + .toggle-track {
+        background: var(--vf-primary);
+      }
+
+      .toggle-thumb {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: white;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        transition: transform 0.2s ease;
+        pointer-events: none;
+      }
+
+      .toggle input:checked ~ .toggle-thumb {
+        transform: translateX(18px);
+      }
+
+      /* Select dropdown */
+      .select-wrapper {
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .select {
+        appearance: none;
+        -webkit-appearance: none;
+        font-size: 13px;
+        font-family: var(--vf-font);
+        padding: 6px 30px 6px 10px;
+        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;
+        transition: border-color 0.15s ease;
+      }
+
+      .select:hover {
+        border-color: var(--vf-text-muted);
+      }
+
+      .select:focus {
+        border-color: var(--vf-accent);
+        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+      }
+
+      .select-chevron {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        color: var(--vf-text-muted);
+      }
+
+      .select-chevron svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      /* Footer */
+      .footer {
+        padding: 12px 20px;
+        border-top: 1px solid var(--vf-border);
+        flex-shrink: 0;
+      }
+
+      .reset-btn {
+        width: 100%;
+        padding: 8px 16px;
+        font-size: 13px;
+        font-weight: 500;
+        font-family: var(--vf-font);
+        border: 1px solid var(--vf-border);
+        border-radius: var(--vf-radius);
+        background: var(--vf-bg);
+        color: var(--vf-text);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .reset-btn:hover {
+        background: var(--vf-bg-muted);
+        border-color: var(--vf-text-muted);
+      }
+
+      .empty {
+        padding: 40px 20px;
+        text-align: center;
+        color: var(--vf-text-muted);
+        font-size: 13px;
+      }
+    `
+];
+v([
+  h()
+], c.prototype, "open", 2);
+v([
+  h()
+], c.prototype, "flags", 2);
+v([
+  h()
+], c.prototype, "configs", 2);
+c = v([
+  x("vibe-toolbar")
+], c);
+export {
+  l as VibeFlag,
+  y as VibeFlags,
+  c as VibeToolbar,
+  p as flagStore
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@vibe-flags/core",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/vibe-flags.js",
+  "module": "./dist/vibe-flags.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vibe-flags.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./cdn": "./dist/vibe-flags.cdn.mjs",
+    "./cdn/iife": "./dist/vibe-flags.cdn.js"
+  },
+  "unpkg": "./dist/vibe-flags.cdn.js",
+  "jsdelivr": "./dist/vibe-flags.cdn.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": true,
+  "peerDependencies": {
+    "lit": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/testing": "^4.0.0",
+    "jsdom": "^29.0.1",
+    "lit": "^3.2.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && vite build --config vite.cdn.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build"
+  }
+}