chore: import upstream snapshot with attribution

apps/sim/components/permissions/index.ts

@@ -0,0 +1,13 @@
+export {
+  type OrgRole,
+  OrgRoleSelector,
+  PermissionSelector,
+  type PermissionType,
+} from './permission-selector'
+export {
+  type CredentialRoleSource,
+  credentialRoleLockReason,
+  RoleLockTooltip,
+  type WorkspaceRoleSource,
+  workspaceRoleLockReason,
+} from './role-lock'

apps/sim/components/permissions/permission-selector.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import React from 'react'
+import { ButtonGroup, ButtonGroupItem, cn } from '@sim/emcn'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
+
+export type { PermissionType }
+
+type SelectorSize = 'default' | 'compact'
+
+interface PermissionSelectorProps {
+  value: PermissionType
+  onChange: (value: PermissionType) => void
+  disabled?: boolean
+  className?: string
+  size?: SelectorSize
+}
+
+const COMPACT_ITEM_CLASS = 'h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
+
+export const PermissionSelector = React.memo<PermissionSelectorProps>(
+  ({ value, onChange, disabled = false, className, size = 'default' }) => {
+    const itemClass = size === 'compact' ? COMPACT_ITEM_CLASS : undefined
+    return (
+      <ButtonGroup
+        value={value}
+        onValueChange={(val) => onChange(val as PermissionType)}
+        disabled={disabled}
+        className={cn(disabled && 'cursor-not-allowed', className)}
+      >
+        <ButtonGroupItem value='read' className={itemClass} title='View only'>
+          Read
+        </ButtonGroupItem>
+        <ButtonGroupItem value='write' className={itemClass} title='Edit content'>
+          Write
+        </ButtonGroupItem>
+        <ButtonGroupItem value='admin' className={itemClass} title='Full access'>
+          Admin
+        </ButtonGroupItem>
+      </ButtonGroup>
+    )
+  }
+)
+PermissionSelector.displayName = 'PermissionSelector'
+
+export type OrgRole = 'admin' | 'member'
+
+interface OrgRoleSelectorProps {
+  value: OrgRole
+  onChange: (value: OrgRole) => void
+  disabled?: boolean
+  className?: string
+  size?: SelectorSize
+}
+
+const COMPACT_ORG_ITEM_CLASS = 'h-[22px] min-w-[58px] px-1.5 py-0 text-xs'
+
+export const OrgRoleSelector = React.memo<OrgRoleSelectorProps>(
+  ({ value, onChange, disabled = false, className, size = 'compact' }) => {
+    const itemClass = size === 'compact' ? COMPACT_ORG_ITEM_CLASS : undefined
+    return (
+      <ButtonGroup
+        value={value}
+        onValueChange={(val) => onChange(val as OrgRole)}
+        disabled={disabled}
+        className={cn(disabled && 'cursor-not-allowed', className)}
+      >
+        <ButtonGroupItem value='member' className={itemClass} title='Organization member'>
+          Member
+        </ButtonGroupItem>
+        <ButtonGroupItem value='admin' className={itemClass} title='Organization admin'>
+          Admin
+        </ButtonGroupItem>
+      </ButtonGroup>
+    )
+  }
+)
+OrgRoleSelector.displayName = 'OrgRoleSelector'

apps/sim/components/permissions/role-lock.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Tooltip } from '@sim/emcn'
+
+export type WorkspaceRoleSource = 'owner' | 'explicit' | 'org-admin'
+export type CredentialRoleSource = 'explicit' | 'workspace-admin'
+
+/**
+ * Explanation shown when a workspace member's role is fixed by inheritance and
+ * cannot be edited. Returns null for editable (`explicit`) roles.
+ */
+export function workspaceRoleLockReason(
+  roleSource: WorkspaceRoleSource | undefined
+): string | null {
+  if (roleSource === 'org-admin') return 'Organization admins are automatically workspace admins'
+  if (roleSource === 'owner') return 'Workspace owner'
+  return null
+}
+
+/**
+ * Explanation shown when a credential member's role is fixed because they are a
+ * workspace admin. Returns null for editable (`explicit`) roles.
+ */
+export function credentialRoleLockReason(
+  roleSource: CredentialRoleSource | undefined
+): string | null {
+  if (roleSource === 'workspace-admin') {
+    return 'Workspace admins are automatically credential admins'
+  }
+  return null
+}
+
+interface RoleLockTooltipProps {
+  reason: string | null
+  children: ReactNode
+}
+
+/**
+ * Wraps a disabled role control in a tooltip explaining why the role is fixed.
+ * Renders children unchanged when there is no lock reason.
+ */
+export function RoleLockTooltip({ reason, children }: RoleLockTooltipProps) {
+  if (!reason) return <>{children}</>
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <div className='inline-flex'>{children}</div>
+      </Tooltip.Trigger>
+      <Tooltip.Content>{reason}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+}