@localflag/react 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,8 @@
 # @localflag/react
 
-Type-safe feature flags for React with built-in DevTools.
+Type-safe feature flags for React with built-in LocalFlagDevTools.
+
+[Website](https://localflag.io) · [Documentation](https://docs.localflag.io) · [Demo](https://demo.localflag.io) · [GitHub](https://github.com/localflag/localflag)
 
 ## Installation
 
@@ -11,7 +13,7 @@ npm install @localflag/react
 ## Quick Start
 
 ```tsx
-import { FeatureFlagProvider, useFeatureFlag, DevTools } from '@localflag/react';
+import { FeatureFlagProvider, useFeatureFlag, LocalFlagDevTools } from '@localflag/react';
 
 // 1. Define your flags
 const defaultFlags = {
@@ -28,7 +30,7 @@ function App() {
   return (
     <FeatureFlagProvider<AppFlags> defaultFlags={defaultFlags}>
       <MyApp />
-      <DevTools /> {/* Optional: adds a floating panel to toggle flags */}
+      <LocalFlagDevTools /> {/* Optional: adds a floating panel to toggle flags */}
     </FeatureFlagProvider>
   );
 }
@@ -119,14 +121,14 @@ import { FeatureFlag } from '@localflag/react';
 </FeatureFlag>
 ```
 
-#### `DevTools`
+#### `LocalFlagDevTools`
 
 A floating panel for toggling flags during development.
 
 ```tsx
-import { DevTools } from '@localflag/react';
+import { LocalFlagDevTools } from '@localflag/react';
 
-<DevTools
+<LocalFlagDevTools
   position="bottom-right"  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
   defaultOpen={false}      // Start expanded or collapsed
 />
@@ -151,11 +153,49 @@ const version = useFeatureFlagValue<AppFlags>('apiVersion');
 // TypeScript knows this is 'v2' (string literal type)
 ```
 
+### Config File Pattern
+
+For larger projects, you can use `defineFlags` to create a centralized config file:
+
+```ts
+// flags.config.ts
+import { defineFlags } from '@localflag/react';
+
+export const flags = defineFlags({
+  darkMode: false,
+  newCheckout: true,
+  maxRetries: 3,
+});
+
+export type AppFlags = typeof flags;
+```
+
+Then import it in your app:
+
+```tsx
+// App.tsx
+import { flags, AppFlags } from './flags.config';
+import { FeatureFlagProvider, useFeatureFlag } from '@localflag/react';
+
+function App() {
+  return (
+    <FeatureFlagProvider<AppFlags> defaultFlags={flags}>
+      <MyApp />
+    </FeatureFlagProvider>
+  );
+}
+```
+
+Benefits:
+- All flags managed in one place
+- Easy to export and share types across your app
+- Enables future tooling integration
+
 ## Persistence
 
 By default, flag overrides are persisted to `localStorage`. This means:
 
-- Flags you toggle in DevTools persist across page reloads
+- Flags you toggle in LocalFlagDevTools persist across page reloads
 - Each user can have their own overrides for testing
 - Call `resetFlags()` to clear all overrides and return to defaults
 

package/dist/index.d.ts

@@ -4,6 +4,9 @@ type FlagValue = boolean | string | number;
 interface FeatureFlags {
     [key: string]: FlagValue;
 }
+interface FlagDescriptions {
+    [key: string]: string;
+}
 interface FeatureFlagContextValue<T extends FeatureFlags = FeatureFlags> {
     flags: T;
     isEnabled: (flagName: keyof T) => boolean;
@@ -14,11 +17,12 @@ interface FeatureFlagContextValue<T extends FeatureFlags = FeatureFlags> {
 interface FeatureFlagProviderProps<T extends FeatureFlags = FeatureFlags> {
     children: React.ReactNode;
     defaultFlags: T;
+    descriptions?: Partial<Record<keyof T, string>>;
     storageKey?: string;
     persistOverrides?: boolean;
 }
 
-declare function FeatureFlagProvider<T extends FeatureFlags>({ children, defaultFlags, storageKey, persistOverrides, }: FeatureFlagProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function FeatureFlagProvider<T extends FeatureFlags>({ children, defaultFlags, descriptions, storageKey, persistOverrides, }: FeatureFlagProviderProps<T>): react_jsx_runtime.JSX.Element;
 declare function useFeatureFlagContext<T extends FeatureFlags = FeatureFlags>(): FeatureFlagContextValue<T>;
 
 /**
@@ -49,10 +53,73 @@ declare function FeatureFlag<T extends FeatureFlags = FeatureFlags>({ flag, chil
     fallback?: React.ReactNode;
 }): React.ReactNode;
 
+type Position = "bottom-right" | "bottom-left" | "top-right" | "top-left";
 interface DevToolsProps {
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    position?: Position;
     defaultOpen?: boolean;
+    /**
+     * Keyboard shortcut to toggle the DevTools panel.
+     * Set to `false` to disable the shortcut.
+     * @default "mod+shift+f" (Cmd+Shift+F on Mac, Ctrl+Shift+F on Windows/Linux)
+     */
+    shortcut?: string | false;
 }
-declare function DevTools({ position, defaultOpen, }: DevToolsProps): react_jsx_runtime.JSX.Element | null;
+declare function LocalFlagDevTools({ position, defaultOpen, shortcut, }: DevToolsProps): react_jsx_runtime.JSX.Element | null;
+/** @deprecated Use `LocalFlagDevTools` instead */
+declare const DevTools: typeof LocalFlagDevTools;
+
+/**
+ * Helper function to define feature flags with type safety.
+ * This is a type-only helper with no runtime logic - it simply returns the flags as-is.
+ *
+ * @example
+ * ```ts
+ * // flags.config.ts
+ * import { defineFlags } from '@localflag/react';
+ *
+ * export const flags = defineFlags({
+ *   darkMode: false,
+ *   newCheckout: true,
+ *   maxRetries: 3,
+ * });
+ *
+ * export type AppFlags = typeof flags;
+ * ```
+ */
+declare function defineFlags<T extends Record<string, FlagValue>>(flags: T): T;
+/**
+ * Flag configuration with value and optional description.
+ */
+interface FlagConfig<T extends FlagValue = FlagValue> {
+    value: T;
+    description?: string;
+}
+type FlagInput<T extends FlagValue = FlagValue> = T | FlagConfig<T>;
+type ExtractFlagValue<T> = T extends FlagConfig<infer V> ? V : T;
+type ExtractFlags<T extends Record<string, FlagInput>> = {
+    [K in keyof T]: ExtractFlagValue<T[K]>;
+};
+/**
+ * Helper function to define feature flags with descriptions.
+ * Returns both the flags object and a descriptions object.
+ *
+ * @example
+ * ```ts
+ * // flags.config.ts
+ * import { createFlags } from '@localflag/react';
+ *
+ * export const { flags, descriptions } = createFlags({
+ *   darkMode: { value: false, description: "Enable dark theme" },
+ *   newCheckout: { value: true, description: "Use new checkout flow" },
+ *   maxRetries: 3, // Simple value without description
+ * });
+ *
+ * export type AppFlags = typeof flags;
+ * ```
+ */
+declare function createFlags<T extends Record<string, FlagInput>>(config: T): {
+    flags: ExtractFlags<T>;
+    descriptions: Partial<Record<keyof T, string>>;
+};
 
-export { DevTools, FeatureFlag, type FeatureFlagContextValue, FeatureFlagProvider, type FeatureFlagProviderProps, type FeatureFlags, type FlagValue, useFeatureFlag, useFeatureFlagContext, useFeatureFlagControls, useFeatureFlagValue, useFeatureFlags };
+export { DevTools, FeatureFlag, type FeatureFlagContextValue, FeatureFlagProvider, type FeatureFlagProviderProps, type FeatureFlags, type FlagConfig, type FlagDescriptions, type FlagValue, LocalFlagDevTools, createFlags, defineFlags, useFeatureFlag, useFeatureFlagContext, useFeatureFlagControls, useFeatureFlagValue, useFeatureFlags };

package/dist/index.js

@@ -46,6 +46,7 @@ function notifyListeners() {
 function FeatureFlagProvider({
   children,
   defaultFlags,
+  descriptions = {},
   storageKey = STORAGE_KEY_DEFAULT,
   persistOverrides = true
 }) {
@@ -57,9 +58,13 @@ function FeatureFlagProvider({
     [defaultFlags, overrides]
   );
   useEffect(() => {
-    currentState = { flags, defaultFlags };
+    currentState = {
+      flags,
+      defaultFlags,
+      descriptions
+    };
     notifyListeners();
-  }, [flags, defaultFlags]);
+  }, [flags, defaultFlags, descriptions]);
   useEffect(() => {
     if (persistOverrides) {
       setStoredOverrides(storageKey, overrides);
@@ -141,174 +146,271 @@ function FeatureFlag({
 }
 
 // src/devtools.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var POSITION_STORAGE_KEY = "localflag:position";
 var positionStyles = {
-  "bottom-right": { bottom: 16, right: 16 },
-  "bottom-left": { bottom: 16, left: 16 },
-  "top-right": { top: 16, right: 16 },
-  "top-left": { top: 16, left: 16 }
+  "bottom-right": { bottom: 12, right: 12 },
+  "bottom-left": { bottom: 12, left: 12 },
+  "top-right": { top: 12, right: 12 },
+  "top-left": { top: 12, left: 12 }
 };
 var baseStyles = {
   position: "fixed",
   zIndex: 99999,
-  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-  fontSize: 13
+  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  fontSize: 12,
+  lineHeight: 1.5,
+  WebkitFontSmoothing: "antialiased"
 };
 var panelStyles = {
-  backgroundColor: "#1a1a2e",
-  border: "1px solid #2d2d44",
-  borderRadius: 8,
-  boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+  backgroundColor: "#0a0a0a",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  borderRadius: 10,
+  boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 70px rgba(0, 0, 0, 0.6)",
   overflow: "hidden",
-  minWidth: 280,
-  maxWidth: 360,
-  maxHeight: "70vh"
+  minWidth: 260,
+  maxWidth: 320,
+  maxHeight: "60vh"
 };
 var headerStyles = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "10px 12px",
-  backgroundColor: "#16162a",
-  borderBottom: "1px solid #2d2d44",
+  borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
   cursor: "pointer",
   userSelect: "none"
 };
 var titleStyles = {
-  color: "#e0e0e0",
-  fontWeight: 600,
-  fontSize: 12,
-  textTransform: "uppercase",
-  letterSpacing: "0.5px",
+  color: "rgba(255, 255, 255, 0.9)",
+  fontWeight: 500,
+  fontSize: 11,
+  letterSpacing: "0.01em",
   display: "flex",
   alignItems: "center",
-  gap: 6
+  gap: 8
+};
+var tabBarStyles = {
+  display: "flex",
+  borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
+  padding: "0 12px",
+  gap: 4
+};
+var tabStyles = {
+  padding: "8px 10px",
+  fontSize: 11,
+  fontWeight: 500,
+  color: "rgba(255, 255, 255, 0.5)",
+  backgroundColor: "transparent",
+  border: "none",
+  borderBottom: "2px solid transparent",
+  cursor: "pointer",
+  transition: "color 0.15s ease",
+  fontFamily: "inherit",
+  marginBottom: -1
+};
+var tabActiveStyles = {
+  ...tabStyles,
+  color: "rgba(255, 255, 255, 0.9)",
+  borderBottomColor: "#fff"
 };
 var contentStyles = {
   padding: 0,
   overflowY: "auto",
-  maxHeight: "calc(70vh - 50px)"
+  maxHeight: "calc(60vh - 84px)"
 };
 var flagRowStyles = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "10px 12px",
-  borderBottom: "1px solid #2d2d44",
-  transition: "background-color 0.15s"
+  padding: "8px 12px",
+  borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
+  transition: "background-color 0.15s ease",
+  gap: 12
 };
-var flagNameStyles = {
-  color: "#c0c0c0",
-  fontSize: 13,
-  fontWeight: 500,
+var flagRowHoverStyles = {
+  backgroundColor: "rgba(255, 255, 255, 0.03)"
+};
+var flagNameContainerStyles = {
   flex: 1,
   overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var flagNameStyles = {
+  color: "rgba(255, 255, 255, 0.7)",
+  fontSize: 12,
+  fontWeight: 400,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var flagDescriptionStyles = {
+  color: "rgba(255, 255, 255, 0.4)",
+  fontSize: 10,
+  fontWeight: 400,
+  overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
 var toggleStyles = {
   position: "relative",
-  width: 40,
-  height: 22,
-  backgroundColor: "#3d3d5c",
-  borderRadius: 11,
+  width: 28,
+  height: 16,
+  backgroundColor: "rgba(255, 255, 255, 0.1)",
+  borderRadius: 8,
   cursor: "pointer",
-  transition: "background-color 0.2s",
+  transition: "background-color 0.15s ease",
   flexShrink: 0,
   border: "none",
   padding: 0
 };
 var toggleActiveStyles = {
   ...toggleStyles,
-  backgroundColor: "#4ade80"
+  backgroundColor: "#fff"
 };
 var toggleKnobStyles = {
   position: "absolute",
   top: 2,
   left: 2,
-  width: 18,
-  height: 18,
-  backgroundColor: "#fff",
+  width: 12,
+  height: 12,
+  backgroundColor: "rgba(255, 255, 255, 0.5)",
   borderRadius: "50%",
-  transition: "transform 0.2s",
-  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  transition: "transform 0.15s ease, background-color 0.15s ease"
 };
 var toggleKnobActiveStyles = {
   ...toggleKnobStyles,
-  transform: "translateX(18px)"
+  transform: "translateX(12px)",
+  backgroundColor: "#0a0a0a"
 };
 var inputStyles = {
-  backgroundColor: "#2d2d44",
-  border: "1px solid #3d3d5c",
-  borderRadius: 4,
-  color: "#e0e0e0",
-  padding: "4px 8px",
-  fontSize: 12,
-  width: 80,
-  outline: "none"
-};
-var badgeStyles = {
-  backgroundColor: "#4ade80",
-  color: "#1a1a2e",
-  fontSize: 10,
-  fontWeight: 700,
-  padding: "2px 6px",
-  borderRadius: 4,
-  marginLeft: 6
+  backgroundColor: "rgba(255, 255, 255, 0.05)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+  borderRadius: 5,
+  color: "rgba(255, 255, 255, 0.9)",
+  padding: "3px 8px",
+  fontSize: 11,
+  width: 72,
+  outline: "none",
+  transition: "border-color 0.15s ease, background-color 0.15s ease"
 };
-var overrideBadgeStyles = {
-  backgroundColor: "#f59e0b",
-  color: "#1a1a2e",
-  fontSize: 9,
-  fontWeight: 600,
-  padding: "1px 4px",
-  borderRadius: 3,
-  marginLeft: 6
+var overrideDotStyles = {
+  width: 5,
+  height: 5,
+  borderRadius: "50%",
+  backgroundColor: "#3b82f6",
+  flexShrink: 0
 };
 var buttonStyles = {
   backgroundColor: "transparent",
   border: "none",
-  color: "#888",
+  color: "rgba(255, 255, 255, 0.4)",
   cursor: "pointer",
   padding: 4,
   borderRadius: 4,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  transition: "color 0.15s, background-color 0.15s"
+  transition: "color 0.15s ease"
 };
 var resetButtonStyles = {
-  backgroundColor: "#2d2d44",
-  border: "1px solid #3d3d5c",
-  borderRadius: 4,
-  color: "#c0c0c0",
-  padding: "6px 12px",
+  backgroundColor: "rgba(255, 255, 255, 0.05)",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  borderRadius: 6,
+  color: "rgba(255, 255, 255, 0.6)",
+  padding: "6px 10px",
   fontSize: 11,
+  fontWeight: 500,
   cursor: "pointer",
-  margin: "8px 12px 12px",
+  margin: "8px 12px 10px",
   width: "calc(100% - 24px)",
-  transition: "background-color 0.15s"
+  transition: "background-color 0.15s ease, color 0.15s ease",
+  fontFamily: "inherit"
 };
 var fabStyles = {
-  width: 48,
-  height: 48,
-  borderRadius: "50%",
-  backgroundColor: "#4ade80",
-  border: "none",
+  height: 32,
+  paddingLeft: 10,
+  paddingRight: 10,
+  borderRadius: 8,
+  backgroundColor: "#0a0a0a",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4)",
+  transition: "background-color 0.15s ease, border-color 0.15s ease",
+  fontFamily: "inherit",
+  fontSize: 11,
+  fontWeight: 500,
+  color: "rgba(255, 255, 255, 0.8)"
+};
+var badgeStyles = {
+  backgroundColor: "#3b82f6",
+  color: "#fff",
+  fontSize: 9,
+  fontWeight: 600,
+  minWidth: 14,
+  height: 14,
+  padding: "0 4px",
+  borderRadius: 7,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var optionsSectionStyles = {
+  padding: "12px"
+};
+var optionsLabelStyles = {
+  fontSize: 10,
+  fontWeight: 500,
+  color: "rgba(255, 255, 255, 0.5)",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: 8,
+  display: "block"
+};
+var positionGridStyles = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 6
+};
+var positionButtonStyles = {
+  padding: "8px",
+  fontSize: 10,
+  fontWeight: 500,
+  color: "rgba(255, 255, 255, 0.6)",
+  backgroundColor: "rgba(255, 255, 255, 0.03)",
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  borderRadius: 6,
   cursor: "pointer",
+  transition: "all 0.15s ease",
+  fontFamily: "inherit",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  boxShadow: "0 4px 12px rgba(74, 222, 128, 0.4)",
-  transition: "transform 0.15s, box-shadow 0.15s"
+  gap: 6
 };
-function FlagIcon() {
+var positionButtonActiveStyles = {
+  ...positionButtonStyles,
+  color: "rgba(255, 255, 255, 0.9)",
+  backgroundColor: "rgba(255, 255, 255, 0.1)",
+  borderColor: "rgba(255, 255, 255, 0.2)"
+};
+function FlagIcon({ size = 14 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      width: "20",
-      height: "20",
+      width: size,
+      height: size,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -322,22 +424,57 @@ function FlagIcon() {
     }
   );
 }
-function CloseIcon() {
-  return /* @__PURE__ */ jsxs(
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ jsx2(
     "svg",
     {
-      width: "16",
-      height: "16",
+      width: "12",
+      height: "12",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
+      style: {
+        transform: direction === "up" ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 0.15s ease"
+      },
+      children: /* @__PURE__ */ jsx2("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function PositionIcon({ position }) {
+  const dotPosition = {
+    "top-left": { top: 2, left: 2 },
+    "top-right": { top: 2, right: 2 },
+    "bottom-left": { bottom: 2, left: 2 },
+    "bottom-right": { bottom: 2, right: 2 }
+  }[position];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: 14,
+        height: 14,
+        border: "1px solid currentColor",
+        borderRadius: 2,
+        position: "relative",
+        opacity: 0.7
+      },
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            width: 4,
+            height: 4,
+            backgroundColor: "currentColor",
+            borderRadius: 1,
+            ...dotPosition
+          }
+        }
+      )
     }
   );
 }
@@ -345,9 +482,11 @@ function FlagRow({
   name,
   value,
   defaultValue,
+  description,
   onToggle,
   onChange
 }) {
+  const [isHovered, setIsHovered] = useState2(false);
   const isOverridden = value !== defaultValue;
   const isBoolean = typeof value === "boolean";
   const handleInputChange = (e) => {
@@ -359,43 +498,136 @@ function FlagRow({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { style: flagRowStyles, children: [
-    /* @__PURE__ */ jsxs("span", { style: flagNameStyles, children: [
-      name,
-      isOverridden && /* @__PURE__ */ jsx2("span", { style: overrideBadgeStyles, children: "override" })
-    ] }),
-    isBoolean ? /* @__PURE__ */ jsx2(
-      "button",
-      {
-        style: value ? toggleActiveStyles : toggleStyles,
-        onClick: onToggle,
-        type: "button",
-        "aria-label": `Toggle ${name}`,
-        children: /* @__PURE__ */ jsx2("span", { style: value ? toggleKnobActiveStyles : toggleKnobStyles })
-      }
-    ) : /* @__PURE__ */ jsx2(
-      "input",
-      {
-        style: inputStyles,
-        type: "text",
-        value: String(value),
-        onChange: handleInputChange
-      }
-    )
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...flagRowStyles,
+        ...isHovered ? flagRowHoverStyles : {}
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: flagNameContainerStyles, children: [
+          /* @__PURE__ */ jsxs("span", { style: flagNameStyles, children: [
+            isOverridden && /* @__PURE__ */ jsx2("span", { style: overrideDotStyles }),
+            name
+          ] }),
+          description && /* @__PURE__ */ jsx2("span", { style: flagDescriptionStyles, children: description })
+        ] }),
+        isBoolean ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            style: value ? toggleActiveStyles : toggleStyles,
+            onClick: onToggle,
+            type: "button",
+            "aria-label": `Toggle ${name}`,
+            children: /* @__PURE__ */ jsx2("span", { style: value ? toggleKnobActiveStyles : toggleKnobStyles })
+          }
+        ) : /* @__PURE__ */ jsx2(
+          "input",
+          {
+            style: inputStyles,
+            type: "text",
+            value: String(value),
+            onChange: handleInputChange,
+            onFocus: (e) => {
+              e.target.style.borderColor = "rgba(255, 255, 255, 0.2)";
+              e.target.style.backgroundColor = "rgba(255, 255, 255, 0.08)";
+            },
+            onBlur: (e) => {
+              e.target.style.borderColor = "rgba(255, 255, 255, 0.1)";
+              e.target.style.backgroundColor = "rgba(255, 255, 255, 0.05)";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function OptionsTab({
+  position,
+  onPositionChange
+}) {
+  const [hoveredPosition, setHoveredPosition] = useState2(null);
+  const positions = [
+    { value: "top-left", label: "Top Left" },
+    { value: "top-right", label: "Top Right" },
+    { value: "bottom-left", label: "Bottom Left" },
+    { value: "bottom-right", label: "Bottom Right" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { style: optionsSectionStyles, children: [
+    /* @__PURE__ */ jsx2("span", { style: optionsLabelStyles, children: "Position" }),
+    /* @__PURE__ */ jsx2("div", { style: positionGridStyles, children: positions.map(({ value, label }) => {
+      const isActive = position === value;
+      const isHovered = hoveredPosition === value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          style: {
+            ...isActive ? positionButtonActiveStyles : positionButtonStyles,
+            ...isHovered && !isActive ? {
+              backgroundColor: "rgba(255, 255, 255, 0.05)",
+              borderColor: "rgba(255, 255, 255, 0.12)"
+            } : {}
+          },
+          onClick: () => onPositionChange(value),
+          onMouseEnter: () => setHoveredPosition(value),
+          onMouseLeave: () => setHoveredPosition(null),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx2(PositionIcon, { position: value }),
+            label
+          ]
+        },
+        value
+      );
+    }) })
   ] });
 }
 function DevToolsInner({
-  position,
-  defaultOpen
+  position: initialPosition,
+  defaultOpen,
+  shortcut
 }) {
   const [isOpen, setIsOpen] = useState2(defaultOpen);
+  const [activeTab, setActiveTab] = useState2("flags");
+  const [position, setPosition] = useState2(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(POSITION_STORAGE_KEY);
+      if (stored && stored in positionStyles) {
+        return stored;
+      }
+    }
+    return initialPosition;
+  });
+  const [fabHovered, setFabHovered] = useState2(false);
+  const [resetHovered, setResetHovered] = useState2(false);
+  const [headerHovered, setHeaderHovered] = useState2(false);
   const flagState = useFlagState();
   const context = useFeatureFlagContext();
+  useEffect2(() => {
+    if (shortcut === false) return;
+    const handleKeyDown = (e) => {
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.shiftKey && e.key.toLowerCase() === "f") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [shortcut]);
+  useEffect2(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(POSITION_STORAGE_KEY, position);
+    }
+  }, [position]);
   if (!flagState) {
     return null;
   }
   const { setFlag, resetFlags } = context;
-  const { flags, defaultFlags } = flagState;
+  const { flags, defaultFlags, descriptions } = flagState;
   const flagEntries = Object.entries(flags);
   const overrideCount = flagEntries.filter(
     ([key, value]) => value !== defaultFlags[key]
@@ -410,54 +642,169 @@ function DevToolsInner({
     setFlag(key, value);
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsx2("div", { style: { ...baseStyles, ...positionStyles[position] }, children: /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx2("div", { style: { ...baseStyles, ...positionStyles[position] }, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        style: fabStyles,
+        style: {
+          ...fabStyles,
+          ...fabHovered ? {
+            backgroundColor: "#141414",
+            borderColor: "rgba(255, 255, 255, 0.15)"
+          } : {}
+        },
         onClick: () => setIsOpen(true),
+        onMouseEnter: () => setFabHovered(true),
+        onMouseLeave: () => setFabHovered(false),
         type: "button",
         "aria-label": "Open feature flags devtools",
-        children: /* @__PURE__ */ jsx2("span", { style: { color: "#1a1a2e" }, children: /* @__PURE__ */ jsx2(FlagIcon, {}) })
+        children: [
+          /* @__PURE__ */ jsx2(FlagIcon, { size: 12 }),
+          /* @__PURE__ */ jsx2("span", { children: "Flags" }),
+          overrideCount > 0 && /* @__PURE__ */ jsx2("span", { style: badgeStyles, children: overrideCount })
+        ]
       }
     ) });
   }
   return /* @__PURE__ */ jsx2("div", { style: { ...baseStyles, ...positionStyles[position] }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles, children: [
-    /* @__PURE__ */ jsxs("div", { style: headerStyles, onClick: () => setIsOpen(false), children: [
-      /* @__PURE__ */ jsxs("span", { style: titleStyles, children: [
-        /* @__PURE__ */ jsx2(FlagIcon, {}),
-        "Feature Flags",
-        overrideCount > 0 && /* @__PURE__ */ jsx2("span", { style: badgeStyles, children: overrideCount })
-      ] }),
-      /* @__PURE__ */ jsx2("button", { style: buttonStyles, type: "button", "aria-label": "Close", children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { style: contentStyles, children: flagEntries.map(([key, value]) => /* @__PURE__ */ jsx2(
-      FlagRow,
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        name: key,
-        value,
-        defaultValue: defaultFlags[key],
-        onToggle: () => handleToggle(key),
-        onChange: (newValue) => handleChange(key, newValue)
-      },
-      key
-    )) }),
-    overrideCount > 0 && /* @__PURE__ */ jsx2("button", { style: resetButtonStyles, onClick: resetFlags, type: "button", children: "Reset all overrides" })
+        style: {
+          ...headerStyles,
+          ...headerHovered ? { backgroundColor: "rgba(255, 255, 255, 0.02)" } : {}
+        },
+        onClick: () => setIsOpen(false),
+        onMouseEnter: () => setHeaderHovered(true),
+        onMouseLeave: () => setHeaderHovered(false),
+        children: [
+          /* @__PURE__ */ jsxs("span", { style: titleStyles, children: [
+            /* @__PURE__ */ jsx2(FlagIcon, { size: 12 }),
+            "Feature Flags",
+            overrideCount > 0 && /* @__PURE__ */ jsx2("span", { style: badgeStyles, children: overrideCount })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              style: {
+                ...buttonStyles,
+                ...headerHovered ? { color: "rgba(255, 255, 255, 0.6)" } : {}
+              },
+              type: "button",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx2(ChevronIcon, { direction: "down" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: tabBarStyles, children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          style: activeTab === "flags" ? tabActiveStyles : tabStyles,
+          onClick: (e) => {
+            e.stopPropagation();
+            setActiveTab("flags");
+          },
+          type: "button",
+          children: "Flags"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          style: activeTab === "options" ? tabActiveStyles : tabStyles,
+          onClick: (e) => {
+            e.stopPropagation();
+            setActiveTab("options");
+          },
+          type: "button",
+          children: "Options"
+        }
+      )
+    ] }),
+    activeTab === "flags" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { style: contentStyles, children: flagEntries.map(([key, value]) => /* @__PURE__ */ jsx2(
+        FlagRow,
+        {
+          name: key,
+          value,
+          defaultValue: defaultFlags[key],
+          description: descriptions[key],
+          onToggle: () => handleToggle(key),
+          onChange: (newValue) => handleChange(key, newValue)
+        },
+        key
+      )) }),
+      overrideCount > 0 && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          style: {
+            ...resetButtonStyles,
+            ...resetHovered ? {
+              backgroundColor: "rgba(255, 255, 255, 0.08)",
+              color: "rgba(255, 255, 255, 0.8)"
+            } : {}
+          },
+          onClick: resetFlags,
+          onMouseEnter: () => setResetHovered(true),
+          onMouseLeave: () => setResetHovered(false),
+          type: "button",
+          children: "Reset overrides"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx2(OptionsTab, { position, onPositionChange: setPosition })
   ] }) });
 }
-function DevTools({
+function LocalFlagDevTools({
   position = "bottom-right",
-  defaultOpen = false
+  defaultOpen = false,
+  shortcut = "mod+shift+f"
 }) {
   const isDev = typeof __DEV__ !== "undefined" ? __DEV__ : true;
   if (!isDev) {
     return null;
   }
-  return /* @__PURE__ */ jsx2(DevToolsInner, { position, defaultOpen });
+  return /* @__PURE__ */ jsx2(
+    DevToolsInner,
+    {
+      position,
+      defaultOpen,
+      shortcut
+    }
+  );
+}
+var DevTools = LocalFlagDevTools;
+
+// src/config.ts
+function defineFlags(flags) {
+  return flags;
+}
+function createFlags(config) {
+  const flags = {};
+  const descriptions = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (typeof value === "object" && value !== null && "value" in value) {
+      flags[key] = value.value;
+      if (value.description) {
+        descriptions[key] = value.description;
+      }
+    } else {
+      flags[key] = value;
+    }
+  }
+  return {
+    flags,
+    descriptions
+  };
 }
 export {
   DevTools,
   FeatureFlag,
   FeatureFlagProvider,
+  LocalFlagDevTools,
+  createFlags,
+  defineFlags,
   useFeatureFlag,
   useFeatureFlagContext,
   useFeatureFlagControls,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/context.tsx","../src/hooks.ts","../src/devtools.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport type {\n  FeatureFlagContextValue,\n  FeatureFlagProviderProps,\n  FeatureFlags,\n} from \"./types\";\n\nconst FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);\n\nconst STORAGE_KEY_DEFAULT = \"localflag:overrides\";\n\nfunction getStoredOverrides<T extends FeatureFlags>(\n  storageKey: string\n): Partial<T> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const stored = localStorage.getItem(storageKey);\n    return stored ? JSON.parse(stored) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction setStoredOverrides<T extends FeatureFlags>(\n  storageKey: string,\n  overrides: Partial<T>\n): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    if (Object.keys(overrides).length === 0) {\n      localStorage.removeItem(storageKey);\n    } else {\n      localStorage.setItem(storageKey, JSON.stringify(overrides));\n    }\n  } catch {\n    // Ignore storage errors\n  }\n}\n\n// Event emitter for devtools communication\ntype Listener = () => void;\nconst listeners = new Set<Listener>();\nlet currentState: { flags: FeatureFlags; defaultFlags: FeatureFlags } | null = null;\n\nexport function subscribeToFlagChanges(listener: Listener): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nexport function getFlagState() {\n  return currentState;\n}\n\nfunction notifyListeners() {\n  listeners.forEach((listener) => listener());\n}\n\nexport function FeatureFlagProvider<T extends FeatureFlags>({\n  children,\n  defaultFlags,\n  storageKey = STORAGE_KEY_DEFAULT,\n  persistOverrides = true,\n}: FeatureFlagProviderProps<T>) {\n  const [overrides, setOverrides] = useState<Partial<T>>(() =>\n    persistOverrides ? getStoredOverrides<T>(storageKey) : {}\n  );\n\n  const flags = useMemo(\n    () => ({ ...defaultFlags, ...overrides }) as T,\n    [defaultFlags, overrides]\n  );\n\n  // Update global state for devtools\n  useEffect(() => {\n    currentState = { flags, defaultFlags };\n    notifyListeners();\n  }, [flags, defaultFlags]);\n\n  // Persist overrides to localStorage\n  useEffect(() => {\n    if (persistOverrides) {\n      setStoredOverrides(storageKey, overrides);\n    }\n  }, [overrides, storageKey, persistOverrides]);\n\n  const isEnabled = useCallback(\n    (flagName: keyof T): boolean => {\n      const value = flags[flagName];\n      return Boolean(value);\n    },\n    [flags]\n  );\n\n  const getValue = useCallback(\n    <K extends keyof T>(flagName: K): T[K] => {\n      return flags[flagName];\n    },\n    [flags]\n  );\n\n  const setFlag = useCallback(<K extends keyof T>(flagName: K, value: T[K]) => {\n    setOverrides((prev) => ({ ...prev, [flagName]: value }));\n  }, []);\n\n  const resetFlags = useCallback(() => {\n    setOverrides({});\n  }, []);\n\n  const value = useMemo<FeatureFlagContextValue<T>>(\n    () => ({\n      flags,\n      isEnabled,\n      getValue,\n      setFlag,\n      resetFlags,\n    }),\n    [flags, isEnabled, getValue, setFlag, resetFlags]\n  );\n\n  return (\n    <FeatureFlagContext.Provider value={value as unknown as FeatureFlagContextValue}>\n      {children}\n    </FeatureFlagContext.Provider>\n  );\n}\n\nexport function useFeatureFlagContext<\n  T extends FeatureFlags = FeatureFlags\n>(): FeatureFlagContextValue<T> {\n  const context = useContext(FeatureFlagContext);\n  if (!context) {\n    throw new Error(\n      \"useFeatureFlagContext must be used within a FeatureFlagProvider\"\n    );\n  }\n  return context as unknown as FeatureFlagContextValue<T>;\n}\n\n// Hook for devtools to subscribe to flag changes\nexport function useFlagState() {\n  return useSyncExternalStore(\n    subscribeToFlagChanges,\n    getFlagState,\n    () => null\n  );\n}\n","import { useMemo } from \"react\";\nimport { useFeatureFlagContext } from \"./context\";\nimport type { FeatureFlags } from \"./types\";\n\n/**\n * Hook to check if a feature flag is enabled (truthy)\n */\nexport function useFeatureFlag<T extends FeatureFlags = FeatureFlags>(\n  flagName: keyof T\n): boolean {\n  const { isEnabled } = useFeatureFlagContext<T>();\n  return isEnabled(flagName);\n}\n\n/**\n * Hook to get the raw value of a feature flag\n */\nexport function useFeatureFlagValue<\n  T extends FeatureFlags = FeatureFlags,\n  K extends keyof T = keyof T\n>(flagName: K): T[K] {\n  const { getValue } = useFeatureFlagContext<T>();\n  return getValue(flagName);\n}\n\n/**\n * Hook to get all feature flags\n */\nexport function useFeatureFlags<T extends FeatureFlags = FeatureFlags>(): T {\n  const { flags } = useFeatureFlagContext<T>();\n  return flags;\n}\n\n/**\n * Hook to get flag controls (setFlag, resetFlags)\n */\nexport function useFeatureFlagControls<T extends FeatureFlags = FeatureFlags>() {\n  const { setFlag, resetFlags } = useFeatureFlagContext<T>();\n  return useMemo(() => ({ setFlag, resetFlags }), [setFlag, resetFlags]);\n}\n\n/**\n * Component wrapper that renders children only if flag is enabled\n */\nexport function FeatureFlag<T extends FeatureFlags = FeatureFlags>({\n  flag,\n  children,\n  fallback = null,\n}: {\n  flag: keyof T;\n  children: React.ReactNode;\n  fallback?: React.ReactNode;\n}): React.ReactNode {\n  const enabled = useFeatureFlag<T>(flag);\n  return enabled ? children : fallback;\n}\n","import { useState } from \"react\";\nimport { useFlagState, useFeatureFlagContext } from \"./context\";\nimport type { FlagValue, FeatureFlags } from \"./types\";\n\ndeclare const __DEV__: boolean | undefined;\n\ninterface DevToolsProps {\n  position?: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  defaultOpen?: boolean;\n}\n\nconst positionStyles: Record<string, React.CSSProperties> = {\n  \"bottom-right\": { bottom: 16, right: 16 },\n  \"bottom-left\": { bottom: 16, left: 16 },\n  \"top-right\": { top: 16, right: 16 },\n  \"top-left\": { top: 16, left: 16 },\n};\n\nconst baseStyles: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: 99999,\n  fontFamily:\n    'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace',\n  fontSize: 13,\n};\n\nconst panelStyles: React.CSSProperties = {\n  backgroundColor: \"#1a1a2e\",\n  border: \"1px solid #2d2d44\",\n  borderRadius: 8,\n  boxShadow: \"0 8px 32px rgba(0, 0, 0, 0.4)\",\n  overflow: \"hidden\",\n  minWidth: 280,\n  maxWidth: 360,\n  maxHeight: \"70vh\",\n};\n\nconst headerStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"10px 12px\",\n  backgroundColor: \"#16162a\",\n  borderBottom: \"1px solid #2d2d44\",\n  cursor: \"pointer\",\n  userSelect: \"none\",\n};\n\nconst titleStyles: React.CSSProperties = {\n  color: \"#e0e0e0\",\n  fontWeight: 600,\n  fontSize: 12,\n  textTransform: \"uppercase\",\n  letterSpacing: \"0.5px\",\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 6,\n};\n\nconst contentStyles: React.CSSProperties = {\n  padding: 0,\n  overflowY: \"auto\",\n  maxHeight: \"calc(70vh - 50px)\",\n};\n\nconst flagRowStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"10px 12px\",\n  borderBottom: \"1px solid #2d2d44\",\n  transition: \"background-color 0.15s\",\n};\n\nconst flagNameStyles: React.CSSProperties = {\n  color: \"#c0c0c0\",\n  fontSize: 13,\n  fontWeight: 500,\n  flex: 1,\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n};\n\nconst toggleStyles: React.CSSProperties = {\n  position: \"relative\",\n  width: 40,\n  height: 22,\n  backgroundColor: \"#3d3d5c\",\n  borderRadius: 11,\n  cursor: \"pointer\",\n  transition: \"background-color 0.2s\",\n  flexShrink: 0,\n  border: \"none\",\n  padding: 0,\n};\n\nconst toggleActiveStyles: React.CSSProperties = {\n  ...toggleStyles,\n  backgroundColor: \"#4ade80\",\n};\n\nconst toggleKnobStyles: React.CSSProperties = {\n  position: \"absolute\",\n  top: 2,\n  left: 2,\n  width: 18,\n  height: 18,\n  backgroundColor: \"#fff\",\n  borderRadius: \"50%\",\n  transition: \"transform 0.2s\",\n  boxShadow: \"0 1px 3px rgba(0, 0, 0, 0.3)\",\n};\n\nconst toggleKnobActiveStyles: React.CSSProperties = {\n  ...toggleKnobStyles,\n  transform: \"translateX(18px)\",\n};\n\nconst inputStyles: React.CSSProperties = {\n  backgroundColor: \"#2d2d44\",\n  border: \"1px solid #3d3d5c\",\n  borderRadius: 4,\n  color: \"#e0e0e0\",\n  padding: \"4px 8px\",\n  fontSize: 12,\n  width: 80,\n  outline: \"none\",\n};\n\nconst badgeStyles: React.CSSProperties = {\n  backgroundColor: \"#4ade80\",\n  color: \"#1a1a2e\",\n  fontSize: 10,\n  fontWeight: 700,\n  padding: \"2px 6px\",\n  borderRadius: 4,\n  marginLeft: 6,\n};\n\nconst overrideBadgeStyles: React.CSSProperties = {\n  backgroundColor: \"#f59e0b\",\n  color: \"#1a1a2e\",\n  fontSize: 9,\n  fontWeight: 600,\n  padding: \"1px 4px\",\n  borderRadius: 3,\n  marginLeft: 6,\n};\n\nconst buttonStyles: React.CSSProperties = {\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  color: \"#888\",\n  cursor: \"pointer\",\n  padding: 4,\n  borderRadius: 4,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  transition: \"color 0.15s, background-color 0.15s\",\n};\n\nconst resetButtonStyles: React.CSSProperties = {\n  backgroundColor: \"#2d2d44\",\n  border: \"1px solid #3d3d5c\",\n  borderRadius: 4,\n  color: \"#c0c0c0\",\n  padding: \"6px 12px\",\n  fontSize: 11,\n  cursor: \"pointer\",\n  margin: \"8px 12px 12px\",\n  width: \"calc(100% - 24px)\",\n  transition: \"background-color 0.15s\",\n};\n\nconst fabStyles: React.CSSProperties = {\n  width: 48,\n  height: 48,\n  borderRadius: \"50%\",\n  backgroundColor: \"#4ade80\",\n  border: \"none\",\n  cursor: \"pointer\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  boxShadow: \"0 4px 12px rgba(74, 222, 128, 0.4)\",\n  transition: \"transform 0.15s, box-shadow 0.15s\",\n};\n\nfunction FlagIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <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\" />\n      <line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\nfunction FlagRow({\n  name,\n  value,\n  defaultValue,\n  onToggle,\n  onChange,\n}: {\n  name: string;\n  value: FlagValue;\n  defaultValue: FlagValue;\n  onToggle: () => void;\n  onChange: (value: FlagValue) => void;\n}) {\n  const isOverridden = value !== defaultValue;\n  const isBoolean = typeof value === \"boolean\";\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    // Try to parse as number\n    const num = Number(newValue);\n    if (!isNaN(num) && newValue !== \"\") {\n      onChange(num);\n    } else {\n      onChange(newValue);\n    }\n  };\n\n  return (\n    <div style={flagRowStyles}>\n      <span style={flagNameStyles}>\n        {name}\n        {isOverridden && <span style={overrideBadgeStyles}>override</span>}\n      </span>\n      {isBoolean ? (\n        <button\n          style={value ? toggleActiveStyles : toggleStyles}\n          onClick={onToggle}\n          type=\"button\"\n          aria-label={`Toggle ${name}`}\n        >\n          <span style={value ? toggleKnobActiveStyles : toggleKnobStyles} />\n        </button>\n      ) : (\n        <input\n          style={inputStyles}\n          type=\"text\"\n          value={String(value)}\n          onChange={handleInputChange}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction DevToolsInner({\n  position,\n  defaultOpen,\n}: {\n  position: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  defaultOpen: boolean;\n}) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const flagState = useFlagState();\n  const context = useFeatureFlagContext<FeatureFlags>();\n\n  if (!flagState) {\n    return null;\n  }\n\n  const { setFlag, resetFlags } = context;\n\n  const { flags, defaultFlags } = flagState;\n  const flagEntries = Object.entries(flags);\n  const overrideCount = flagEntries.filter(\n    ([key, value]) => value !== defaultFlags[key]\n  ).length;\n\n  const handleToggle = (key: string) => {\n    const currentValue = flags[key];\n    if (typeof currentValue === \"boolean\") {\n      setFlag(key, !currentValue);\n    }\n  };\n\n  const handleChange = (key: string, value: FlagValue) => {\n    setFlag(key, value);\n  };\n\n  if (!isOpen) {\n    return (\n      <div style={{ ...baseStyles, ...positionStyles[position] }}>\n        <button\n          style={fabStyles}\n          onClick={() => setIsOpen(true)}\n          type=\"button\"\n          aria-label=\"Open feature flags devtools\"\n        >\n          <span style={{ color: \"#1a1a2e\" }}>\n            <FlagIcon />\n          </span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ ...baseStyles, ...positionStyles[position] }}>\n      <div style={panelStyles}>\n        <div style={headerStyles} onClick={() => setIsOpen(false)}>\n          <span style={titleStyles}>\n            <FlagIcon />\n            Feature Flags\n            {overrideCount > 0 && (\n              <span style={badgeStyles}>{overrideCount}</span>\n            )}\n          </span>\n          <button style={buttonStyles} type=\"button\" aria-label=\"Close\">\n            <CloseIcon />\n          </button>\n        </div>\n        <div style={contentStyles}>\n          {flagEntries.map(([key, value]) => (\n            <FlagRow\n              key={key}\n              name={key}\n              value={value}\n              defaultValue={defaultFlags[key]}\n              onToggle={() => handleToggle(key)}\n              onChange={(newValue) => handleChange(key, newValue)}\n            />\n          ))}\n        </div>\n        {overrideCount > 0 && (\n          <button style={resetButtonStyles} onClick={resetFlags} type=\"button\">\n            Reset all overrides\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function DevTools({\n  position = \"bottom-right\",\n  defaultOpen = false,\n}: DevToolsProps) {\n  // Don't render in production - check via global __DEV__ or fallback to always showing\n  const isDev = typeof __DEV__ !== \"undefined\" ? __DEV__ : true;\n  if (!isDev) {\n    return null;\n  }\n\n  return <DevToolsInner position={position} defaultOpen={defaultOpen} />;\n}\n\nexport default DevTools;\n"],"mappings":"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","names":["value","useMemo","useMemo","useState","jsx","useState"]}
+{"version":3,"sources":["../src/context.tsx","../src/hooks.ts","../src/devtools.tsx","../src/config.ts"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport type {\n  FeatureFlagContextValue,\n  FeatureFlagProviderProps,\n  FeatureFlags,\n} from \"./types\";\n\nconst FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);\n\nconst STORAGE_KEY_DEFAULT = \"localflag:overrides\";\n\nfunction getStoredOverrides<T extends FeatureFlags>(\n  storageKey: string\n): Partial<T> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const stored = localStorage.getItem(storageKey);\n    return stored ? JSON.parse(stored) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction setStoredOverrides<T extends FeatureFlags>(\n  storageKey: string,\n  overrides: Partial<T>\n): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    if (Object.keys(overrides).length === 0) {\n      localStorage.removeItem(storageKey);\n    } else {\n      localStorage.setItem(storageKey, JSON.stringify(overrides));\n    }\n  } catch {\n    // Ignore storage errors\n  }\n}\n\n// Event emitter for devtools communication\ntype Listener = () => void;\nconst listeners = new Set<Listener>();\nlet currentState: {\n  flags: FeatureFlags;\n  defaultFlags: FeatureFlags;\n  descriptions: Record<string, string>;\n} | null = null;\n\nexport function subscribeToFlagChanges(listener: Listener): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nexport function getFlagState() {\n  return currentState;\n}\n\nfunction notifyListeners() {\n  listeners.forEach((listener) => listener());\n}\n\nexport function FeatureFlagProvider<T extends FeatureFlags>({\n  children,\n  defaultFlags,\n  descriptions = {},\n  storageKey = STORAGE_KEY_DEFAULT,\n  persistOverrides = true,\n}: FeatureFlagProviderProps<T>) {\n  const [overrides, setOverrides] = useState<Partial<T>>(() =>\n    persistOverrides ? getStoredOverrides<T>(storageKey) : {}\n  );\n\n  const flags = useMemo(\n    () => ({ ...defaultFlags, ...overrides }) as T,\n    [defaultFlags, overrides]\n  );\n\n  // Update global state for devtools\n  useEffect(() => {\n    currentState = {\n      flags,\n      defaultFlags,\n      descriptions: descriptions as Record<string, string>,\n    };\n    notifyListeners();\n  }, [flags, defaultFlags, descriptions]);\n\n  // Persist overrides to localStorage\n  useEffect(() => {\n    if (persistOverrides) {\n      setStoredOverrides(storageKey, overrides);\n    }\n  }, [overrides, storageKey, persistOverrides]);\n\n  const isEnabled = useCallback(\n    (flagName: keyof T): boolean => {\n      const value = flags[flagName];\n      return Boolean(value);\n    },\n    [flags]\n  );\n\n  const getValue = useCallback(\n    <K extends keyof T>(flagName: K): T[K] => {\n      return flags[flagName];\n    },\n    [flags]\n  );\n\n  const setFlag = useCallback(<K extends keyof T>(flagName: K, value: T[K]) => {\n    setOverrides((prev) => ({ ...prev, [flagName]: value }));\n  }, []);\n\n  const resetFlags = useCallback(() => {\n    setOverrides({});\n  }, []);\n\n  const value = useMemo<FeatureFlagContextValue<T>>(\n    () => ({\n      flags,\n      isEnabled,\n      getValue,\n      setFlag,\n      resetFlags,\n    }),\n    [flags, isEnabled, getValue, setFlag, resetFlags]\n  );\n\n  return (\n    <FeatureFlagContext.Provider value={value as unknown as FeatureFlagContextValue}>\n      {children}\n    </FeatureFlagContext.Provider>\n  );\n}\n\nexport function useFeatureFlagContext<\n  T extends FeatureFlags = FeatureFlags\n>(): FeatureFlagContextValue<T> {\n  const context = useContext(FeatureFlagContext);\n  if (!context) {\n    throw new Error(\n      \"useFeatureFlagContext must be used within a FeatureFlagProvider\"\n    );\n  }\n  return context as unknown as FeatureFlagContextValue<T>;\n}\n\n// Hook for devtools to subscribe to flag changes\nexport function useFlagState() {\n  return useSyncExternalStore(\n    subscribeToFlagChanges,\n    getFlagState,\n    () => null\n  );\n}\n","import { useMemo } from \"react\";\nimport { useFeatureFlagContext } from \"./context\";\nimport type { FeatureFlags } from \"./types\";\n\n/**\n * Hook to check if a feature flag is enabled (truthy)\n */\nexport function useFeatureFlag<T extends FeatureFlags = FeatureFlags>(\n  flagName: keyof T\n): boolean {\n  const { isEnabled } = useFeatureFlagContext<T>();\n  return isEnabled(flagName);\n}\n\n/**\n * Hook to get the raw value of a feature flag\n */\nexport function useFeatureFlagValue<\n  T extends FeatureFlags = FeatureFlags,\n  K extends keyof T = keyof T\n>(flagName: K): T[K] {\n  const { getValue } = useFeatureFlagContext<T>();\n  return getValue(flagName);\n}\n\n/**\n * Hook to get all feature flags\n */\nexport function useFeatureFlags<T extends FeatureFlags = FeatureFlags>(): T {\n  const { flags } = useFeatureFlagContext<T>();\n  return flags;\n}\n\n/**\n * Hook to get flag controls (setFlag, resetFlags)\n */\nexport function useFeatureFlagControls<T extends FeatureFlags = FeatureFlags>() {\n  const { setFlag, resetFlags } = useFeatureFlagContext<T>();\n  return useMemo(() => ({ setFlag, resetFlags }), [setFlag, resetFlags]);\n}\n\n/**\n * Component wrapper that renders children only if flag is enabled\n */\nexport function FeatureFlag<T extends FeatureFlags = FeatureFlags>({\n  flag,\n  children,\n  fallback = null,\n}: {\n  flag: keyof T;\n  children: React.ReactNode;\n  fallback?: React.ReactNode;\n}): React.ReactNode {\n  const enabled = useFeatureFlag<T>(flag);\n  return enabled ? children : fallback;\n}\n","import { useState, useEffect } from \"react\";\nimport { useFlagState, useFeatureFlagContext } from \"./context\";\nimport type { FlagValue, FeatureFlags } from \"./types\";\n\ndeclare const __DEV__: boolean | undefined;\n\ntype Position = \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n\ninterface DevToolsProps {\n  position?: Position;\n  defaultOpen?: boolean;\n  /**\n   * Keyboard shortcut to toggle the DevTools panel.\n   * Set to `false` to disable the shortcut.\n   * @default \"mod+shift+f\" (Cmd+Shift+F on Mac, Ctrl+Shift+F on Windows/Linux)\n   */\n  shortcut?: string | false;\n}\n\nconst POSITION_STORAGE_KEY = \"localflag:position\";\n\nconst positionStyles: Record<string, React.CSSProperties> = {\n  \"bottom-right\": { bottom: 12, right: 12 },\n  \"bottom-left\": { bottom: 12, left: 12 },\n  \"top-right\": { top: 12, right: 12 },\n  \"top-left\": { top: 12, left: 12 },\n};\n\nconst baseStyles: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: 99999,\n  fontFamily:\n    'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace',\n  fontSize: 12,\n  lineHeight: 1.5,\n  WebkitFontSmoothing: \"antialiased\",\n};\n\nconst panelStyles: React.CSSProperties = {\n  backgroundColor: \"#0a0a0a\",\n  border: \"1px solid rgba(255, 255, 255, 0.08)\",\n  borderRadius: 10,\n  boxShadow:\n    \"0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 70px rgba(0, 0, 0, 0.6)\",\n  overflow: \"hidden\",\n  minWidth: 260,\n  maxWidth: 320,\n  maxHeight: \"60vh\",\n};\n\nconst headerStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"10px 12px\",\n  borderBottom: \"1px solid rgba(255, 255, 255, 0.06)\",\n  cursor: \"pointer\",\n  userSelect: \"none\",\n};\n\nconst titleStyles: React.CSSProperties = {\n  color: \"rgba(255, 255, 255, 0.9)\",\n  fontWeight: 500,\n  fontSize: 11,\n  letterSpacing: \"0.01em\",\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n};\n\nconst tabBarStyles: React.CSSProperties = {\n  display: \"flex\",\n  borderBottom: \"1px solid rgba(255, 255, 255, 0.06)\",\n  padding: \"0 12px\",\n  gap: 4,\n};\n\nconst tabStyles: React.CSSProperties = {\n  padding: \"8px 10px\",\n  fontSize: 11,\n  fontWeight: 500,\n  color: \"rgba(255, 255, 255, 0.5)\",\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  borderBottom: \"2px solid transparent\",\n  cursor: \"pointer\",\n  transition: \"color 0.15s ease\",\n  fontFamily: \"inherit\",\n  marginBottom: -1,\n};\n\nconst tabActiveStyles: React.CSSProperties = {\n  ...tabStyles,\n  color: \"rgba(255, 255, 255, 0.9)\",\n  borderBottomColor: \"#fff\",\n};\n\nconst contentStyles: React.CSSProperties = {\n  padding: 0,\n  overflowY: \"auto\",\n  maxHeight: \"calc(60vh - 84px)\",\n};\n\nconst flagRowStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"8px 12px\",\n  borderBottom: \"1px solid rgba(255, 255, 255, 0.04)\",\n  transition: \"background-color 0.15s ease\",\n  gap: 12,\n};\n\nconst flagRowHoverStyles: React.CSSProperties = {\n  backgroundColor: \"rgba(255, 255, 255, 0.03)\",\n};\n\nconst flagNameContainerStyles: React.CSSProperties = {\n  flex: 1,\n  overflow: \"hidden\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  minWidth: 0,\n};\n\nconst flagNameStyles: React.CSSProperties = {\n  color: \"rgba(255, 255, 255, 0.7)\",\n  fontSize: 12,\n  fontWeight: 400,\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 6,\n};\n\nconst flagDescriptionStyles: React.CSSProperties = {\n  color: \"rgba(255, 255, 255, 0.4)\",\n  fontSize: 10,\n  fontWeight: 400,\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n};\n\nconst toggleStyles: React.CSSProperties = {\n  position: \"relative\",\n  width: 28,\n  height: 16,\n  backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n  borderRadius: 8,\n  cursor: \"pointer\",\n  transition: \"background-color 0.15s ease\",\n  flexShrink: 0,\n  border: \"none\",\n  padding: 0,\n};\n\nconst toggleActiveStyles: React.CSSProperties = {\n  ...toggleStyles,\n  backgroundColor: \"#fff\",\n};\n\nconst toggleKnobStyles: React.CSSProperties = {\n  position: \"absolute\",\n  top: 2,\n  left: 2,\n  width: 12,\n  height: 12,\n  backgroundColor: \"rgba(255, 255, 255, 0.5)\",\n  borderRadius: \"50%\",\n  transition: \"transform 0.15s ease, background-color 0.15s ease\",\n};\n\nconst toggleKnobActiveStyles: React.CSSProperties = {\n  ...toggleKnobStyles,\n  transform: \"translateX(12px)\",\n  backgroundColor: \"#0a0a0a\",\n};\n\nconst inputStyles: React.CSSProperties = {\n  backgroundColor: \"rgba(255, 255, 255, 0.05)\",\n  border: \"1px solid rgba(255, 255, 255, 0.1)\",\n  borderRadius: 5,\n  color: \"rgba(255, 255, 255, 0.9)\",\n  padding: \"3px 8px\",\n  fontSize: 11,\n  width: 72,\n  outline: \"none\",\n  transition: \"border-color 0.15s ease, background-color 0.15s ease\",\n};\n\nconst overrideDotStyles: React.CSSProperties = {\n  width: 5,\n  height: 5,\n  borderRadius: \"50%\",\n  backgroundColor: \"#3b82f6\",\n  flexShrink: 0,\n};\n\nconst buttonStyles: React.CSSProperties = {\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  color: \"rgba(255, 255, 255, 0.4)\",\n  cursor: \"pointer\",\n  padding: 4,\n  borderRadius: 4,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  transition: \"color 0.15s ease\",\n};\n\nconst resetButtonStyles: React.CSSProperties = {\n  backgroundColor: \"rgba(255, 255, 255, 0.05)\",\n  border: \"1px solid rgba(255, 255, 255, 0.08)\",\n  borderRadius: 6,\n  color: \"rgba(255, 255, 255, 0.6)\",\n  padding: \"6px 10px\",\n  fontSize: 11,\n  fontWeight: 500,\n  cursor: \"pointer\",\n  margin: \"8px 12px 10px\",\n  width: \"calc(100% - 24px)\",\n  transition: \"background-color 0.15s ease, color 0.15s ease\",\n  fontFamily: \"inherit\",\n};\n\nconst fabStyles: React.CSSProperties = {\n  height: 32,\n  paddingLeft: 10,\n  paddingRight: 10,\n  borderRadius: 8,\n  backgroundColor: \"#0a0a0a\",\n  border: \"1px solid rgba(255, 255, 255, 0.1)\",\n  cursor: \"pointer\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  gap: 6,\n  boxShadow:\n    \"0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4)\",\n  transition: \"background-color 0.15s ease, border-color 0.15s ease\",\n  fontFamily: \"inherit\",\n  fontSize: 11,\n  fontWeight: 500,\n  color: \"rgba(255, 255, 255, 0.8)\",\n};\n\nconst badgeStyles: React.CSSProperties = {\n  backgroundColor: \"#3b82f6\",\n  color: \"#fff\",\n  fontSize: 9,\n  fontWeight: 600,\n  minWidth: 14,\n  height: 14,\n  padding: \"0 4px\",\n  borderRadius: 7,\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n};\n\nconst optionsSectionStyles: React.CSSProperties = {\n  padding: \"12px\",\n};\n\nconst optionsLabelStyles: React.CSSProperties = {\n  fontSize: 10,\n  fontWeight: 500,\n  color: \"rgba(255, 255, 255, 0.5)\",\n  textTransform: \"uppercase\",\n  letterSpacing: \"0.05em\",\n  marginBottom: 8,\n  display: \"block\",\n};\n\nconst positionGridStyles: React.CSSProperties = {\n  display: \"grid\",\n  gridTemplateColumns: \"1fr 1fr\",\n  gap: 6,\n};\n\nconst positionButtonStyles: React.CSSProperties = {\n  padding: \"8px\",\n  fontSize: 10,\n  fontWeight: 500,\n  color: \"rgba(255, 255, 255, 0.6)\",\n  backgroundColor: \"rgba(255, 255, 255, 0.03)\",\n  border: \"1px solid rgba(255, 255, 255, 0.08)\",\n  borderRadius: 6,\n  cursor: \"pointer\",\n  transition: \"all 0.15s ease\",\n  fontFamily: \"inherit\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  gap: 6,\n};\n\nconst positionButtonActiveStyles: React.CSSProperties = {\n  ...positionButtonStyles,\n  color: \"rgba(255, 255, 255, 0.9)\",\n  backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n  borderColor: \"rgba(255, 255, 255, 0.2)\",\n};\n\nfunction FlagIcon({ size = 14 }: { size?: number }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <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\" />\n      <line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\" />\n    </svg>\n  );\n}\n\nfunction ChevronIcon({ direction }: { direction: \"up\" | \"down\" }) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      style={{\n        transform: direction === \"up\" ? \"rotate(180deg)\" : \"rotate(0deg)\",\n        transition: \"transform 0.15s ease\",\n      }}\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction PositionIcon({ position }: { position: Position }) {\n  const dotPosition = {\n    \"top-left\": { top: 2, left: 2 },\n    \"top-right\": { top: 2, right: 2 },\n    \"bottom-left\": { bottom: 2, left: 2 },\n    \"bottom-right\": { bottom: 2, right: 2 },\n  }[position];\n\n  return (\n    <div\n      style={{\n        width: 14,\n        height: 14,\n        border: \"1px solid currentColor\",\n        borderRadius: 2,\n        position: \"relative\",\n        opacity: 0.7,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          width: 4,\n          height: 4,\n          backgroundColor: \"currentColor\",\n          borderRadius: 1,\n          ...dotPosition,\n        }}\n      />\n    </div>\n  );\n}\n\nfunction FlagRow({\n  name,\n  value,\n  defaultValue,\n  description,\n  onToggle,\n  onChange,\n}: {\n  name: string;\n  value: FlagValue;\n  defaultValue: FlagValue;\n  description?: string;\n  onToggle: () => void;\n  onChange: (value: FlagValue) => void;\n}) {\n  const [isHovered, setIsHovered] = useState(false);\n  const isOverridden = value !== defaultValue;\n  const isBoolean = typeof value === \"boolean\";\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    const num = Number(newValue);\n    if (!isNaN(num) && newValue !== \"\") {\n      onChange(num);\n    } else {\n      onChange(newValue);\n    }\n  };\n\n  return (\n    <div\n      style={{\n        ...flagRowStyles,\n        ...(isHovered ? flagRowHoverStyles : {}),\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <div style={flagNameContainerStyles}>\n        <span style={flagNameStyles}>\n          {isOverridden && <span style={overrideDotStyles} />}\n          {name}\n        </span>\n        {description && (\n          <span style={flagDescriptionStyles}>{description}</span>\n        )}\n      </div>\n      {isBoolean ? (\n        <button\n          style={value ? toggleActiveStyles : toggleStyles}\n          onClick={onToggle}\n          type=\"button\"\n          aria-label={`Toggle ${name}`}\n        >\n          <span style={value ? toggleKnobActiveStyles : toggleKnobStyles} />\n        </button>\n      ) : (\n        <input\n          style={inputStyles}\n          type=\"text\"\n          value={String(value)}\n          onChange={handleInputChange}\n          onFocus={(e) => {\n            e.target.style.borderColor = \"rgba(255, 255, 255, 0.2)\";\n            e.target.style.backgroundColor = \"rgba(255, 255, 255, 0.08)\";\n          }}\n          onBlur={(e) => {\n            e.target.style.borderColor = \"rgba(255, 255, 255, 0.1)\";\n            e.target.style.backgroundColor = \"rgba(255, 255, 255, 0.05)\";\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction OptionsTab({\n  position,\n  onPositionChange,\n}: {\n  position: Position;\n  onPositionChange: (position: Position) => void;\n}) {\n  const [hoveredPosition, setHoveredPosition] = useState<Position | null>(null);\n  const positions: { value: Position; label: string }[] = [\n    { value: \"top-left\", label: \"Top Left\" },\n    { value: \"top-right\", label: \"Top Right\" },\n    { value: \"bottom-left\", label: \"Bottom Left\" },\n    { value: \"bottom-right\", label: \"Bottom Right\" },\n  ];\n\n  return (\n    <div style={optionsSectionStyles}>\n      <span style={optionsLabelStyles}>Position</span>\n      <div style={positionGridStyles}>\n        {positions.map(({ value, label }) => {\n          const isActive = position === value;\n          const isHovered = hoveredPosition === value;\n          return (\n            <button\n              key={value}\n              style={{\n                ...(isActive ? positionButtonActiveStyles : positionButtonStyles),\n                ...(isHovered && !isActive\n                  ? {\n                      backgroundColor: \"rgba(255, 255, 255, 0.05)\",\n                      borderColor: \"rgba(255, 255, 255, 0.12)\",\n                    }\n                  : {}),\n              }}\n              onClick={() => onPositionChange(value)}\n              onMouseEnter={() => setHoveredPosition(value)}\n              onMouseLeave={() => setHoveredPosition(null)}\n              type=\"button\"\n            >\n              <PositionIcon position={value} />\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction DevToolsInner({\n  position: initialPosition,\n  defaultOpen,\n  shortcut,\n}: {\n  position: Position;\n  defaultOpen: boolean;\n  shortcut: string | false;\n}) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const [activeTab, setActiveTab] = useState<\"flags\" | \"options\">(\"flags\");\n  const [position, setPosition] = useState<Position>(() => {\n    if (typeof window !== \"undefined\") {\n      const stored = localStorage.getItem(POSITION_STORAGE_KEY);\n      if (stored && stored in positionStyles) {\n        return stored as Position;\n      }\n    }\n    return initialPosition;\n  });\n  const [fabHovered, setFabHovered] = useState(false);\n  const [resetHovered, setResetHovered] = useState(false);\n  const [headerHovered, setHeaderHovered] = useState(false);\n  const flagState = useFlagState();\n  const context = useFeatureFlagContext<FeatureFlags>();\n\n  // Keyboard shortcut\n  useEffect(() => {\n    if (shortcut === false) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const isMod = e.metaKey || e.ctrlKey;\n      if (isMod && e.shiftKey && e.key.toLowerCase() === \"f\") {\n        e.preventDefault();\n        setIsOpen((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [shortcut]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      localStorage.setItem(POSITION_STORAGE_KEY, position);\n    }\n  }, [position]);\n\n  if (!flagState) {\n    return null;\n  }\n\n  const { setFlag, resetFlags } = context;\n  const { flags, defaultFlags, descriptions } = flagState;\n  const flagEntries = Object.entries(flags);\n  const overrideCount = flagEntries.filter(\n    ([key, value]) => value !== defaultFlags[key]\n  ).length;\n\n  const handleToggle = (key: string) => {\n    const currentValue = flags[key];\n    if (typeof currentValue === \"boolean\") {\n      setFlag(key, !currentValue);\n    }\n  };\n\n  const handleChange = (key: string, value: FlagValue) => {\n    setFlag(key, value);\n  };\n\n  if (!isOpen) {\n    return (\n      <div style={{ ...baseStyles, ...positionStyles[position] }}>\n        <button\n          style={{\n            ...fabStyles,\n            ...(fabHovered\n              ? {\n                  backgroundColor: \"#141414\",\n                  borderColor: \"rgba(255, 255, 255, 0.15)\",\n                }\n              : {}),\n          }}\n          onClick={() => setIsOpen(true)}\n          onMouseEnter={() => setFabHovered(true)}\n          onMouseLeave={() => setFabHovered(false)}\n          type=\"button\"\n          aria-label=\"Open feature flags devtools\"\n        >\n          <FlagIcon size={12} />\n          <span>Flags</span>\n          {overrideCount > 0 && <span style={badgeStyles}>{overrideCount}</span>}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ ...baseStyles, ...positionStyles[position] }}>\n      <div style={panelStyles}>\n        <div\n          style={{\n            ...headerStyles,\n            ...(headerHovered\n              ? { backgroundColor: \"rgba(255, 255, 255, 0.02)\" }\n              : {}),\n          }}\n          onClick={() => setIsOpen(false)}\n          onMouseEnter={() => setHeaderHovered(true)}\n          onMouseLeave={() => setHeaderHovered(false)}\n        >\n          <span style={titleStyles}>\n            <FlagIcon size={12} />\n            Feature Flags\n            {overrideCount > 0 && <span style={badgeStyles}>{overrideCount}</span>}\n          </span>\n          <button\n            style={{\n              ...buttonStyles,\n              ...(headerHovered ? { color: \"rgba(255, 255, 255, 0.6)\" } : {}),\n            }}\n            type=\"button\"\n            aria-label=\"Close\"\n          >\n            <ChevronIcon direction=\"down\" />\n          </button>\n        </div>\n\n        <div style={tabBarStyles}>\n          <button\n            style={activeTab === \"flags\" ? tabActiveStyles : tabStyles}\n            onClick={(e) => {\n              e.stopPropagation();\n              setActiveTab(\"flags\");\n            }}\n            type=\"button\"\n          >\n            Flags\n          </button>\n          <button\n            style={activeTab === \"options\" ? tabActiveStyles : tabStyles}\n            onClick={(e) => {\n              e.stopPropagation();\n              setActiveTab(\"options\");\n            }}\n            type=\"button\"\n          >\n            Options\n          </button>\n        </div>\n\n        {activeTab === \"flags\" ? (\n          <>\n            <div style={contentStyles}>\n              {flagEntries.map(([key, value]) => (\n                <FlagRow\n                  key={key}\n                  name={key}\n                  value={value}\n                  defaultValue={defaultFlags[key]}\n                  description={descriptions[key]}\n                  onToggle={() => handleToggle(key)}\n                  onChange={(newValue) => handleChange(key, newValue)}\n                />\n              ))}\n            </div>\n            {overrideCount > 0 && (\n              <button\n                style={{\n                  ...resetButtonStyles,\n                  ...(resetHovered\n                    ? {\n                        backgroundColor: \"rgba(255, 255, 255, 0.08)\",\n                        color: \"rgba(255, 255, 255, 0.8)\",\n                      }\n                    : {}),\n                }}\n                onClick={resetFlags}\n                onMouseEnter={() => setResetHovered(true)}\n                onMouseLeave={() => setResetHovered(false)}\n                type=\"button\"\n              >\n                Reset overrides\n              </button>\n            )}\n          </>\n        ) : (\n          <OptionsTab position={position} onPositionChange={setPosition} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function LocalFlagDevTools({\n  position = \"bottom-right\",\n  defaultOpen = false,\n  shortcut = \"mod+shift+f\",\n}: DevToolsProps) {\n  const isDev = typeof __DEV__ !== \"undefined\" ? __DEV__ : true;\n  if (!isDev) {\n    return null;\n  }\n\n  return (\n    <DevToolsInner\n      position={position}\n      defaultOpen={defaultOpen}\n      shortcut={shortcut}\n    />\n  );\n}\n\n/** @deprecated Use `LocalFlagDevTools` instead */\nexport const DevTools = LocalFlagDevTools;\n\nexport default LocalFlagDevTools;\n","import type { FlagValue } from \"./types\";\n\n/**\n * Helper function to define feature flags with type safety.\n * This is a type-only helper with no runtime logic - it simply returns the flags as-is.\n *\n * @example\n * ```ts\n * // flags.config.ts\n * import { defineFlags } from '@localflag/react';\n *\n * export const flags = defineFlags({\n *   darkMode: false,\n *   newCheckout: true,\n *   maxRetries: 3,\n * });\n *\n * export type AppFlags = typeof flags;\n * ```\n */\nexport function defineFlags<T extends Record<string, FlagValue>>(flags: T): T {\n  return flags;\n}\n\n/**\n * Flag configuration with value and optional description.\n */\nexport interface FlagConfig<T extends FlagValue = FlagValue> {\n  value: T;\n  description?: string;\n}\n\ntype FlagInput<T extends FlagValue = FlagValue> = T | FlagConfig<T>;\n\ntype ExtractFlagValue<T> = T extends FlagConfig<infer V> ? V : T;\n\ntype ExtractFlags<T extends Record<string, FlagInput>> = {\n  [K in keyof T]: ExtractFlagValue<T[K]>;\n};\n\n/**\n * Helper function to define feature flags with descriptions.\n * Returns both the flags object and a descriptions object.\n *\n * @example\n * ```ts\n * // flags.config.ts\n * import { createFlags } from '@localflag/react';\n *\n * export const { flags, descriptions } = createFlags({\n *   darkMode: { value: false, description: \"Enable dark theme\" },\n *   newCheckout: { value: true, description: \"Use new checkout flow\" },\n *   maxRetries: 3, // Simple value without description\n * });\n *\n * export type AppFlags = typeof flags;\n * ```\n */\nexport function createFlags<T extends Record<string, FlagInput>>(\n  config: T\n): {\n  flags: ExtractFlags<T>;\n  descriptions: Partial<Record<keyof T, string>>;\n} {\n  const flags = {} as Record<string, FlagValue>;\n  const descriptions = {} as Record<string, string>;\n\n  for (const [key, value] of Object.entries(config)) {\n    if (typeof value === \"object\" && value !== null && \"value\" in value) {\n      flags[key] = value.value;\n      if (value.description) {\n        descriptions[key] = value.description;\n      }\n    } else {\n      flags[key] = value as FlagValue;\n    }\n  }\n\n  return {\n    flags: flags as ExtractFlags<T>,\n    descriptions: descriptions as Partial<Record<keyof T, string>>,\n  };\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiIH;AA1HJ,IAAM,qBAAqB,cAA8C,IAAI;AAE7E,IAAM,sBAAsB;AAE5B,SAAS,mBACP,YACY;AACZ,MAAI,OAAO,WAAW,YAAa,QAAO,CAAC;AAC3C,MAAI;AACF,UAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,WAAO,SAAS,KAAK,MAAM,MAAM,IAAI,CAAC;AAAA,EACxC,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,SAAS,mBACP,YACA,WACM;AACN,MAAI,OAAO,WAAW,YAAa;AACnC,MAAI;AACF,QAAI,OAAO,KAAK,SAAS,EAAE,WAAW,GAAG;AACvC,mBAAa,WAAW,UAAU;AAAA,IACpC,OAAO;AACL,mBAAa,QAAQ,YAAY,KAAK,UAAU,SAAS,CAAC;AAAA,IAC5D;AAAA,EACF,QAAQ;AAAA,EAER;AACF;AAIA,IAAM,YAAY,oBAAI,IAAc;AACpC,IAAI,eAIO;AAEJ,SAAS,uBAAuB,UAAgC;AACrE,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM,UAAU,OAAO,QAAQ;AACxC;AAEO,SAAS,eAAe;AAC7B,SAAO;AACT;AAEA,SAAS,kBAAkB;AACzB,YAAU,QAAQ,CAAC,aAAa,SAAS,CAAC;AAC5C;AAEO,SAAS,oBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,mBAAmB;AACrB,GAAgC;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAAqB,MACrD,mBAAmB,mBAAsB,UAAU,IAAI,CAAC;AAAA,EAC1D;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,GAAG,cAAc,GAAG,UAAU;AAAA,IACvC,CAAC,cAAc,SAAS;AAAA,EAC1B;AAGA,YAAU,MAAM;AACd,mBAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,oBAAgB;AAAA,EAClB,GAAG,CAAC,OAAO,cAAc,YAAY,CAAC;AAGtC,YAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,yBAAmB,YAAY,SAAS;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,gBAAgB,CAAC;AAE5C,QAAM,YAAY;AAAA,IAChB,CAAC,aAA+B;AAC9B,YAAMA,SAAQ,MAAM,QAAQ;AAC5B,aAAO,QAAQA,MAAK;AAAA,IACtB;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,WAAW;AAAA,IACf,CAAoB,aAAsB;AACxC,aAAO,MAAM,QAAQ;AAAA,IACvB;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,UAAU,YAAY,CAAoB,UAAaA,WAAgB;AAC3E,iBAAa,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAGA,OAAM,EAAE;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,MAAM;AACnC,iBAAa,CAAC,CAAC;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW,UAAU,SAAS,UAAU;AAAA,EAClD;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAC1B,UACH;AAEJ;AAEO,SAAS,wBAEgB;AAC9B,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,eAAe;AAC7B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AACF;;;AClKA,SAAS,WAAAC,gBAAe;AAOjB,SAAS,eACd,UACS;AACT,QAAM,EAAE,UAAU,IAAI,sBAAyB;AAC/C,SAAO,UAAU,QAAQ;AAC3B;AAKO,SAAS,oBAGd,UAAmB;AACnB,QAAM,EAAE,SAAS,IAAI,sBAAyB;AAC9C,SAAO,SAAS,QAAQ;AAC1B;AAKO,SAAS,kBAA4D;AAC1E,QAAM,EAAE,MAAM,IAAI,sBAAyB;AAC3C,SAAO;AACT;AAKO,SAAS,yBAAgE;AAC9E,QAAM,EAAE,SAAS,WAAW,IAAI,sBAAyB;AACzD,SAAOC,SAAQ,OAAO,EAAE,SAAS,WAAW,IAAI,CAAC,SAAS,UAAU,CAAC;AACvE;AAKO,SAAS,YAAmD;AAAA,EACjE;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAIoB;AAClB,QAAM,UAAU,eAAkB,IAAI;AACtC,SAAO,UAAU,WAAW;AAC9B;;;ACvDA,SAAS,YAAAC,WAAU,aAAAC,kBAAiB;AAuThC,SA2VM,UAjVJ,OAAAC,MAVF;AApSJ,IAAM,uBAAuB;AAE7B,IAAM,iBAAsD;AAAA,EAC1D,gBAAgB,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,EACxC,eAAe,EAAE,QAAQ,IAAI,MAAM,GAAG;AAAA,EACtC,aAAa,EAAE,KAAK,IAAI,OAAO,GAAG;AAAA,EAClC,YAAY,EAAE,KAAK,IAAI,MAAM,GAAG;AAClC;AAEA,IAAM,aAAkC;AAAA,EACtC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,YACE;AAAA,EACF,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AACvB;AAEA,IAAM,cAAmC;AAAA,EACvC,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WACE;AAAA,EACF,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AACb;AAEA,IAAM,eAAoC;AAAA,EACxC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AACd;AAEA,IAAM,cAAmC;AAAA,EACvC,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AACP;AAEA,IAAM,eAAoC;AAAA,EACxC,SAAS;AAAA,EACT,cAAc;AAAA,EACd,SAAS;AAAA,EACT,KAAK;AACP;AAEA,IAAM,YAAiC;AAAA,EACrC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAChB;AAEA,IAAM,kBAAuC;AAAA,EAC3C,GAAG;AAAA,EACH,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,IAAM,gBAAqC;AAAA,EACzC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAEA,IAAM,gBAAqC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,KAAK;AACP;AAEA,IAAM,qBAA0C;AAAA,EAC9C,iBAAiB;AACnB;AAEA,IAAM,0BAA+C;AAAA,EACnD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,UAAU;AACZ;AAEA,IAAM,iBAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AACP;AAEA,IAAM,wBAA6C;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEA,IAAM,eAAoC;AAAA,EACxC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,qBAA0C;AAAA,EAC9C,GAAG;AAAA,EACH,iBAAiB;AACnB;AAEA,IAAM,mBAAwC;AAAA,EAC5C,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,YAAY;AACd;AAEA,IAAM,yBAA8C;AAAA,EAClD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,iBAAiB;AACnB;AAEA,IAAM,cAAmC;AAAA,EACvC,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AACd;AAEA,IAAM,oBAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,YAAY;AACd;AAEA,IAAM,eAAoC;AAAA,EACxC,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AACd;AAEA,IAAM,oBAAyC;AAAA,EAC7C,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,IAAM,YAAiC;AAAA,EACrC,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,WACE;AAAA,EACF,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AACT;AAEA,IAAM,cAAmC;AAAA,EACvC,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAEA,IAAM,uBAA4C;AAAA,EAChD,SAAS;AACX;AAEA,IAAM,qBAA0C;AAAA,EAC9C,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,SAAS;AACX;AAEA,IAAM,qBAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,KAAK;AACP;AAEA,IAAM,uBAA4C;AAAA,EAChD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AACP;AAEA,IAAM,6BAAkD;AAAA,EACtD,GAAG;AAAA,EACH,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,aAAa;AACf;AAEA,SAAS,SAAS,EAAE,OAAO,GAAG,GAAsB;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MAEf;AAAA,wBAAAA,KAAC,UAAK,GAAE,6DAA4D;AAAA,QACpE,gBAAAA,KAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,MAAK;AAAA;AAAA;AAAA,EACtC;AAEJ;AAEA,SAAS,YAAY,EAAE,UAAU,GAAiC;AAChE,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,OAAO;AAAA,QACL,WAAW,cAAc,OAAO,mBAAmB;AAAA,QACnD,YAAY;AAAA,MACd;AAAA,MAEA,0BAAAA,KAAC,cAAS,QAAO,kBAAiB;AAAA;AAAA,EACpC;AAEJ;AAEA,SAAS,aAAa,EAAE,SAAS,GAA2B;AAC1D,QAAM,cAAc;AAAA,IAClB,YAAY,EAAE,KAAK,GAAG,MAAM,EAAE;AAAA,IAC9B,aAAa,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,IAChC,eAAe,EAAE,QAAQ,GAAG,MAAM,EAAE;AAAA,IACpC,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAAA,EACxC,EAAE,QAAQ;AAEV,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,cAAc;AAAA,YACd,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAS,KAAK;AAChD,QAAM,eAAe,UAAU;AAC/B,QAAM,YAAY,OAAO,UAAU;AAEnC,QAAM,oBAAoB,CAAC,MAA2C;AACpE,UAAM,WAAW,EAAE,OAAO;AAC1B,UAAM,MAAM,OAAO,QAAQ;AAC3B,QAAI,CAAC,MAAM,GAAG,KAAK,aAAa,IAAI;AAClC,eAAS,GAAG;AAAA,IACd,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAI,YAAY,qBAAqB,CAAC;AAAA,MACxC;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA,6BAAC,SAAI,OAAO,yBACV;AAAA,+BAAC,UAAK,OAAO,gBACV;AAAA,4BAAgB,gBAAAD,KAAC,UAAK,OAAO,mBAAmB;AAAA,YAChD;AAAA,aACH;AAAA,UACC,eACC,gBAAAA,KAAC,UAAK,OAAO,uBAAwB,uBAAY;AAAA,WAErD;AAAA,QACC,YACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,QAAQ,qBAAqB;AAAA,YACpC,SAAS;AAAA,YACT,MAAK;AAAA,YACL,cAAY,UAAU,IAAI;AAAA,YAE1B,0BAAAA,KAAC,UAAK,OAAO,QAAQ,yBAAyB,kBAAkB;AAAA;AAAA,QAClE,IAEA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL,OAAO,OAAO,KAAK;AAAA,YACnB,UAAU;AAAA,YACV,SAAS,CAAC,MAAM;AACd,gBAAE,OAAO,MAAM,cAAc;AAC7B,gBAAE,OAAO,MAAM,kBAAkB;AAAA,YACnC;AAAA,YACA,QAAQ,CAAC,MAAM;AACb,gBAAE,OAAO,MAAM,cAAc;AAC7B,gBAAE,OAAO,MAAM,kBAAkB;AAAA,YACnC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,UAA0B,IAAI;AAC5E,QAAM,YAAkD;AAAA,IACtD,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,IACvC,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,IACzC,EAAE,OAAO,eAAe,OAAO,cAAc;AAAA,IAC7C,EAAE,OAAO,gBAAgB,OAAO,eAAe;AAAA,EACjD;AAEA,SACE,qBAAC,SAAI,OAAO,sBACV;AAAA,oBAAAD,KAAC,UAAK,OAAO,oBAAoB,sBAAQ;AAAA,IACzC,gBAAAA,KAAC,SAAI,OAAO,oBACT,oBAAU,IAAI,CAAC,EAAE,OAAO,MAAM,MAAM;AACnC,YAAM,WAAW,aAAa;AAC9B,YAAM,YAAY,oBAAoB;AACtC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO;AAAA,YACL,GAAI,WAAW,6BAA6B;AAAA,YAC5C,GAAI,aAAa,CAAC,WACd;AAAA,cACE,iBAAiB;AAAA,cACjB,aAAa;AAAA,YACf,IACA,CAAC;AAAA,UACP;AAAA,UACA,SAAS,MAAM,iBAAiB,KAAK;AAAA,UACrC,cAAc,MAAM,mBAAmB,KAAK;AAAA,UAC5C,cAAc,MAAM,mBAAmB,IAAI;AAAA,UAC3C,MAAK;AAAA,UAEL;AAAA,4BAAAA,KAAC,gBAAa,UAAU,OAAO;AAAA,YAC9B;AAAA;AAAA;AAAA,QAhBI;AAAA,MAiBP;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,QAAQ,SAAS,IAAIC,UAAS,WAAW;AAChD,QAAM,CAAC,WAAW,YAAY,IAAIA,UAA8B,OAAO;AACvE,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAmB,MAAM;AACvD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,SAAS,aAAa,QAAQ,oBAAoB;AACxD,UAAI,UAAU,UAAU,gBAAgB;AACtC,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAIA,UAAS,KAAK;AAClD,QAAM,CAAC,cAAc,eAAe,IAAIA,UAAS,KAAK;AACtD,QAAM,CAAC,eAAe,gBAAgB,IAAIA,UAAS,KAAK;AACxD,QAAM,YAAY,aAAa;AAC/B,QAAM,UAAU,sBAAoC;AAGpD,EAAAC,WAAU,MAAM;AACd,QAAI,aAAa,MAAO;AAExB,UAAM,gBAAgB,CAAC,MAAqB;AAC1C,YAAM,QAAQ,EAAE,WAAW,EAAE;AAC7B,UAAI,SAAS,EAAE,YAAY,EAAE,IAAI,YAAY,MAAM,KAAK;AACtD,UAAE,eAAe;AACjB,kBAAU,CAAC,SAAS,CAAC,IAAI;AAAA,MAC3B;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,WAAU,MAAM;AACd,QAAI,OAAO,WAAW,aAAa;AACjC,mBAAa,QAAQ,sBAAsB,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,EAAE,OAAO,cAAc,aAAa,IAAI;AAC9C,QAAM,cAAc,OAAO,QAAQ,KAAK;AACxC,QAAM,gBAAgB,YAAY;AAAA,IAChC,CAAC,CAAC,KAAK,KAAK,MAAM,UAAU,aAAa,GAAG;AAAA,EAC9C,EAAE;AAEF,QAAM,eAAe,CAAC,QAAgB;AACpC,UAAM,eAAe,MAAM,GAAG;AAC9B,QAAI,OAAO,iBAAiB,WAAW;AACrC,cAAQ,KAAK,CAAC,YAAY;AAAA,IAC5B;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,KAAa,UAAqB;AACtD,YAAQ,KAAK,KAAK;AAAA,EACpB;AAEA,MAAI,CAAC,QAAQ;AACX,WACE,gBAAAF,KAAC,SAAI,OAAO,EAAE,GAAG,YAAY,GAAG,eAAe,QAAQ,EAAE,GACvD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,aACA;AAAA,YACE,iBAAiB;AAAA,YACjB,aAAa;AAAA,UACf,IACA,CAAC;AAAA,QACP;AAAA,QACA,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,cAAc,MAAM,cAAc,IAAI;AAAA,QACtC,cAAc,MAAM,cAAc,KAAK;AAAA,QACvC,MAAK;AAAA,QACL,cAAW;AAAA,QAEX;AAAA,0BAAAA,KAAC,YAAS,MAAM,IAAI;AAAA,UACpB,gBAAAA,KAAC,UAAK,mBAAK;AAAA,UACV,gBAAgB,KAAK,gBAAAA,KAAC,UAAK,OAAO,aAAc,yBAAc;AAAA;AAAA;AAAA,IACjE,GACF;AAAA,EAEJ;AAEA,SACE,gBAAAA,KAAC,SAAI,OAAO,EAAE,GAAG,YAAY,GAAG,eAAe,QAAQ,EAAE,GACvD,+BAAC,SAAI,OAAO,aACV;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAI,gBACA,EAAE,iBAAiB,4BAA4B,IAC/C,CAAC;AAAA,QACP;AAAA,QACA,SAAS,MAAM,UAAU,KAAK;AAAA,QAC9B,cAAc,MAAM,iBAAiB,IAAI;AAAA,QACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,QAE1C;AAAA,+BAAC,UAAK,OAAO,aACX;AAAA,4BAAAA,KAAC,YAAS,MAAM,IAAI;AAAA,YAAE;AAAA,YAErB,gBAAgB,KAAK,gBAAAA,KAAC,UAAK,OAAO,aAAc,yBAAc;AAAA,aACjE;AAAA,UACA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,GAAI,gBAAgB,EAAE,OAAO,2BAA2B,IAAI,CAAC;AAAA,cAC/D;AAAA,cACA,MAAK;AAAA,cACL,cAAW;AAAA,cAEX,0BAAAA,KAAC,eAAY,WAAU,QAAO;AAAA;AAAA,UAChC;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,qBAAC,SAAI,OAAO,cACV;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc,UAAU,kBAAkB;AAAA,UACjD,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,OAAO;AAAA,UACtB;AAAA,UACA,MAAK;AAAA,UACN;AAAA;AAAA,MAED;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc,YAAY,kBAAkB;AAAA,UACnD,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,SAAS;AAAA,UACxB;AAAA,UACA,MAAK;AAAA,UACN;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IAEC,cAAc,UACb,iCACE;AAAA,sBAAAA,KAAC,SAAI,OAAO,eACT,sBAAY,IAAI,CAAC,CAAC,KAAK,KAAK,MAC3B,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN;AAAA,UACA,cAAc,aAAa,GAAG;AAAA,UAC9B,aAAa,aAAa,GAAG;AAAA,UAC7B,UAAU,MAAM,aAAa,GAAG;AAAA,UAChC,UAAU,CAAC,aAAa,aAAa,KAAK,QAAQ;AAAA;AAAA,QAN7C;AAAA,MAOP,CACD,GACH;AAAA,MACC,gBAAgB,KACf,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,GAAG;AAAA,YACH,GAAI,eACA;AAAA,cACE,iBAAiB;AAAA,cACjB,OAAO;AAAA,YACT,IACA,CAAC;AAAA,UACP;AAAA,UACA,SAAS;AAAA,UACT,cAAc,MAAM,gBAAgB,IAAI;AAAA,UACxC,cAAc,MAAM,gBAAgB,KAAK;AAAA,UACzC,MAAK;AAAA,UACN;AAAA;AAAA,MAED;AAAA,OAEJ,IAEA,gBAAAA,KAAC,cAAW,UAAoB,kBAAkB,aAAa;AAAA,KAEnE,GACF;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AACb,GAAkB;AAChB,QAAM,QAAQ,OAAO,YAAY,cAAc,UAAU;AACzD,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAGO,IAAM,WAAW;;;AC5rBjB,SAAS,YAAiD,OAAa;AAC5E,SAAO;AACT;AAoCO,SAAS,YACd,QAIA;AACA,QAAM,QAAQ,CAAC;AACf,QAAM,eAAe,CAAC;AAEtB,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,QAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,WAAW,OAAO;AACnE,YAAM,GAAG,IAAI,MAAM;AACnB,UAAI,MAAM,aAAa;AACrB,qBAAa,GAAG,IAAI,MAAM;AAAA,MAC5B;AAAA,IACF,OAAO;AACL,YAAM,GAAG,IAAI;AAAA,IACf;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["value","useMemo","useMemo","useState","useEffect","jsx","useState","useEffect"]}

package/package.json

@@ -1,7 +1,27 @@
 {
   "name": "@localflag/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "description": "Type-safe feature flags for React with built-in DevTools",
   "type": "module",
+  "license": "MIT",
+  "author": "Daniel Gietmann",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/localflag/localflag.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://localflag.io",
+  "bugs": {
+    "url": "https://github.com/localflag/localflag/issues"
+  },
+  "keywords": [
+    "react",
+    "feature-flags",
+    "feature-toggles",
+    "devtools",
+    "typescript",
+    "hooks"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",