react-auth-gate 0.0.1

package/dist/core/ruleEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruleEngine.d.ts","sourceRoot":"","sources":["../../src/core/ruleEngine.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,wBAAsB,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAC7D,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,EACtC,OAAO,EAAE,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,GAC3C,OAAO,CAAC;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAC5D,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,kBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,EAC9C,OAAO,EAAE,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,GAC3C,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAUlC;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EACnE,KAAK,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,EACxC,OAAO,EAAE,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,EAC5C,QAAQ,EAAE,kBAAkB,CAAC,KAAK,EAAE,SAAS,CAAC,EAC9C,IAAI,GAAE,KAAK,GAAG,KAAa,GAC1B,OAAO,CAAC;IACT,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,oBAAoB,EAAE,CAAC;CACrC,CAAC,CAgFD;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAClE,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,SAAS,GAAG,SAAS,EAC/B,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,EAAE,MAAM,EAAE,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,CAQrC"}

package/dist/core/ruleEngine.js

@@ -0,0 +1,138 @@
+/**
+ * Rule Engine
+ *
+ * Core logic for evaluating permission rules against a context.
+ * Supports sync/async rules, string-based rules, and inline functions.
+ */
+/**
+ * Evaluates a single permission rule
+ *
+ * @param rule - The rule function to evaluate
+ * @param context - The permission context
+ * @returns Promise resolving to rule result and evaluation metadata
+ */
+export async function evaluateRule(rule, context) {
+    const startTime = performance.now();
+    try {
+        const result = await Promise.resolve(rule(context));
+        const duration = performance.now() - startTime;
+        return {
+            result: Boolean(result),
+            duration,
+        };
+    }
+    catch (error) {
+        const duration = performance.now() - startTime;
+        return {
+            result: false,
+            duration,
+            error: error instanceof Error ? error.message : String(error),
+        };
+    }
+}
+/**
+ * Resolves a string-based permission key to a rule function
+ *
+ * Strategy:
+ * 1. Check if it exists in the rules map
+ * 2. Check if it's in the permissions array (direct permission grant)
+ * 3. Check if it's in the roles array (role-based grant)
+ * 4. Otherwise deny
+ */
+export function resolveStringRule(permissionKey, rulesMap, context) {
+    // If a custom rule exists for this key, use it
+    if (rulesMap[permissionKey]) {
+        return rulesMap[permissionKey];
+    }
+    // Otherwise, check if the permission/role is directly granted
+    return (ctx) => {
+        return ctx.permissions.includes(permissionKey) || ctx.roles.includes(permissionKey);
+    };
+}
+/**
+ * Evaluates a permission check (string, array, or function)
+ *
+ * @param check - The permission check to evaluate
+ * @param context - The permission context
+ * @param rulesMap - Map of named rules
+ * @param mode - Evaluation mode: 'any' (OR) or 'all' (AND)
+ * @returns Promise resolving to evaluation result and metadata
+ */
+export async function evaluatePermission(check, context, rulesMap, mode = 'any') {
+    const ruleResults = [];
+    // Case 1: Inline function rule
+    if (typeof check === 'function') {
+        const evaluation = await evaluateRule(check, context);
+        ruleResults.push({
+            rule: 'inline',
+            result: evaluation.result,
+            duration: evaluation.duration,
+            error: evaluation.error,
+        });
+        return {
+            allowed: evaluation.result,
+            ruleResults,
+        };
+    }
+    // Case 2: Single string permission
+    if (typeof check === 'string') {
+        const rule = resolveStringRule(check, rulesMap, context);
+        const evaluation = await evaluateRule(rule, context);
+        ruleResults.push({
+            rule: check,
+            result: evaluation.result,
+            duration: evaluation.duration,
+            error: evaluation.error,
+        });
+        return {
+            allowed: evaluation.result,
+            ruleResults,
+        };
+    }
+    // Case 3: Array of permission strings
+    if (Array.isArray(check)) {
+        const evaluations = await Promise.all(check.map(async (key) => {
+            const rule = resolveStringRule(key, rulesMap, context);
+            const evaluation = await evaluateRule(rule, context);
+            return {
+                rule: key,
+                result: evaluation.result,
+                duration: evaluation.duration,
+                error: evaluation.error,
+            };
+        }));
+        ruleResults.push(...evaluations);
+        // Apply mode logic
+        const allowed = mode === 'all'
+            ? evaluations.every((e) => e.result)
+            : evaluations.some((e) => e.result);
+        return {
+            allowed,
+            ruleResults,
+        };
+    }
+    // Invalid check type
+    return {
+        allowed: false,
+        ruleResults: [
+            {
+                rule: 'unknown',
+                result: false,
+                duration: 0,
+                error: 'Invalid permission check type',
+            },
+        ],
+    };
+}
+/**
+ * Creates a permission context from configuration values
+ */
+export function createPermissionContext(user, resource, roles, permissions, flags) {
+    return {
+        user,
+        resource,
+        roles,
+        permissions,
+        flags,
+    };
+}

package/dist/core/types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Core types for react-permissions-gate
+ *
+ * Defines the type system for permission checking, rule evaluation,
+ * and context management across the library.
+ */
+/**
+ * Permission evaluation context passed to rule functions
+ */
+export interface PermissionContext<TUser = any, TResource = any> {
+    /** Current authenticated user */
+    user: TUser;
+    /** Optional resource being accessed */
+    resource?: TResource;
+    /** Array of role strings assigned to the user */
+    roles: string[];
+    /** Array of permission strings granted to the user */
+    permissions: string[];
+    /** Feature flags map */
+    flags: Record<string, boolean>;
+}
+/**
+ * Permission rule function signature
+ * Can return boolean synchronously or Promise<boolean> for async checks
+ */
+export type PermissionRule<TUser = any, TResource = any> = (ctx: PermissionContext<TUser, TResource>) => boolean | Promise<boolean>;
+/**
+ * Map of named permission rules
+ */
+export type PermissionRulesMap<TUser = any, TResource = any> = Record<string, PermissionRule<TUser, TResource>>;
+/**
+ * Permission check input - can be a rule key, array of keys, or inline function
+ */
+export type PermissionCheck<TUser = any, TResource = any> = string | string[] | PermissionRule<TUser, TResource>;
+/**
+ * Mode for rendering behavior when permission is denied
+ */
+export type PermissionMode = 'hide' | 'disable';
+/**
+ * Configuration for the PermissionsProvider
+ */
+export interface PermissionsConfig<TUser = any> {
+    /** Current authenticated user */
+    user: TUser;
+    /** Array of role strings */
+    roles?: string[];
+    /** Array of permission strings */
+    permissions?: string[];
+    /** Named permission rules */
+    rules?: PermissionRulesMap<TUser, any>;
+    /** Feature flags */
+    flags?: Record<string, boolean>;
+    /** Enable dev tools panel (defaults to process.env.NODE_ENV !== 'production') */
+    enableDevTools?: boolean;
+}
+/**
+ * Internal context value exposed by PermissionsProvider
+ */
+export interface PermissionsContextValue<TUser = any> {
+    user: TUser;
+    roles: string[];
+    permissions: string[];
+    rules: PermissionRulesMap<TUser, any>;
+    flags: Record<string, boolean>;
+    enableDevTools: boolean;
+    /** Internal: Evaluate a permission check */
+    evaluatePermission: <TResource = any>(check: PermissionCheck<TUser, TResource>, resource?: TResource, mode?: 'any' | 'all') => Promise<boolean>;
+    /** Internal: Register permission evaluation for dev tools */
+    registerEvaluation?: (evaluation: PermissionEvaluation) => void;
+}
+/**
+ * Result of a permission evaluation (used by dev tools)
+ */
+export interface PermissionEvaluation {
+    /** Unique ID for this evaluation */
+    id: string;
+    /** Timestamp of evaluation */
+    timestamp: number;
+    /** Permission check that was evaluated */
+    check: string | string[];
+    /** Resource involved (if any) */
+    resource?: any;
+    /** Result of the check */
+    allowed: boolean;
+    /** Details about which rules were evaluated */
+    ruleResults: RuleEvaluationResult[];
+    /** Component that triggered this check (if available) */
+    component?: string;
+    /** Evaluation mode (any/all) */
+    mode?: 'any' | 'all';
+}
+/**
+ * Result of evaluating a single rule
+ */
+export interface RuleEvaluationResult {
+    /** Rule key or 'inline' for inline functions */
+    rule: string;
+    /** Result of the rule evaluation */
+    result: boolean;
+    /** Time taken to evaluate (ms) */
+    duration: number;
+    /** Error if rule threw */
+    error?: string;
+}
+/**
+ * Dev tools state
+ */
+export interface DevToolsState {
+    /** All permission evaluations */
+    evaluations: PermissionEvaluation[];
+    /** Whether dev panel is open */
+    isOpen: boolean;
+    /** Override user context for testing */
+    overrideUser?: any;
+    /** Override roles for testing */
+    overrideRoles?: string[];
+    /** Override permissions for testing */
+    overridePermissions?: string[];
+    /** Override flags for testing */
+    overrideFlags?: Record<string, boolean>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG;IAC7D,iCAAiC;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,sDAAsD;IACtD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,IAAI,CACzD,GAAG,EAAE,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,KACrC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,IAAI,MAAM,CACnE,MAAM,EACN,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,KAAK,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,IACpD,MAAM,GACN,MAAM,EAAE,GACR,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAErC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,KAAK,GAAG,GAAG;IAC5C,iCAAiC;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACvC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,iFAAiF;IACjF,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,KAAK,GAAG,GAAG;IAClD,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,EAAE,kBAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;IAExB,4CAA4C;IAC5C,kBAAkB,EAAE,CAAC,SAAS,GAAG,GAAG,EAClC,KAAK,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,EACxC,QAAQ,CAAC,EAAE,SAAS,EACpB,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,KACjB,OAAO,CAAC,OAAO,CAAC,CAAC;IAEtB,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,0BAA0B;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC"}

package/dist/core/types.js

@@ -0,0 +1,7 @@
+/**
+ * Core types for react-permissions-gate
+ *
+ * Defines the type system for permission checking, rule evaluation,
+ * and context management across the library.
+ */
+export {};

package/dist/devtools/DevPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DevPanel Component
+ *
+ * The killer feature: automatic development panel for permission debugging.
+ * Shows all permission checks, allows context overrides, and provides live feedback.
+ */
+import React from 'react';
+/**
+ * DevPanel Component
+ * Automatically shown in development mode
+ */
+export declare function DevPanel(): React.JSX.Element | null;
+//# sourceMappingURL=DevPanel.d.ts.map

package/dist/devtools/DevPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevPanel.d.ts","sourceRoot":"","sources":["../../src/devtools/DevPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAsJjD;;;GAGG;AACH,wBAAgB,QAAQ,6BA4GvB"}

package/dist/devtools/DevPanel.js

@@ -0,0 +1,308 @@
+/**
+ * DevPanel Component
+ *
+ * The killer feature: automatic development panel for permission debugging.
+ * Shows all permission checks, allows context overrides, and provides live feedback.
+ */
+import React, { useState, useMemo } from 'react';
+import { devStore } from './DevStore';
+import { useDevToolsState } from './useDevRegister';
+import { usePermissionsContext } from '../react/PermissionsProvider';
+const PANEL_STYLES = {
+    container: {
+        position: 'fixed',
+        bottom: 0,
+        right: 0,
+        width: '450px',
+        maxHeight: '600px',
+        backgroundColor: '#1e1e1e',
+        color: '#d4d4d4',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+        boxShadow: '0 -2px 10px rgba(0,0,0,0.5)',
+        zIndex: 999999,
+        display: 'flex',
+        flexDirection: 'column',
+        borderTopLeftRadius: '8px',
+    },
+    header: {
+        padding: '12px 16px',
+        backgroundColor: '#2d2d2d',
+        borderBottom: '1px solid #3e3e3e',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderTopLeftRadius: '8px',
+    },
+    title: {
+        margin: 0,
+        fontSize: '14px',
+        fontWeight: 'bold',
+        color: '#4fc3f7',
+    },
+    button: {
+        background: 'none',
+        border: '1px solid #4fc3f7',
+        color: '#4fc3f7',
+        padding: '4px 8px',
+        cursor: 'pointer',
+        fontSize: '11px',
+        borderRadius: '3px',
+        marginLeft: '8px',
+    },
+    content: {
+        flex: 1,
+        overflowY: 'auto',
+        padding: '16px',
+    },
+    tab: {
+        padding: '8px 16px',
+        cursor: 'pointer',
+        display: 'inline-block',
+    },
+    activeTab: {
+        borderBottom: '2px solid #4fc3f7',
+        color: '#4fc3f7',
+    },
+    tabs: {
+        display: 'flex',
+        backgroundColor: '#252525',
+        borderBottom: '1px solid #3e3e3e',
+    },
+    evaluation: {
+        marginBottom: '12px',
+        padding: '8px',
+        backgroundColor: '#252525',
+        borderRadius: '4px',
+        borderLeft: '3px solid',
+    },
+    allowed: {
+        borderLeftColor: '#4caf50',
+    },
+    denied: {
+        borderLeftColor: '#f44336',
+    },
+    timestamp: {
+        fontSize: '10px',
+        color: '#888',
+    },
+    badge: {
+        display: 'inline-block',
+        padding: '2px 6px',
+        borderRadius: '3px',
+        fontSize: '10px',
+        marginRight: '4px',
+        marginTop: '4px',
+    },
+    successBadge: {
+        backgroundColor: '#4caf50',
+        color: '#fff',
+    },
+    errorBadge: {
+        backgroundColor: '#f44336',
+        color: '#fff',
+    },
+    toggle: {
+        position: 'fixed',
+        bottom: '10px',
+        right: '10px',
+        width: '50px',
+        height: '50px',
+        borderRadius: '50%',
+        backgroundColor: '#4fc3f7',
+        color: '#fff',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '20px',
+        boxShadow: '0 2px 10px rgba(0,0,0,0.3)',
+        zIndex: 999998,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    section: {
+        marginBottom: '16px',
+    },
+    sectionTitle: {
+        fontSize: '12px',
+        fontWeight: 'bold',
+        marginBottom: '8px',
+        color: '#4fc3f7',
+    },
+    checkbox: {
+        marginRight: '6px',
+    },
+    label: {
+        display: 'block',
+        padding: '4px 0',
+        cursor: 'pointer',
+    },
+    input: {
+        width: '100%',
+        padding: '6px',
+        backgroundColor: '#1e1e1e',
+        border: '1px solid #3e3e3e',
+        color: '#d4d4d4',
+        borderRadius: '3px',
+        marginTop: '4px',
+        fontFamily: 'monospace',
+        fontSize: '11px',
+    },
+};
+/**
+ * DevPanel Component
+ * Automatically shown in development mode
+ */
+export function DevPanel() {
+    const state = useDevToolsState();
+    const context = usePermissionsContext();
+    const [activeTab, setActiveTab] = useState('evaluations');
+    if (!context.enableDevTools) {
+        return null;
+    }
+    // Apply overrides to current context
+    const effectiveRoles = state.overrideRoles || context.roles;
+    const effectivePermissions = state.overridePermissions || context.permissions;
+    const effectiveFlags = state.overrideFlags || context.flags;
+    return (React.createElement(React.Fragment, null,
+        !state.isOpen && (React.createElement("button", { style: PANEL_STYLES.toggle, onClick: () => devStore.togglePanel(), title: "Open Permissions Dev Panel" }, "\uD83D\uDD10")),
+        state.isOpen && (React.createElement("div", { style: PANEL_STYLES.container },
+            React.createElement("div", { style: PANEL_STYLES.header },
+                React.createElement("h3", { style: PANEL_STYLES.title }, "\uD83D\uDD10 Permissions Dev Panel"),
+                React.createElement("div", null,
+                    React.createElement("button", { style: PANEL_STYLES.button, onClick: () => devStore.clearEvaluations() }, "Clear"),
+                    React.createElement("button", { style: PANEL_STYLES.button, onClick: () => devStore.setOpen(false) }, "\u2715"))),
+            React.createElement("div", { style: PANEL_STYLES.tabs },
+                React.createElement("div", { style: {
+                        ...PANEL_STYLES.tab,
+                        ...(activeTab === 'evaluations' ? PANEL_STYLES.activeTab : {}),
+                    }, onClick: () => setActiveTab('evaluations') },
+                    "Evaluations (",
+                    state.evaluations.length,
+                    ")"),
+                React.createElement("div", { style: {
+                        ...PANEL_STYLES.tab,
+                        ...(activeTab === 'overrides' ? PANEL_STYLES.activeTab : {}),
+                    }, onClick: () => setActiveTab('overrides') }, "Overrides"),
+                React.createElement("div", { style: {
+                        ...PANEL_STYLES.tab,
+                        ...(activeTab === 'context' ? PANEL_STYLES.activeTab : {}),
+                    }, onClick: () => setActiveTab('context') }, "Context")),
+            React.createElement("div", { style: PANEL_STYLES.content },
+                activeTab === 'evaluations' && (React.createElement(EvaluationsTab, { evaluations: state.evaluations })),
+                activeTab === 'overrides' && (React.createElement(OverridesTab, { roles: context.roles, permissions: context.permissions, flags: context.flags, effectiveRoles: effectiveRoles, effectivePermissions: effectivePermissions, effectiveFlags: effectiveFlags })),
+                activeTab === 'context' && (React.createElement(ContextTab, { user: context.user, roles: effectiveRoles, permissions: effectivePermissions, flags: effectiveFlags })))))));
+}
+/**
+ * Evaluations tab content
+ */
+function EvaluationsTab({ evaluations }) {
+    if (evaluations.length === 0) {
+        return React.createElement("div", { style: { color: '#888' } }, "No permission checks yet...");
+    }
+    return (React.createElement("div", null, evaluations.map((evaluation) => (React.createElement("div", { key: evaluation.id, style: {
+            ...PANEL_STYLES.evaluation,
+            ...(evaluation.allowed ? PANEL_STYLES.allowed : PANEL_STYLES.denied),
+        } },
+        React.createElement("div", { style: { marginBottom: '4px' } },
+            React.createElement("strong", { style: { color: evaluation.allowed ? '#4caf50' : '#f44336' } }, evaluation.allowed ? '✓ ALLOWED' : '✗ DENIED'),
+            React.createElement("span", { style: { marginLeft: '8px', color: '#d4d4d4' } }, typeof evaluation.check === 'string'
+                ? evaluation.check
+                : Array.isArray(evaluation.check)
+                    ? evaluation.check.join(', ')
+                    : 'inline function')),
+        React.createElement("div", { style: PANEL_STYLES.timestamp },
+            new Date(evaluation.timestamp).toLocaleTimeString(),
+            evaluation.mode && ` • mode: ${evaluation.mode}`),
+        React.createElement("div", { style: { marginTop: '6px' } }, evaluation.ruleResults.map((result, idx) => (React.createElement("span", { key: idx, style: {
+                ...PANEL_STYLES.badge,
+                ...(result.result ? PANEL_STYLES.successBadge : PANEL_STYLES.errorBadge),
+            }, title: `${result.duration.toFixed(2)}ms${result.error ? ` - ${result.error}` : ''}` },
+            result.rule,
+            ": ",
+            result.result ? '✓' : '✗')))),
+        evaluation.resource && (React.createElement("div", { style: { marginTop: '4px', fontSize: '10px', color: '#888' } },
+            "Resource: ",
+            JSON.stringify(evaluation.resource).slice(0, 50),
+            "...")))))));
+}
+/**
+ * Overrides tab content
+ */
+function OverridesTab({ roles, permissions, flags, effectiveRoles, effectivePermissions, effectiveFlags, }) {
+    const [newRole, setNewRole] = useState('');
+    const [newPermission, setNewPermission] = useState('');
+    const [newFlag, setNewFlag] = useState('');
+    // Collect all unique roles and permissions from evaluations
+    const allRoles = useMemo(() => {
+        const rolesSet = new Set([...roles, ...effectiveRoles]);
+        return Array.from(rolesSet).sort();
+    }, [roles, effectiveRoles]);
+    const allPermissions = useMemo(() => {
+        const permsSet = new Set([...permissions, ...effectivePermissions]);
+        return Array.from(permsSet).sort();
+    }, [permissions, effectivePermissions]);
+    return (React.createElement("div", null,
+        React.createElement("button", { style: {
+                ...PANEL_STYLES.button,
+                width: '100%',
+                marginBottom: '16px',
+            }, onClick: () => devStore.resetOverrides() }, "Reset All Overrides"),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle }, "Roles"),
+            allRoles.map((role) => (React.createElement("label", { key: role, style: PANEL_STYLES.label },
+                React.createElement("input", { type: "checkbox", style: PANEL_STYLES.checkbox, checked: effectiveRoles.includes(role), onChange: () => devStore.toggleRole(role, roles) }),
+                role))),
+            React.createElement("input", { type: "text", style: PANEL_STYLES.input, placeholder: "Add new role...", value: newRole, onChange: (e) => setNewRole(e.target.value), onKeyPress: (e) => {
+                    if (e.key === 'Enter' && newRole) {
+                        devStore.toggleRole(newRole, roles);
+                        setNewRole('');
+                    }
+                } })),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle }, "Permissions"),
+            allPermissions.map((permission) => (React.createElement("label", { key: permission, style: PANEL_STYLES.label },
+                React.createElement("input", { type: "checkbox", style: PANEL_STYLES.checkbox, checked: effectivePermissions.includes(permission), onChange: () => devStore.togglePermission(permission, permissions) }),
+                permission))),
+            React.createElement("input", { type: "text", style: PANEL_STYLES.input, placeholder: "Add new permission...", value: newPermission, onChange: (e) => setNewPermission(e.target.value), onKeyPress: (e) => {
+                    if (e.key === 'Enter' && newPermission) {
+                        devStore.togglePermission(newPermission, permissions);
+                        setNewPermission('');
+                    }
+                } })),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle }, "Feature Flags"),
+            Object.entries(effectiveFlags).map(([flag, value]) => (React.createElement("label", { key: flag, style: PANEL_STYLES.label },
+                React.createElement("input", { type: "checkbox", style: PANEL_STYLES.checkbox, checked: value, onChange: () => devStore.toggleFlag(flag, flags) }),
+                flag))),
+            React.createElement("input", { type: "text", style: PANEL_STYLES.input, placeholder: "Add new flag...", value: newFlag, onChange: (e) => setNewFlag(e.target.value), onKeyPress: (e) => {
+                    if (e.key === 'Enter' && newFlag) {
+                        devStore.toggleFlag(newFlag, flags);
+                        setNewFlag('');
+                    }
+                } }))));
+}
+/**
+ * Context tab content
+ */
+function ContextTab({ user, roles, permissions, flags, }) {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle }, "User"),
+            React.createElement("pre", { style: { fontSize: '10px', overflow: 'auto' } }, JSON.stringify(user, null, 2))),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle },
+                "Roles (",
+                roles.length,
+                ")"),
+            React.createElement("div", null, roles.length > 0 ? roles.join(', ') : 'None')),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle },
+                "Permissions (",
+                permissions.length,
+                ")"),
+            React.createElement("div", null, permissions.length > 0 ? permissions.join(', ') : 'None')),
+        React.createElement("div", { style: PANEL_STYLES.section },
+            React.createElement("div", { style: PANEL_STYLES.sectionTitle }, "Feature Flags"),
+            React.createElement("pre", { style: { fontSize: '10px' } }, JSON.stringify(flags, null, 2)))));
+}