@mercurjs/dashboard-shared 2.3.2-canary.1 → 2.3.2-canary.2

package/dist/index.d.ts

@@ -16,7 +16,8 @@ import { CellContext, Row, ColumnDef, ColumnDefTemplate, HeaderContext, Table as
 import { TFunction } from 'i18next';
 import { ClientError } from '@mercurjs/client';
 import * as react_currency_input_field from 'react-currency-input-field';
-import { CustomFieldsConfig, NavItemOverride, CustomFormField, CustomDisplayField, SectionAction, CustomListExtension } from '@mercurjs/dashboard-sdk';
+import * as _mercurjs_dashboard_sdk from '@mercurjs/dashboard-sdk';
+import { PermissionsContextValue, UserPolicy, PermissionsRequirementsContextValue, Permission, PermissionResource, PermissionOperation, CustomFieldsConfig, NavItemOverride, CustomFormField, CustomDisplayField, SectionAction, CustomListExtension } from '@mercurjs/dashboard-sdk';
 
 type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
     all: readonly [TKey];
@@ -1508,6 +1509,151 @@ type QueryParams<T extends string> = {
 };
 declare function useQueryParams<T extends string>(keys: T[], prefix?: string): QueryParams<T>;
 
+declare const PermissionsContext: React$1.Context<PermissionsContextValue | null>;
+
+interface PermissionsProviderProps extends PropsWithChildren {
+    policy: UserPolicy | null;
+    isLoading?: boolean;
+    /**
+     * Whether the RBAC feature flag is enabled. When `false`, every permission
+     * check resolves to `true`.
+     */
+    isRbacEnabled?: boolean;
+}
+declare const PermissionsProvider: ({ policy, isLoading, isRbacEnabled, children, }: PermissionsProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const PermissionsRequirementsContext: React$1.Context<PermissionsRequirementsContextValue | null>;
+
+/**
+ * Collects the permission requirements declared by descendant guards so a
+ * page can surface them (see `RequiredPermissionsSection`). Mount it around a
+ * page body; guards work fine without it.
+ */
+declare const PermissionsRequirementsProvider: ({ children, }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+
+interface BasePermissionProps {
+    source?: string;
+    enabled?: boolean;
+}
+interface WithPermission extends BasePermissionProps {
+    permission: Permission;
+    permissions?: never;
+    resource?: never;
+    operation?: never;
+    requireAll?: never;
+}
+interface WithPermissions extends BasePermissionProps {
+    permissions: Permission[];
+    /** If true, ALL permissions are required. Defaults to ANY. */
+    requireAll?: boolean;
+    permission?: never;
+    resource?: never;
+    operation?: never;
+}
+interface WithResourceOperation extends BasePermissionProps {
+    resource: PermissionResource;
+    operation: PermissionOperation;
+    permission?: never;
+    permissions?: never;
+    requireAll?: never;
+}
+type PermissionProps = WithPermission | WithPermissions | WithResourceOperation;
+declare const resolvePermissionProps: (props: PermissionProps) => {
+    permissions: Permission[] | null;
+    requireAll: boolean;
+};
+
+type PermissionsRequirementProps = PropsWithChildren<PermissionProps>;
+/**
+ * Declares a permission requirement for the surrounding subtree without
+ * gating it. Use `PermissionGuard` when the children should be hidden.
+ */
+declare const PermissionsRequirement: ({ children, source, enabled, ...props }: PermissionsRequirementProps) => react_jsx_runtime.JSX.Element;
+
+type PermissionGuardProps = PropsWithChildren<PermissionProps & {
+    /** Rendered when access is denied. Nothing renders when omitted. */
+    fallback?: ReactNode;
+    showLoading?: boolean;
+    loadingComponent?: ReactNode;
+}>;
+/**
+ * Hides its children unless the actor holds the declared permission, and
+ * registers the requirement so the page can surface what is missing.
+ *
+ * @example
+ * ```tsx
+ * <PermissionGuard resource="product" operation="create">
+ *   <Button>Create</Button>
+ * </PermissionGuard>
+ * ```
+ */
+declare const PermissionGuard: ({ children, fallback, showLoading, loadingComponent, source, enabled, ...props }: PermissionGuardProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Route-level guard. Mount as a route's `element` and declare the requirement
+ * on the route's `handle`. Unlike `PermissionGuard`, `requireAll` defaults to
+ * `true` here.
+ *
+ * @example
+ * ```tsx
+ * {
+ *   path: "roles",
+ *   element: <RoutePermissionGuard />,
+ *   handle: { permissions: "rbac_role:read" },
+ *   children: [...],
+ * }
+ * ```
+ */
+declare const RoutePermissionGuard: () => react_jsx_runtime.JSX.Element;
+
+/**
+ * Renders the requirements that descendant guards registered with the nearest
+ * `PermissionsRequirementsProvider`. Renders nothing when RBAC is off.
+ */
+declare const RequiredPermissionsSection: () => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * @example
+ * ```tsx
+ * const { can, hasPermission } = usePermissions()
+ *
+ * if (can("customer", "create")) { ... }
+ * if (hasPermission("customer:read")) { ... }
+ * ```
+ */
+declare const usePermissions: () => _mercurjs_dashboard_sdk.PermissionsContextValue;
+
+interface UseRegisterPermissionsOptions {
+    /** If true, ALL permissions are required. Defaults to ANY. */
+    requireAll?: boolean;
+    source?: string;
+    enabled?: boolean;
+}
+/**
+ * Declares what the calling subtree needs. No-ops when there is no
+ * `PermissionsRequirementsProvider` above it.
+ */
+declare const useRegisterPermissions: (permissions: Permission[] | null | undefined, options?: UseRegisterPermissionsOptions) => void;
+
+declare const useRequiredPermissions: () => _mercurjs_dashboard_sdk.PermissionRequirement[];
+
+/**
+ * @example
+ * ```tsx
+ * const { canCreate } = useResourcePermissions("product")
+ * {canCreate && <Button>Create</Button>}
+ * ```
+ */
+declare const useResourcePermissions: (resource: PermissionResource) => {
+    canRead: boolean;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+    can: (operation: "read" | "create" | "update" | "delete") => boolean;
+    resource: PermissionResource;
+    isLoading: boolean;
+};
+
 type WidgetPlacement = "before" | "after";
 type Widget = {
     Component: ComponentType<{
@@ -1900,4 +2046,4 @@ declare const extractPricesFromOffers: (offers: ExtractableOffers, regions: Http
     variant_id: string;
 }[];
 
-export { type Action, type ActionGroup, ActionMenu, AddressForm, AddressSchema, type AttributeChange, type AttributeChangeKind, AttributeValueInput, BadgeListSummary, ChipGroup, ChipInput, CodeCell, CodeHeader, Combobox, type Command, ConditionalTooltip, ConfirmPrompt, type ConfirmPromptProps, type CoreNavItem, CountrySelect, CreatedAtCell, CreatedAtHeader, type CurrencyInfo, type CustomFieldsModule, CustomerInfo, DataGrid, DataTable, DateCell, DateHeader, DateRangeDisplay, DeprecatedPercentageInput, DisplayExtensionZone, type DisplayExtensionZoneProps, DisplayField, type DisplayFieldProps, DisplaySection, type DisplaySectionField, type DisplaySectionProps, type EditAttributeAttribute, EditAttributeForm, type EditAttributeFormProps, EmailCell, EmailForm, EmailHeader, EmailSchema, ErrorBoundary, type ExtendableTable, ExtensionProvider, type ExtensionProviderProps, ExtensionRegistry, type ExtractableOffer, type ExtractableOffers, type FieldDiff, FilePreview, type FileType, FileUpload, type FileUploadProps, type Filter, FilterGroup, Form, FormExtensionZone, type FormExtensionZoneProps, GeneralSectionSkeleton, HandleInput, HeadingSkeleton, IconAvatar, IconButtonSkeleton, ImageAvatar, type ImageRef, IncludesTaxTooltip, InfiniteList, JsonViewSection, JsonViewSectionSkeleton, KeyboundForm, LinkButton, ListBadge, ListSummary, Listicle, type ListicleProps, LocalizedTablePagination, type MediaDiff, MetadataForm, MetadataSection, MoneyAmountCell, NameCell, NameHeader, type NavigationModule, NoRecords, type NoRecordsProps, NoResults, type NoResultsProps, OrderBy, PercentageInput, PlaceholderCell, PriceListDateStatus, type PriceListGridGroupRow, type PriceListGridOfferRow, type PriceListGridRow, PriceListStatus, PriceListType, type ProductAttributeBatchPayload, ProductAttributeSection, type ProductAttributeSectionProps, type ProductChangeAttribute, ProductChangePanel, type ProductChangePanelProps, type ProductChangeProduct, type ProductChangeResolvers, type ProductChangeVariant, type ProductChangeView, ProgressBar, ProvinceSelect, Query, REFERENCE_FIELDS, type ReferenceField, type ResolvedAttribute, type ResolvedDisplays, type ResolvedFormField, RouteDrawer, RouteFocusModal, SectionRow, type SectionRowProps, SegmentedControl, type SegmentedControlOption, SidebarLink, type SidebarLinkProps, SingleColumnPage, SingleColumnPageSkeleton, Skeleton, SortableList, SortableTree, StackedDrawer, StackedFocusModal, type StaticCountry, StatusCell, SwitchBox, type TQueryKey, type TabDefinition, TabbedForm, TableFooterSkeleton, TableSectionSkeleton, TableSkeleton, TextCell, TextHeader, TextSkeleton, Thumbnail, TransferOwnershipSchema, TwoColumnPage, TwoColumnPageSkeleton, type UseExtendableFormProps, type UseExtendableTableProps, type UseQueryOptionsWrapper, type VariantGroup, VisuallyHidden, type Widget, type WidgetModule, type WidgetPlacement, WidgetZone, type WidgetZoneProps, type ZoneWidgets, _DataTable, applyNavOverrides, buildAdditionalDataDefaults, buildAdditionalDataSchema, buildOfferGridData, buildProductChangeView, countries, createDataGridHelper, createDataGridPriceColumns, createFormHelper, currencies, extractPricesFromOffers, extractReferenceIds, formatFieldValue, genericForwardRef, getCountryByIso2, getCurrencySymbol, getDecimalDigits, getExtensionRegistry, getFormattedAddress, getFormattedCountry, getLinkQuery, getLocaleAmount, getNativeSymbol, getPriceListStatus, getStylizedAmount, humanizeFieldName, isAmountLessThenRoundingError, isImageList, isPriceListGroupRow, isProductRow, isReferenceField, isSameAddress, linkFields, productChangeViewHasContent, queryClient, queryKeysFactory, useCombinedRefs, useCommandHistory, useDataTable, useDate, useDisplayFieldOverride, useDocumentDirection, useExtendableForm, useExtendableTable, useExtension, useLinkQuery, useQueryParams, useRouteModal, useStackedModal, useTabManagement, useTabbedForm, withLinkFields };
+export { type Action, type ActionGroup, ActionMenu, AddressForm, AddressSchema, type AttributeChange, type AttributeChangeKind, AttributeValueInput, BadgeListSummary, ChipGroup, ChipInput, CodeCell, CodeHeader, Combobox, type Command, ConditionalTooltip, ConfirmPrompt, type ConfirmPromptProps, type CoreNavItem, CountrySelect, CreatedAtCell, CreatedAtHeader, type CurrencyInfo, type CustomFieldsModule, CustomerInfo, DataGrid, DataTable, DateCell, DateHeader, DateRangeDisplay, DeprecatedPercentageInput, DisplayExtensionZone, type DisplayExtensionZoneProps, DisplayField, type DisplayFieldProps, DisplaySection, type DisplaySectionField, type DisplaySectionProps, type EditAttributeAttribute, EditAttributeForm, type EditAttributeFormProps, EmailCell, EmailForm, EmailHeader, EmailSchema, ErrorBoundary, type ExtendableTable, ExtensionProvider, type ExtensionProviderProps, ExtensionRegistry, type ExtractableOffer, type ExtractableOffers, type FieldDiff, FilePreview, type FileType, FileUpload, type FileUploadProps, type Filter, FilterGroup, Form, FormExtensionZone, type FormExtensionZoneProps, GeneralSectionSkeleton, HandleInput, HeadingSkeleton, IconAvatar, IconButtonSkeleton, ImageAvatar, type ImageRef, IncludesTaxTooltip, InfiniteList, JsonViewSection, JsonViewSectionSkeleton, KeyboundForm, LinkButton, ListBadge, ListSummary, Listicle, type ListicleProps, LocalizedTablePagination, type MediaDiff, MetadataForm, MetadataSection, MoneyAmountCell, NameCell, NameHeader, type NavigationModule, NoRecords, type NoRecordsProps, NoResults, type NoResultsProps, OrderBy, PercentageInput, PermissionGuard, type PermissionGuardProps, type PermissionProps, PermissionsContext, PermissionsProvider, type PermissionsProviderProps, PermissionsRequirement, type PermissionsRequirementProps, PermissionsRequirementsContext, PermissionsRequirementsProvider, PlaceholderCell, PriceListDateStatus, type PriceListGridGroupRow, type PriceListGridOfferRow, type PriceListGridRow, PriceListStatus, PriceListType, type ProductAttributeBatchPayload, ProductAttributeSection, type ProductAttributeSectionProps, type ProductChangeAttribute, ProductChangePanel, type ProductChangePanelProps, type ProductChangeProduct, type ProductChangeResolvers, type ProductChangeVariant, type ProductChangeView, ProgressBar, ProvinceSelect, Query, REFERENCE_FIELDS, type ReferenceField, RequiredPermissionsSection, type ResolvedAttribute, type ResolvedDisplays, type ResolvedFormField, RouteDrawer, RouteFocusModal, RoutePermissionGuard, SectionRow, type SectionRowProps, SegmentedControl, type SegmentedControlOption, SidebarLink, type SidebarLinkProps, SingleColumnPage, SingleColumnPageSkeleton, Skeleton, SortableList, SortableTree, StackedDrawer, StackedFocusModal, type StaticCountry, StatusCell, SwitchBox, type TQueryKey, type TabDefinition, TabbedForm, TableFooterSkeleton, TableSectionSkeleton, TableSkeleton, TextCell, TextHeader, TextSkeleton, Thumbnail, TransferOwnershipSchema, TwoColumnPage, TwoColumnPageSkeleton, type UseExtendableFormProps, type UseExtendableTableProps, type UseQueryOptionsWrapper, type UseRegisterPermissionsOptions, type VariantGroup, VisuallyHidden, type Widget, type WidgetModule, type WidgetPlacement, WidgetZone, type WidgetZoneProps, type ZoneWidgets, _DataTable, applyNavOverrides, buildAdditionalDataDefaults, buildAdditionalDataSchema, buildOfferGridData, buildProductChangeView, countries, createDataGridHelper, createDataGridPriceColumns, createFormHelper, currencies, extractPricesFromOffers, extractReferenceIds, formatFieldValue, genericForwardRef, getCountryByIso2, getCurrencySymbol, getDecimalDigits, getExtensionRegistry, getFormattedAddress, getFormattedCountry, getLinkQuery, getLocaleAmount, getNativeSymbol, getPriceListStatus, getStylizedAmount, humanizeFieldName, isAmountLessThenRoundingError, isImageList, isPriceListGroupRow, isProductRow, isReferenceField, isSameAddress, linkFields, productChangeViewHasContent, queryClient, queryKeysFactory, resolvePermissionProps, useCombinedRefs, useCommandHistory, useDataTable, useDate, useDisplayFieldOverride, useDocumentDirection, useExtendableForm, useExtendableTable, useExtension, useLinkQuery, usePermissions, useQueryParams, useRegisterPermissions, useRequiredPermissions, useResourcePermissions, useRouteModal, useStackedModal, useTabManagement, useTabbedForm, withLinkFields };

package/dist/index.js

@@ -27882,6 +27882,433 @@ var useDataTable2 = ({
   return { table };
 };
 
+// src/permissions/permissions-context.tsx
+import { createContext as createContext10 } from "react";
+var PermissionsContext = createContext10(
+  null
+);
+
+// src/permissions/permissions-provider.tsx
+import { useCallback as useCallback26, useMemo as useMemo22 } from "react";
+
+// ../dashboard-sdk/dist/index.js
+var OPERATION_IMPLICATIONS = {
+  read: ["read"],
+  create: ["create"],
+  update: ["update"],
+  delete: ["delete"],
+  "*": ["read", "create", "update", "delete", "*"]
+};
+function parsePermission(permission) {
+  const parts = permission.split(":");
+  if (parts.length !== 2) {
+    return null;
+  }
+  const [resource, operation] = parts;
+  return {
+    resource,
+    operation
+  };
+}
+function buildPermission(resource, operation) {
+  return `${resource}:${operation}`;
+}
+
+// src/permissions/permissions-provider.tsx
+import { jsx as jsx105 } from "react/jsx-runtime";
+var PermissionsProvider = ({
+  policy,
+  isLoading = false,
+  isRbacEnabled = true,
+  children
+}) => {
+  const permissionsMap = useMemo22(() => {
+    const index = /* @__PURE__ */ Object.create(null);
+    for (const granted of policy?.permissions ?? []) {
+      const parsed = parsePermission(granted);
+      if (!parsed) {
+        continue;
+      }
+      const { resource, operation } = parsed;
+      const impliedOperations = OPERATION_IMPLICATIONS[operation] || [operation];
+      for (const impliedOperation of impliedOperations) {
+        index[buildPermission(resource, impliedOperation)] = true;
+      }
+    }
+    return index;
+  }, [policy]);
+  const hasPermission = useCallback26(
+    (permission) => {
+      if (!isRbacEnabled) {
+        return true;
+      }
+      return !!permissionsMap[permission];
+    },
+    [isRbacEnabled, permissionsMap]
+  );
+  const hasAnyPermission = useCallback26(
+    (permissions) => {
+      if (!isRbacEnabled) {
+        return true;
+      }
+      if (!permissions?.length) {
+        return false;
+      }
+      return permissions.some(hasPermission);
+    },
+    [isRbacEnabled, hasPermission]
+  );
+  const hasAllPermissions = useCallback26(
+    (permissions) => {
+      if (!isRbacEnabled) {
+        return true;
+      }
+      if (!permissions?.length) {
+        return false;
+      }
+      return permissions.every(hasPermission);
+    },
+    [isRbacEnabled, hasPermission]
+  );
+  const can = useCallback26(
+    (resource, operation) => {
+      if (!isRbacEnabled) {
+        return true;
+      }
+      return !!permissionsMap[buildPermission(resource, operation)];
+    },
+    [isRbacEnabled, permissionsMap]
+  );
+  const value = useMemo22(
+    () => ({
+      policy,
+      isLoading,
+      isRbacEnabled,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions,
+      can
+    }),
+    [
+      policy,
+      isLoading,
+      isRbacEnabled,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions,
+      can
+    ]
+  );
+  return /* @__PURE__ */ jsx105(PermissionsContext.Provider, { value, children });
+};
+
+// src/permissions/permissions-requirements-context.tsx
+import { createContext as createContext11 } from "react";
+var PermissionsRequirementsContext = createContext11(null);
+
+// src/permissions/permissions-requirements-provider.tsx
+import { useCallback as useCallback27, useMemo as useMemo23, useState as useState37 } from "react";
+import { jsx as jsx106 } from "react/jsx-runtime";
+var PermissionsRequirementsProvider = ({
+  children
+}) => {
+  const [requirements, setRequirements] = useState37({});
+  const registerRequiredPermissions = useCallback27(
+    (id, requirement) => {
+      setRequirements((prevState) => ({ ...prevState, [id]: requirement }));
+    },
+    []
+  );
+  const unregisterRequiredPermissions = useCallback27((id) => {
+    setRequirements((prevState) => {
+      const newState = { ...prevState };
+      delete newState[id];
+      return newState;
+    });
+  }, []);
+  const requiredPermissions = useMemo23(() => {
+    const deduped = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const requirement of Object.values(requirements)) {
+      if (!requirement.permissions.length) {
+        continue;
+      }
+      const key = [
+        requirement.requireAll ? "all" : "any",
+        [...requirement.permissions].sort().join("|"),
+        requirement.source || ""
+      ].join("::");
+      if (seen.has(key)) {
+        continue;
+      }
+      seen.add(key);
+      deduped.push(requirement);
+    }
+    return deduped;
+  }, [requirements]);
+  const value = useMemo23(
+    () => ({
+      requiredPermissions,
+      registerRequiredPermissions,
+      unregisterRequiredPermissions
+    }),
+    [
+      requiredPermissions,
+      registerRequiredPermissions,
+      unregisterRequiredPermissions
+    ]
+  );
+  return /* @__PURE__ */ jsx106(PermissionsRequirementsContext.Provider, { value, children });
+};
+
+// src/permissions/resolve-permission-props.ts
+var resolvePermissionProps = (props) => {
+  if (props.permission) {
+    return { permissions: [props.permission], requireAll: false };
+  }
+  if (props.permissions) {
+    return { permissions: props.permissions, requireAll: !!props.requireAll };
+  }
+  if (props.resource && props.operation) {
+    return {
+      permissions: [buildPermission(props.resource, props.operation)],
+      requireAll: false
+    };
+  }
+  return { permissions: null, requireAll: false };
+};
+
+// src/permissions/use-register-permissions.tsx
+import { useContext as useContext10, useEffect as useEffect25, useId as useId2 } from "react";
+var normalizePermissions = (permissions) => Array.from(new Set(permissions)).sort();
+var noop = () => {
+};
+var useRegisterPermissions = (permissions, options = {}) => {
+  const context = useContext10(PermissionsRequirementsContext);
+  const registerRequiredPermissions = context?.registerRequiredPermissions ?? noop;
+  const unregisterRequiredPermissions = context?.unregisterRequiredPermissions ?? noop;
+  const id = useId2();
+  const enabled = options.enabled ?? true;
+  const requireAll = options.requireAll ?? false;
+  const source = options.source;
+  const permissionsKey = permissions?.length ? normalizePermissions(permissions).join("|") : "";
+  useEffect25(() => {
+    if (!enabled || !permissionsKey) {
+      return;
+    }
+    registerRequiredPermissions(id, {
+      permissions: permissionsKey.split("|"),
+      requireAll,
+      source
+    });
+    return () => {
+      unregisterRequiredPermissions(id);
+    };
+  }, [
+    enabled,
+    id,
+    permissionsKey,
+    registerRequiredPermissions,
+    requireAll,
+    source,
+    unregisterRequiredPermissions
+  ]);
+};
+
+// src/permissions/permissions-requirement.tsx
+import { Fragment as Fragment10, jsx as jsx107 } from "react/jsx-runtime";
+var PermissionsRequirement = ({
+  children,
+  source,
+  enabled = true,
+  ...props
+}) => {
+  const { permissions, requireAll } = resolvePermissionProps(
+    props
+  );
+  useRegisterPermissions(permissions, { requireAll, source, enabled });
+  return /* @__PURE__ */ jsx107(Fragment10, { children });
+};
+
+// src/permissions/use-permissions.tsx
+import { useContext as useContext11 } from "react";
+var usePermissions = () => {
+  const context = useContext11(PermissionsContext);
+  if (!context) {
+    throw new Error("usePermissions must be used within a PermissionsProvider");
+  }
+  return context;
+};
+
+// src/permissions/permission-guard.tsx
+import { Fragment as Fragment11, jsx as jsx108 } from "react/jsx-runtime";
+var PermissionGuard = ({
+  children,
+  fallback = null,
+  showLoading = false,
+  loadingComponent = null,
+  source,
+  enabled = true,
+  ...props
+}) => {
+  const { permissions, requireAll } = resolvePermissionProps(
+    props
+  );
+  useRegisterPermissions(permissions, { requireAll, source, enabled });
+  const { hasAnyPermission, hasAllPermissions, isLoading } = usePermissions();
+  if (isLoading && showLoading) {
+    return /* @__PURE__ */ jsx108(Fragment11, { children: loadingComponent });
+  }
+  const hasAccess = requireAll ? hasAllPermissions(permissions ?? []) : hasAnyPermission(permissions ?? []);
+  if (!hasAccess) {
+    return /* @__PURE__ */ jsx108(Fragment11, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx108(Fragment11, { children });
+};
+
+// src/permissions/route-permission-guard.tsx
+import { ExclamationCircle as ExclamationCircle5 } from "@medusajs/icons";
+import { Container as Container6, Heading as Heading10, Text as Text21 } from "@medusajs/ui";
+import { useMemo as useMemo24 } from "react";
+import { useTranslation as useTranslation45 } from "react-i18next";
+import { Navigate as Navigate2, Outlet as Outlet3, useMatches } from "react-router-dom";
+import { jsx as jsx109, jsxs as jsxs70 } from "react/jsx-runtime";
+var readRequirementFromHandle = (handle) => {
+  if (!handle || typeof handle !== "object") {
+    return void 0;
+  }
+  const declared = handle;
+  const rawPermissions = declared.permissions;
+  if (!rawPermissions) {
+    return void 0;
+  }
+  const permissions = Array.isArray(rawPermissions) ? rawPermissions : [rawPermissions];
+  if (!permissions.every((permission) => typeof permission === "string")) {
+    console.error(
+      "Invalid permissions: all permissions must be strings",
+      permissions
+    );
+    return void 0;
+  }
+  if (!permissions.length) {
+    return void 0;
+  }
+  return {
+    permissions,
+    requireAll: declared.requireAll ?? true,
+    redirectTo: declared.redirectTo
+  };
+};
+var RoutePermissionGuard = () => {
+  const matches = useMatches();
+  const { hasAnyPermission, hasAllPermissions, isLoading } = usePermissions();
+  const requirement = useMemo24(() => {
+    for (let i = matches.length - 1; i >= 0; i--) {
+      const found = readRequirementFromHandle(matches[i].handle);
+      if (found) {
+        return found;
+      }
+    }
+    return void 0;
+  }, [matches]);
+  useRegisterPermissions(requirement?.permissions ?? null, {
+    requireAll: requirement?.requireAll ?? true,
+    source: "route"
+  });
+  if (isLoading || !requirement) {
+    return /* @__PURE__ */ jsx109(Outlet3, {});
+  }
+  const hasAccess = requirement.requireAll ? hasAllPermissions(requirement.permissions) : hasAnyPermission(requirement.permissions);
+  if (!hasAccess) {
+    if (requirement.redirectTo) {
+      return /* @__PURE__ */ jsx109(Navigate2, { to: requirement.redirectTo, replace: true });
+    }
+    return /* @__PURE__ */ jsx109(AccessDenied, { requirement });
+  }
+  return /* @__PURE__ */ jsx109(Outlet3, {});
+};
+var AccessDenied = ({
+  requirement
+}) => {
+  const { t: t2 } = useTranslation45();
+  return /* @__PURE__ */ jsx109("div", { className: "bg-ui-bg-subtle absolute bottom-0 left-0 right-0 top-0 flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsx109(Container6, { className: "max-w-md", children: /* @__PURE__ */ jsxs70("div", { className: "flex flex-col items-center gap-y-4 py-8 text-center", children: [
+    /* @__PURE__ */ jsx109("div", { className: "bg-ui-bg-subtle flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx109(ExclamationCircle5, { className: "text-ui-fg-muted" }) }),
+    /* @__PURE__ */ jsxs70("div", { className: "flex flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsx109(Heading10, { level: "h2", children: t2("permissions.accessDenied.title") }),
+      /* @__PURE__ */ jsx109(Text21, { className: "text-ui-fg-subtle", children: t2("permissions.accessDenied.description") })
+    ] }),
+    /* @__PURE__ */ jsx109(Text21, { size: "small", className: "text-ui-fg-muted", children: t2("permissions.accessDenied.requiredPermission", {
+      permission: requirement.permissions.join(", ")
+    }) })
+  ] }) }) });
+};
+
+// src/permissions/required-permissions-section.tsx
+import { Badge as Badge9, Container as Container7, Heading as Heading11, Text as Text22 } from "@medusajs/ui";
+import { useTranslation as useTranslation46 } from "react-i18next";
+
+// src/permissions/use-required-permissions.tsx
+import { useContext as useContext12 } from "react";
+var useRequiredPermissions = () => {
+  const context = useContext12(PermissionsRequirementsContext);
+  return context?.requiredPermissions ?? [];
+};
+
+// src/permissions/required-permissions-section.tsx
+import { jsx as jsx110, jsxs as jsxs71 } from "react/jsx-runtime";
+var RequiredPermissionsSection = () => {
+  const { t: t2 } = useTranslation46();
+  const { isRbacEnabled } = usePermissions();
+  const requirements = useRequiredPermissions();
+  if (!isRbacEnabled) {
+    return null;
+  }
+  if (!requirements.length) {
+    return /* @__PURE__ */ jsxs71(Container7, { className: "flex flex-col gap-y-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx110(Heading11, { level: "h2", children: t2("permissions.requiredPermissions.title") }),
+      /* @__PURE__ */ jsx110(Text22, { size: "small", className: "text-ui-fg-subtle", children: t2("permissions.requiredPermissions.none") })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs71(Container7, { className: "flex flex-col gap-y-3 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs71("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx110(Heading11, { level: "h2", children: t2("permissions.requiredPermissions.title") }),
+      /* @__PURE__ */ jsx110(Badge9, { size: "2xsmall", rounded: "full", children: requirements.length })
+    ] }),
+    /* @__PURE__ */ jsx110("div", { className: "flex flex-col gap-y-3", children: requirements.map((requirement) => {
+      const key = [
+        requirement.requireAll ? "all" : "any",
+        requirement.permissions.join("|"),
+        requirement.source || ""
+      ].join("::");
+      return /* @__PURE__ */ jsxs71("div", { className: "flex flex-col gap-y-2", children: [
+        /* @__PURE__ */ jsx110(Text22, { size: "small", className: "text-ui-fg-subtle", children: requirement.requireAll ? t2("permissions.requiredPermissions.allOf") : t2("permissions.requiredPermissions.anyOf") }),
+        /* @__PURE__ */ jsx110("div", { className: "flex flex-wrap gap-1.5", children: requirement.permissions.map((permission) => /* @__PURE__ */ jsx110(Badge9, { size: "2xsmall", children: permission }, permission)) }),
+        requirement.source && /* @__PURE__ */ jsx110(Text22, { size: "xsmall", className: "text-ui-fg-muted", children: t2("permissions.requiredPermissions.source", {
+          source: requirement.source
+        }) })
+      ] }, key);
+    }) })
+  ] });
+};
+
+// src/permissions/use-resource-permissions.tsx
+import { useMemo as useMemo25 } from "react";
+var useResourcePermissions = (resource) => {
+  const { can, isLoading } = usePermissions();
+  return useMemo25(
+    () => ({
+      canRead: can(resource, "read"),
+      canCreate: can(resource, "create"),
+      canUpdate: can(resource, "update"),
+      canDelete: can(resource, "delete"),
+      can: (operation) => can(resource, operation),
+      resource,
+      isLoading
+    }),
+    [can, resource, isLoading]
+  );
+};
+
 // src/price-lists/constants.ts
 var PriceListStatus = /* @__PURE__ */ ((PriceListStatus2) => {
   PriceListStatus2["ACTIVE"] = "active";
@@ -28102,6 +28529,12 @@ export {
   NoResults,
   OrderBy,
   PercentageInput,
+  PermissionGuard,
+  PermissionsContext,
+  PermissionsProvider,
+  PermissionsRequirement,
+  PermissionsRequirementsContext,
+  PermissionsRequirementsProvider,
   PlaceholderCell,
   PriceListDateStatus,
   PriceListStatus,
@@ -28112,8 +28545,10 @@ export {
   ProvinceSelect,
   Query,
   REFERENCE_FIELDS,
+  RequiredPermissionsSection,
   RouteDrawer,
   RouteFocusModal,
+  RoutePermissionGuard,
   SectionRow,
   SegmentedControl,
   SidebarLink,
@@ -28176,6 +28611,7 @@ export {
   productChangeViewHasContent,
   queryClient,
   queryKeysFactory,
+  resolvePermissionProps,
   useCombinedRefs,
   useCommandHistory,
   useDataTable2 as useDataTable,
@@ -28186,7 +28622,11 @@ export {
   useExtendableTable,
   useExtension,
   useLinkQuery,
+  usePermissions,
   useQueryParams,
+  useRegisterPermissions,
+  useRequiredPermissions,
+  useResourcePermissions,
   useRouteModal,
   useStackedModal,
   useTabManagement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mercurjs/dashboard-shared",
-  "version": "2.3.2-canary.1",
+  "version": "2.3.2-canary.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/mercurjs/mercur",
@@ -23,7 +23,7 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@mercurjs/client": "2.3.2-canary.1",
+    "@mercurjs/client": "2.3.2-canary.2",
     "@ariakit/react": "^0.4.15",
     "@babel/runtime": "^8.0.0",
     "@dnd-kit/core": "^6.1.0",
@@ -64,9 +64,9 @@
   },
   "devDependencies": {
     "@medusajs/types": "2.18.0",
-    "@mercurjs/core": "2.3.2-canary.1",
-    "@mercurjs/dashboard-sdk": "2.3.2-canary.1",
-    "@mercurjs/types": "2.3.2-canary.1",
+    "@mercurjs/core": "2.3.2-canary.2",
+    "@mercurjs/dashboard-sdk": "2.3.2-canary.2",
+    "@mercurjs/types": "2.3.2-canary.2",
     "@types/lodash.debounce": "^4.0.8",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.2.22",